shadcn/ui 핵심 개념과 아키텍처 이해하기
shadcn/ui가 컴포넌트 소스 코드를 프로젝트에 복사해 사용하는 방식을 살펴봅니다. 원문 예제를 바탕으로 컴포넌트 구조와 Tailwind CSS 스타일링을 설명합니다.
React로 만들며 부딪힌 것들입니다. 상태를 어디에 둘지, 캐시와 렌더링이 어떻게 맞물리는지 확인합니다.
모든 태그 보기shadcn/ui가 컴포넌트 소스 코드를 프로젝트에 복사해 사용하는 방식을 살펴봅니다. 원문 예제를 바탕으로 컴포넌트 구조와 Tailwind CSS 스타일링을 설명합니다.
SVG를 img·CSS 배경·인라인·스프라이트로 사용하는 방식을 비교합니다. SVGO로 최적화하고, SVGR로 React 컴포넌트를 만들며 자산을 관리하는 방법을 정리합니다.
tsconfig의 다섯 가지 jsx 옵션과 각각의 변환 결과를 비교합니다. React.createElement를 호출하는 방식과 React 17에서 도입된 자동 JSX 런타임의 차이를 설명합니다.
React에서 별도로 저장할 필요가 없는 상태를 구분합니다. 최신 값 읽기, 파생 값 계산, Effect의 연쇄 실행 예제로 상태를 줄이는 기준을 살펴봅니다.
응집도와 결합도의 종류를 구분하고, 프론트엔드 컴포넌트와 모듈 설계에 적용해봅니다. 상태 관리·의존성 주입·이벤트 버스가 코드 간 의존 관계에 미치는 영향을 예제로 살펴봅니다.
Next.js 페이지별 이름과 추적 설정을 JSON으로 관리하는 next-pathmap을 소개합니다. 페이지 파일을 읽어 목록을 만들고, 누락된 설정을 점검하는 과정을 설명합니다.
TanStack Query가 쿼리 키로 캐시를 찾는 과정을 소스 코드로 살펴봅니다. 키의 직렬화와 부분 매칭, 데이터 갱신과 하이드레이션에서 주의할 점을 정리합니다.
Docker로 React 개발 환경을 구성하고 NGINX로 배포하는 과정을 정리한 2022년 튜토리얼입니다. 볼륨, 환경 변수, Docker Compose와 멀티 스테이지 빌드를 다룹니다.