Coding Study(70)
-
React Compiler ( 리액트 컴파일러 )
React Compiler v 1.0 출시2025년 10월 7일 React 컴파일러 버전 1.0 이 출시 되었다. "이번 릴리스는 거의 10년에 걸친 거대하고 복잡한 엔지니어링 노력의 정점" 이라고 되어 있다.https://ko.react.dev/blog/2025/10/07/react-compiler-1 React Compiler v1.0 – ReactThe library for web and native user interfacesko.react.dev 리액트 컴파일러가 해결하려한 문제1. 부모 컴포넌트가 리렌더링이 되면 자식 컴포넌트가 무조건 같이 리렌더링이 된다.2. 1과 같은 문제는 useMemo, useCallback 을 통해 해결은 가능하다.3. 다만 이런 훅은 의존성 배열이 필요 해서 관리 ..
2025.12.06 -
Tanstack Query 설정
https://tanstack.com/ TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com 1. 설치npm i @tanstack/react-query 2. queryClient를 생성한 후, 사용할 컴포넌트를 QueryClientProvider로 감싼다. - QueryClient는 모든 서버 상태를 보관하는 store라고 이해하면 되겠다.import { createRoot }..
2025.11.12 -
useQuery 사용법
1. React 에서의 일반적인 데이터 패칭 방법 1) 데이터를 받아오는 비동기 함수를 작성export async function fetchMovieDetail(id: string) { const options = { method: 'GET', headers: { accept: 'application/json', Authorization: `Bearer ${API}`, }, } const response = await fetch( `https://api.themoviedb.org/3/movie/${id}?language=ko`, options ) if (!response.ok) { throw new Error('영화 정보를 불러오지 못했습니다.'..
2025.11.12 -
useEffectEvent
출처 : https://react.dev/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects Separating Events from Effects – ReactThe library for web and native user interfacesreact.dev declaring an Effect Event (효과 이벤트 선언) 참고 1. Effect의 목적과 의존성useEffect의 목적: useEffect는 컴포넌트 외부의 시스템(여기서는 채팅 서버 연결)과 동기화(synchronization)하는 데 사용됩니다. 즉, 의존성 배열([roomId])에 있는 값이 바뀔 때마다 동기화(연결/재연결)를 다시 실행..
2025.10.13 -
typescript 초기 설정
node.js 패키지 초기화npm init -y node.js 가 제공하는 type 을 설치npm i @types/node 타입스크립트 컴파일러 설치 1) 맥OS 기준이며 -g 옵션으로 글로벌로 설치 한다고 해서 전역에서 사용 가능 sudo npm install typescript -g 2) 설치 되었는지 버전 확인tsc -v 타입스크립트 실행 방법 1) ts 파일을 자바스크립트(.js) 파일로 변환tsc [파일명].ts 결과물 : [파일명].js 2) 자바스크립트 파일 실행node [파일명].js 타입스크립트를 자바스크립트 파일로 변환 없이 한번에 실행 하기1) tsx 설치sudo npm i -g tsx 2) 타입스크립트 파일 실행tsx [파일명].ts 버튼으로 실행 방법 1)..
2025.10.02 -
데이터 모델링
테이블 만들기 정규형식1NF : 제1 정규형2NF :제2 정규형3NF: 제3 정규형 정규화 규칙의 장점 데이터 중복 (redundancy) 제거 데이터 무결성 (integrity) 준수 이상현상 (anomaly) 방지 1NF 테이블 한칸에는 하나의 값만 중복 로우, 컬럼 X Primary Key 필수 한 컬럼에는 같은 데이터 타입 사용 도서관 책 대여를 예시로 1NF 에 대한 테이블 예시 설명 1. 테일블 한칸에는 하나의 값만 / 중복 로우,컬럼 x 대여한 책 목록에 값이 2개 이상이 들어갈 경우 1NF 에 위배 된다. 만약 책 1개만 반납 할 경우 작성 방법이 애매해지기 때문이다. 테이블 한 칸에는 하나의 값만 작성한다. 2. 중복 로우, 컬럼x 로우를 늘이지 않고 컬럼을 늘여서 대여한 책을..
2025.09.02