jongminchungtech

FE

프론트엔드

프론트엔드 문서는 React 컴포넌트, 디자인 시스템, 브라우저 성능과 유지보수 경계를 구현·검증하는 실무 기준을 설명함

React와 UI 아키텍처

Headless한 React 컴포넌트 만들기동작과 표현을 분리하고 합성 가능한 Headless React 컴포넌트를 설계합니다.React 컴포넌트 기반 사고상태, 데이터 흐름, 컴포넌트 경계와 긴장을 통해 React 컴포넌트 모델을 이해합니다.

테스트와 품질

Playwright로 유의미한 시각 회귀 테스트 만들기사용자 계약, 결정적 렌더링과 기준선 검토 절차를 결합해 신뢰할 수 있는 Playwright 시각 회귀 테스트를 구성합니다.

성능과 인터랙션

모델링 시리즈: 뷰모델테이블 예제로 화면의 요구사항을 명시적인 뷰모델로 모델링하는 방법을 설명합니다.브라우저의 메인 스레드는 비싸다브라우저 메인 스레드의 프레임 예산, 작업 분할, 우선순위, 렌더링 비용을 인터랙티브하게 분석합니다.애니메이션을 설계하는 방법그래프, 이징, 스프링, 파이프라인과 결정적 랜덤을 이용해 애니메이션을 설계합니다.프론트엔드 캐싱 전략캐시 계층, freshness, stampede, 키와 태그 무효화를 프런트엔드 관점에서 정리합니다.

Tailwind와 shadcn/ui 유지보수

Tailwind와 shadcn/ui의 유지보수성은 소유권에서 시작함class 수보다 theme, primitive, composition과 page의 변경 권한을 분리해야 하는 이유를 설명합니다.유지보수 가능한 Tailwind와 shadcn/ui 기능 만들기기존 primitive와 semantic token을 사용해 상태 안내 panel을 만드는 학습 과정을 안내합니다.기존 Tailwind와 shadcn/ui 화면을 감사하는 방법기존 화면의 owner 누수, raw color, 동적 class와 shadcn update 위험을 찾아 안전하게 리팩터링합니다.Tailwind와 shadcn/ui 유지보수 참조owner, semantic token, class 작성, shadcn lifecycle과 검증 명령을 빠르게 조회하는 참조입니다.