HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생
/
🍔
김동영팀
/
🎲
폴더 구조 및 컴포넌트 분류
🎲

폴더 구조 및 컴포넌트 분류

Tags
참고
 

폴더 구조

 
atomic 디자인 패턴을 컴포넌트에 적용
Services → API호출 담당
Components/UI → 공통된 컴포넌트(로직X)
Components/Services → 서비스 로직과 엮인 컴포넌트
 
Templates까지는 스타일적 요소만 → Pages에서 로직이 들어가게
 
컴포넌트폴더 안에 스토리북 파일과 SCSS파일 모두 넣기
ex) 버튼 컴포넌트 폴더에는 스토리북 + SCSS + 컴포넌트 자체가 들어간다.
 
  • Atomic Design 관련 자료
https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/
notion image
 
api호출은 app/services에서 역할을 담당