본문 바로가기

코딩 정보54

[React][TypeScript] 타입스크립트에 대해 알아보자 목차 타입스크립트가 무엇이고 왜 써야하는지 그리고 활용 방법에 대해 알아보자  타입스크립트란?타입스크립트는 자바스크립트의 단점을 보완하기 위해 만들어진 정적 타입 언어(static type language)이다.자바스크립트가 확장된 언어이기 때문에 기존 자바스크립트의 기능을 모두 사용할 수 있고 브라우저에서 실행하기 위해서 컴파일(complile)이라는 변환 과정을 거쳐야 한다.  타입스크립트는 왜 써야 하는거지?1. 에러의 방지// jsfunction sum(a, b) { return a + b;}// tsfunction sum(a: number, b: number) { return a + b;} number 타입에 문자열을 할당할 수 없다고 에러가 발생하게 되어 의도하지 않은 코드의 동작을 예방할.. 2024. 8. 28.
[React][Vite] 프로젝트 시작하기 전 구축을 해보자 목차vite기반 프로젝트 시작하기나는 vite 기반으로 프로젝트를 하고자 한다. vite에 알고 싶다면?참고https://analogcode.tistory.com/39 [Vue + Vite] 근데 Vite는 뭔가요?Vue 3로 오면서 Vue 프로젝트를 만들면 Vite 기반으로 빌드설정이 이루어지게 된다. Vite는 기존의 Vue CLI를 대체하기 위한 툴이다. Vite를 이용하여 Vue 프로젝트의 스캐폴딩을 만든다라고 보면 된다.analogcode.tistory.com 다음 명령어를 실행 해주자$ npm create vite@latest 다음 창에서 리액트를 선택해 주자 그후 자바스크립와 타입스크립트 중 선호하는 것을 고르자 eslint 설정하기참고https://velog.io/@_jouz_ryul/ES.. 2024. 8. 28.
[React][React-Query] React-Query를 통해 fallback을 구현해 보자 목차 리액트 라우터와 함께 react-query로 fallback을 구현하는 방법에 대해 알아보자아래 라우터의 기본적인 사용방법이 나와있다..참고https://be-senior-developer.tistory.com/180 [React][Tanstack Query] 개념과 활용 방법에 대해 알아보자목차 간단한 설명은 아래 페이지에 있다.참고https://be-senior-developer.tistory.com/94 [React] React-Query 라이브러리가 무엇인지 알아보자목차 오늘은 프로젝트를 하면서 리액트 쿼리에 대해 접하게 되었be-senior-developer.tistory.com fallback이란? 어떤 기능이 약해지거나 제대로 동작하지 않을 때, 이에 대처하는 기능 또는 동작을 말한다... 2024. 8. 27.
[React][React Pattern] 컴파운드 컴포넌트에 대해 알아보자 목차 컴파운드 컴포넌트란? Compound Components는 React의 강력한 기능 중 하나로 Compound Components를 사용하면 유연하고 재사용 가능한 컴포넌트를 설계할 수 있으며, 코드의 가독성과 유지 보수성을 높일 수 있다.html 요소를 통해 예를 들면  과 가 있다. 둘은 각각 썻을 때 별 기능이 없지만 함께 하면 유용한 기능을 사용할 수 있다.  컴파운트 컴포넌트 리액트 패턴 만들기  Accordion.jsx import { createContext, useContext, useState } from "react";import AccordionItem from "./AccordionItem";const AccordionContext = createContext();export .. 2024. 8. 26.
728x90