들어가며: setTimeout은 정확히 몇 초 뒤에 실행될까? JavaScript를 처음 배울 때 setTimeout은 꽤 단순해 보입니다. setTimeout(() => { console.log("1초 뒤 실행"); }, 1000); 이 코드를 보면 자연스럽게 이렇게 이해합니다. 1000ms 뒤에 함수가 실행된다. 하지만 실...

들어가며: React 바깥의 상태를 어떻게 읽어야 할까? React 컴포넌트에서 상태를 다룰 때는 보통 useState, useReducer, useContext를 사용합니다. const [count, setCount] = useState(0); 이 상태들은 React가 직접 관리합니다. 하지만 모든 상태가 React 안에 있는 것은 아닙...

들어가며: React Query는 useQuery만 쓰는 도구가 아니에요 React Query를 처음 사용할 때는 보통 useQuery와 useMutation부터 익힙니다. const { data, isPending } = useQuery({ queryKey: ["posts"], queryFn: fetchPosts, }); const...

들어가며: 페이지를 넘길 때 화면이 깜빡이는 이유 React Query로 페이지네이션을 만들 때 보통 page 값을 queryKey에 넣습니다. const { data, isPending } = useQuery({ queryKey: ["projects", page], queryFn: () => fetchProjects(page), ...

들어가며: useMemo와 useCallback은 성능 버튼이 아니에요 React를 공부하다 보면 useMemo와 useCallback을 자주 만나게 됩니다. 처음에는 이런 식으로 이해하기 쉽습니다. useMemo를 쓰면 성능이 좋아진다 useCallback을 쓰면 함수가 새로 안 만들어진다 렌더링 최적화하려면 일단 감싸면 된다 하지만 실...

들어가며: 리스트가 많아지면 왜 느려질까? React에서 목록을 렌더링할 때 처음에는 보통 이렇게 작성합니다. function UserList({ users }: { users: User[] }) { return ( <ul> {users.map((user) => ( <li key={use...

들어가며: Suspense는 로딩 컴포넌트가 아니에요 React에서 Suspense를 처음 보면 보통 이렇게 이해합니다. <Suspense fallback={<p>로딩 중...</p>}> <SomeComponent /> </Suspense> 그래서 이런 느낌이 들 수 있습니다. Susp...

들어가며: dynamic은 성능 최적화 버튼이 아니에요 Next.js를 사용하다 보면 dynamic이라는 코드를 자주 보게 됩니다. import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart")); 처음 보면 이런 느낌이 듭니다. 컴포넌트를 dynami...

들어가며: 마크업은 화면에 보이는 구조만 만드는 게 아니에요 프론트엔드 개발을 하다 보면 HTML을 단순히 화면에 요소를 배치하는 도구처럼 생각하기 쉽습니다. 버튼처럼 보이면 버튼 링크처럼 보이면 링크 input처럼 보이면 input 하지만 실제 서비스에서는 보이는 모양만큼이나 중요한 것이 있습니다. 사용자가 그 요소를 어떻게 찾고, 이동하고...

들어가며: 모달은 화면에 띄우는 것만으로 끝나지 않아요 모달을 만들 때 처음에는 보통 이런 부분에 집중하게 됩니다. 배경을 어둡게 깔기 가운데에 박스 띄우기 닫기 버튼 만들기 바깥 영역을 클릭하면 닫기 z-index를 높게 주기 눈으로 보기에는 이 정도만 해도 모달처럼 보입니다. 하지만 키보드로 조작해보면 이야기가 달라집니...