프론트 | 폴더명 네이밍 규칙 정리

요약

내용은 아래의 사이트들을 기준점으로 설명했습니다

• 리액트 공식문서 사이트
  reactjs/reactjs.org: The React documentation website (github.com)
• 테일윈드 (CSS 프레임워크)
  tailwindlabs/tailwindcss: A utility-first CSS framework for rapid UI development. (github.com)
• 벨로그
  velopert/velog-client (github.com)

개인 추천 네이밍

• api
• src (asset)
  • components
  • containers
  • lib (utils)
  • css
  • icons
  • images
  • pages
  • templates
  • store (쇼핑몰 기준)
  • helper
  • hooks

이대로 하는 것을 권장하는 것은 아니지만, 이러한 방식으로 사용되고 있다는 것을 이해하고 있으면 도움이 될 것 같아서 정리하고 있습니다.

너무 깊게 생각하지 마세요

이제 막 프로젝트를 시작하는 단계라면 파일 구조를 선택하는 것에 있어서 5분 이상 시간을 투자하지 마세요. 앞서 살펴본 접근법 중에 아무거나 선택하고(혹은 자신만의 방법을 찾아내세요) 코드를 우선 작성해보세요.

리액트 공식 가이드북

참조

• 파일 구조 – React (reactjs.org)