분류 전체보기(82)
-
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 -
특정파일 깃허브 전체 이력 삭제
1. filter-repo 설치brew install git-filter-repo 2. 삭제할 파일 선택 후 깃 이력에서 전체 삭제 - 삭제할 파일 경로 : src/types/userInfo.ts - 로컬에서 파일 삭제 및 깃이력에서 해당 파일이 전체 삭제 된다.git filter-repo --path src/types/userInfo.ts --invert-paths --force 로컬의 git 에서는 모든 커밋 이력에 src/types/userInfo.ts 경로의 파일이 삭제가 되지만,저장소 히스토리를 파괴적으로 수정(rewrite) 하기 때문에,실수로 원격에 잘못 푸시하는 걸 막기 위해 자동으로 origin을 삭제를 해서 아래 경고가 발생 remote repository 가 연결 해제 되..
2025.09.30