Figma에서 SVG로 export했는데도 용량이 컸던 이유
Figma에서 SVG로 export한 파일의 용량이 컸던 이유를 정리합니다. SVG 내부에 image 태그가 포함되어 있던 구조와, WebP 변환으로 용량을 줄인 과정을 기록합니다.
Root Layout의 Provider 중첩을 Compose 패턴으로 정리하기
Next.js의 root layout에서 여러 Provider가 깊게 중첩되던 구조를 Compose 패턴으로 평탄화한 과정을 정리합니다. Provider 조합 책임을 AppProviders로 분리하면서 layout.tsx의 역할을 더 명확하게 만든 이유를 기록합니다.
서버 사이드 렌더링이란 무엇인가
서버 사이드 렌더링(SSR)이 무엇인지 개념부터 정리합니다. HTML을 서버에서 생성하는 방식과, 클라이언트 사이드 렌더링(CSR)과의 차이를 설명합니다.
JSX가 무엇인지 정리하기
JSX가 무엇인지 개념부터 정리합니다. HTML처럼 보이지만 JavaScript 문법 확장이라는 점과, 빌드 과정에서 함수 호출로 변환되는 구조를 중심으로 설명합니다.
메모이제이션이란 무엇인가
메모이제이션이 무엇인지 개념부터 정리합니다. 계산 최적화 기법으로서의 메모이제이션이 어떤 전제에서 성립하는지, 그리고 언제 의미를 가지는지를 중심으로 설명합니다
자주 사용하는 리액트 훅 (2)
React에서 구조와 렌더링 타이밍을 다루기 시작하면서 사용하게 된 훅들을 정리합니다. useLayoutEffect, useContext, 커스텀 훅이 어떤 상황에서 유용했는지를 중심으로 기록합니다.
자주 사용하는 리액트 훅 (1)
React에서 가장 자주 사용하는 훅인 useState, useEffect, useRef를 정리합니다. 각 훅이 무엇을 위한 도구인지와 어떤 상황에서 유용한지를 중심으로 설명합니다.
props drilling이 생겼던 구조와 당시 선택
React에서 상태를 상위로 끌어올리면서 발생한 props drilling 구조를 정리합니다. 중간 컴포넌트가 props를 전달만 하게 된 문제와, 그 시점에서 Context API를 선택지로 고려하게 된 이유를 기록합니다.
리액트에서 key를 사용하는 이유
React에서 리스트를 렌더링할 때 key가 왜 필수인지 정리합니다. React의 렌더링 방식과 index를 key로 사용할 때 발생하는 문제를 중심으로, 안정적인 key를 선택하는 기준을 기록합니다.
useState로 상태를 관리하다가 불편해지기 시작한 지점
React에서 useState로 상태를 관리하던 중, 페이지 이동·새로고침·뒤로가기 상황에서 상태가 유지되지 않았던 문제를 정리합니다.