들어가며: .env는 비밀번호를 숨겨 주는 파일일까? 프론트엔드 프로젝트를 실행하다 보면 루트 디렉터리에서 다음과 같은 파일을 자주 만나게 됩니다. .env .env.local .env.development .env.production .env.test 그리고 코드에서는 다음과 같이 값을 읽습니다. const apiUrl = process...
[SVG] 선이 그려지는 애니메이션 완벽 이해하기: 원리부터 React 활용까지
들어가며: SVG 선은 어떻게 조금씩 나타날까? 로고, 서명, 아이콘, 지도 경로가 마치 펜으로 그려지는 것처럼 나타나는 애니메이션을 본 적이 있을 거예요. 처음 보면 SVG 경로를 프레임마다 새로 계산하는 것처럼 느껴집니다. 하지만 기본 원리는 의외로 단순합니다. 선을 실제로 조금씩 만드는 것이 아니라 완성된 선 위에 긴 대시 패턴을 올리...
[JavaScript] setTimeout 완벽 이해하기: 이벤트 루프, 지연 실행, cleanup까지
들어가며: setTimeout은 정확히 몇 초 뒤에 실행될까? JavaScript를 처음 배울 때 setTimeout은 꽤 단순해 보입니다. setTimeout(() => { console.log("1초 뒤 실행"); }, 1000); 이 코드를 보면 자연스럽게 이렇게 이해합니다. 1000ms 뒤에 함수가 실행된다. 하지만 실...
[React] useSyncExternalStore 이해하기: 외부 store를 안전하게 구독하는 방법
들어가며: React 바깥의 상태를 어떻게 읽어야 할까? React 컴포넌트에서 상태를 다룰 때는 보통 useState, useReducer, useContext를 사용합니다. const [count, setCount] = useState(0); 이 상태들은 React가 직접 관리합니다. 하지만 모든 상태가 React 안에 있는 것은 아닙...
[React Query] QueryClient 완벽 이해하기: prefetchQuery부터 캐시 조작까지
들어가며: React Query는 useQuery만 쓰는 도구가 아니에요 React Query를 처음 사용할 때는 보통 useQuery와 useMutation부터 익힙니다. const { data, isPending } = useQuery({ queryKey: ["posts"], queryFn: fetchPosts, }); const...
[React Query] keepPreviousData 이해하기: 페이지 전환 중 이전 데이터를 유지하는 방법
들어가며: 페이지를 넘길 때 화면이 깜빡이는 이유 React Query로 페이지네이션을 만들 때 보통 page 값을 queryKey에 넣습니다. const { data, isPending } = useQuery({ queryKey: ["projects", page], queryFn: () => fetchProjects(page), ...
[React] useMemo와 useCallback 완벽 이해하기: 언제 쓰고 언제 쓰지 말아야 할까
들어가며: useMemo와 useCallback은 성능 버튼이 아니에요 React를 공부하다 보면 useMemo와 useCallback을 자주 만나게 됩니다. 처음에는 이런 식으로 이해하기 쉽습니다. useMemo를 쓰면 성능이 좋아진다 useCallback을 쓰면 함수가 새로 안 만들어진다 렌더링 최적화하려면 일단 감싸면 된다 하지만 실...
[React] react-virtual 완벽 이해하기: TanStack Virtual로 긴 리스트 최적화하기
들어가며: 리스트가 많아지면 왜 느려질까? React에서 목록을 렌더링할 때 처음에는 보통 이렇게 작성합니다. function UserList({ users }: { users: User[] }) { return ( <ul> {users.map((user) => ( <li key={use...
[React] Suspense 완벽 이해하기: suspend 개념부터 fallback 동작까지
들어가며: Suspense는 로딩 컴포넌트가 아니에요 React에서 Suspense를 처음 보면 보통 이렇게 이해합니다. <Suspense fallback={<p>로딩 중...</p>}> <SomeComponent /> </Suspense> 그래서 이런 느낌이 들 수 있습니다. Susp...
[Next.js] dynamic 완벽하게 이해하고 사용하기
들어가며: dynamic은 성능 최적화 버튼이 아니에요 Next.js를 사용하다 보면 dynamic이라는 코드를 자주 보게 됩니다. import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart")); 처음 보면 이런 느낌이 듭니다. 컴포넌트를 dynami...