라이브러리와 프레임워크

📄️ shadcn/ui 핵심 개념과 아키텍처 이해하기

shadcn/ui의 핵심 개념과 아키텍처를 요약합니다. Headless UI 기반 컴포넌트 구조, Tailwind CSS 스타일링 방식, 그리고 디자인 시스템을 직접 소유하는 철학까지 살펴봅니다.

Gradle·ktlint·detekt를 프론트엔드의 빌드 도구·포매터·린터와 비교합니다. 테스트, DB 마이그레이션, 코드 생성 도구의 역할과 FE 도구에 비유할 때의 차이도 짚습니다.

TanStack Query가 쿼리 키를 해시로 바꾸고 캐시를 조회하는 과정을 소스 코드로 따라갑니다. 부분 매칭·구조적 공유·하이드레이션에서 값이 달라지는 조건도 살펴봅니다.

스프링의 빈·DI·IoC·AOP를 React·TypeScript의 익숙한 개념과 비교합니다. 웹 요청 처리부터 JPA·트랜잭션·테스트·스프링 부트까지 연결해 설명합니다.

Tailwind CSS 4.0의 CSS 기반 설정, 자동 콘텐츠 감지, Vite 통합을 살펴봅니다. 테마 변수와 동적 유틸리티, 컨테이너 쿼리 등 새 기능을 코드 예제로 정리합니다.

tsconfig의 다섯 가지 jsx 옵션과 각각의 변환 결과를 비교합니다. React.createElement를 호출하는 방식과 React 17에서 도입된 자동 JSX 런타임의 차이를 설명합니다.

npm의 peer dependency 충돌에서 --force와 --legacy-peer-deps가 각각 무엇을 허용하거나 무시하는지 비교합니다. 설치 성공이 실제 호환성을 보장하지 않는 이유도 설명합니다.

Vuex의 state·mutations·getters·actions를 예제로 익히고, 스토어를 모듈과 네임스페이스로 나누는 방법을 설명합니다. Vuex를 사용하는 기존 Vue 프로젝트를 이해하기 위한 글입니다.

React에서 최신 값 참조, 파생 상태, Effect 사슬을 구분하고 실제로 저장해야 할 상태만 남기는 판단 기준을 정리합니다.