들어가며: 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를 높게 주기 눈으로 보기에는 이 정도만 해도 모달처럼 보입니다. 하지만 키보드로 조작해보면 이야기가 달라집니...

들어가며: 이럴 때 이 태그를 쓰는 게 맞을까? HTML을 작성하다 보면 어느 순간부터 div만으로는 부족하다는 이야기를 듣게 됩니다. 그래서 header, nav, main, section, article, aside, footer 같은 시맨틱 태그를 사용하려고 하는데, 막상 쓰려고 하면 헷갈립니다. 이 영역은 section일까 article일...

들어가며: HTML과 화면 사이에는 DOM이 있어요 HTML을 처음 배울 때는 보통 이런 식으로 생각합니다. HTML 파일을 작성한다 ↓ 브라우저가 화면에 보여준다 틀린 말은 아니지만, 중간에 중요한 과정이 하나 있습니다. 브라우저는 HTML 코드를 그대로 화면에 붙이는 것이 아니라, HTML을 해석해서 DOM이라는 구조로 바꿉니다. 그리고...

들어가며: 애니메이션은 어려운 기술일까요? 웹 페이지를 만들다 보면 이런 효과를 자주 보게 됩니다. 버튼에 마우스를 올리면 살짝 떠오름 카드를 클릭하면 눌리는 느낌이 남 모달이 갑자기 나타나지 않고 부드럽게 등장함 로딩 중일 때 원이 빙글빙글 돎 리스트 아이템이 아래에서 위로 올라오며 나타남 처음에는 이런 애니메이션이 복잡한...

들어가며: “여기는 서버일까, 클라이언트일까?” Next.js App Router를 사용하다 보면 처음에는 이런 질문을 자주 만나게 됩니다. 이 컴포넌트에 use client를 붙여야 할까? 서버 컴포넌트에서 useState를 왜 못 쓰지? 클라이언트 컴포넌트로 함수를 넘기면 왜 에러가 나지? 서버 컴포넌트를 클라이언트 컴포넌트 안에 넣을 수는 없...