반응형
※ Atomic Design Pattern
- 컴포넌트를 원자처럼 최소 단위로 쪼개서 재활용 가능하게 처리
- 단점 : 컴포넌트 간에 의존성이 생김, 특정 원자단위의 컴포넌트에서 문제가 발생하면 상위 컴포넌트까지 다 에러가 발생 소지
Atoms (원자)
- 버튼, 메뉴, 제목, 글자, 폼요소, 썸네일
Molecules (분자)
- 검색바 (폼,버튼), 메뉴(버튼)
Organisms (유기체)
- GNB (메뉴를 그룹화)
Templates (템플릿)
- 유기체들이 모여있는 기능 덩어리
Pages (페이지)
- 템플릿들로 구성되어 있는 하나에 페이지
'IT > NextJs' 카테고리의 다른 글
| [NextJs] Swiper 사용 시 SwiperCore 사용하는 이유 (0) | 2023.08.21 |
|---|---|
| [NextJs] Atomic Design Pattern 컴포넌트 렌더링 흐름 (0) | 2023.08.18 |
| [NextJs] CSR , SSG , SSR , ISR 예제 (0) | 2023.08.04 |
| [NextJs] CSR , SSG , SSR , ISR 이론 정리 (0) | 2023.08.04 |
| [NextJs] Next.js 작업방식 정리 (Pre Rendering) (0) | 2023.08.03 |