summer.log
리액트 폴더 구조 + Atomic Design 본문
src 내부 폴더 구조
프로젝트의 단위가 커지다 보면 관리해야 할 파일이 늘어나기 때문에 처음부터 구조를 잡고 가는 것이 중요하다는 것을 느꼈다. 인턴을 하기 전까지는 폴더 구조에 대해 생각을 크게 해 본적이 없었는데, 멘토님들의 도움으로 구조를 한번 잡고 나니깐 협업할때 훨씬 수월했다.
Components
재사용한 가능한 공통 컴포넌트를 모아놓은 폴더
- 아토믹 디자인을 도입하는 경우 하위폴더로 Atoms, Molecules, Organisms을 추가한다.
- 아토믹 디자인이란? 👇
아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그
정호일(harry) 카카오페이지에서 웹 프론트엔드를 개발하고 있습니다. 집보다 밖에 돌아다니는 걸 좋아합니다.
fe-developers.kakaoent.com
Assets
Asset 을 관리하는 폴더, 종류별로 하위폴더 생성
Pages
react router등을 이용한 라우팅을 적용할 페이지 컴포넌트들을 모아놓은 폴더
- 해당 페이지에서만 사용하는 재사용 컴포넌트는 해당 페이지 폴더 내부에 Components 폴더를 만들어 관리
Hooks
공통으로 사용하는 custom hooks를 모아놓은 폴더
Apis
서버의 API를 호출하는 함수들을 모아놓은 폴더
*api 모듈 분리 참고
https://ghost4551.tistory.com/163
Libs
공통으로 사용하는 함수들을 모아놓은 폴더
Style
style 관련 파일들이 위치한 폴더
Utils
공통으로 사용하는 유틸 파일들을 모아놓은 폴더
Contexts(Store)
contextAPI를 사용할 때 관련 파일들이 위치하는곳
redux를 사용 할 경우 -> store
참고
[React] 리액트의 폴더 구조
프로젝트를 진행하다 보면 크기가 커질수록 관리해야할 파일은 늘어나고 이에 따라 각 파일들을 용도에 맞게 분류해야할 필요가 생깁니다.
velog.io
'Web' 카테고리의 다른 글
| 리액트 라우트 개선 과정 (0) | 2023.07.20 |
|---|---|
| JWT vs 세션 (0) | 2023.07.20 |
| CKEditor5 + 파일 업로드(React + Django) (1) (0) | 2023.07.19 |
