| 요약 |
- Next.js 앱 라우터 이해
- 중첩 라우팅, 동적 경로, 서버 컴포넌트, data prefetch
- 프로젝트 구조 개요
- 페이지 및 경로 구성
- 구성 요소를 효과적으로 관리하기
- 스타일링 전략
- 상태 관리 모범 사례
- 성능 최적화
- 테스트 및 품질 보증
- 배포 고려 사항
- 결론
|
Figma, Storybook과 이 둘을 연계하는 토큰으로 구축하는 디자인 시스템
- Primitive 토큰
- 색상값이나 크기값 등의 기본값을 갖는 가장 기본적인 토큰으로 3단계 토큰 구조의 첫 번째 계층입니다.
- '색상(혹은 크기)-위계'의 구조입니다(예: zinc-100, radius-200).
- Semantic 토큰
- Primitive 토큰을 값으로 갖는 두 번째 계층으로, 화면에서 Component-specific 토큰이 적용된 부분을 제외한 모든 요소에 위계에 맞는 토큰을 사용합니다.
- '컴포넌트 구조-위계'의 구조입니다(예: text-neutral-primary, fg-neutral-primary).
- Component-specific 토큰
- Semantic 토큰 또는 Primitive 토큰을 값으로 갖는 세 번째 계층으로 가장 구체적으로 사용처가 정해지는 계층입니다.
- '컴포넌트 명칭-위계-컴포넌트 구조-상태값'의 구조입니다(예: button-primary-text-default).
|