TIL1) 리액트 폴더 구조에 대한 학습
오늘은 리액트 프로젝트를 효율적으로 관리하기 위한 폴더 구조 학습함
컴포넌트기반의 라이브러리이기 때문에 폴더 구조를 잘 설계하면 유지보수와 확장성이 더욱 용이하니까. 아래는 내가 보고 생각해본 내용과 몇 가지 유용한 팁
src/
|-- components/
|-- containers/
|-- pages/
|-- layout/
|-- assets/
|-- hooks/
|-- utils/
|-- services/
|-- styles/
|-- App.js
|-- index.js
components/
재사용 가능한 UI 컴포넌트들을 저장합니다.
예: 버튼, 입력 필드, 카드 등
containers/
비즈니스 로직을 포함하고, 여러 컴포넌트를 조합하여 사용하는 컴포넌트를 저장합니다.
예: 데이터 페칭을 포함한 리스트 컴포넌트
pages/
각 라우트에 해당하는 페이지 컴포넌트를 저장합니다.
예: 홈, 로그인, 대시보드 페이지
layout/
페이지의 공통 레이아웃을 정의하는 컴포넌트를 저장합니다.
예: 네비게이션 바, 푸터, 사이드바 등이 포함된 레이아웃 컴포넌트
layout 폴더의 역할
공통 레이아웃 관리: 여러 페이지에서 반복적으로 사용되는 레이아웃을 한 곳에서 관리하여 코드 중복을 줄입니다.
일관성 유지: 사이트 전반에 걸쳐 일관된 사용자 경험을 제공할 수 있습니다.
유연한 레이아웃 변경: 레이아웃을 변경해야 할 경우, 해당 폴더의 컴포넌트만 수정하면 모든 페이지에 변경 사항이 적용됩니다.
assets/
이미지, 폰트, 아이콘 등 정적 파일을 저장합니다.
hooks/
커스텀 훅을 저장합니다.
예: useFetch, useAuth
utils/
유틸리티 함수들을 저장합니다.
예: 날짜 포맷팅 함수, 숫자 변환 함수
services/
API 호출과 관련된 코드를 저장합니다.
예: 사용자 인증 서비스, 데이터 페칭 서비스
styles/
전역 스타일 또는 테마 관련 파일을 저장합니다.
예: 공통 스타일 시트, 테마 파일
TIL2) 폴더 구조의 중요성
유지보수성: 폴더 구조를 잘 설계하면 프로젝트가 커지더라도 코드가 어디에 위치하는지 쉽게 파악할 수 있다.
재사용성: 컴포넌트와 훅을 폴더별로 잘 정리하면 재사용이 용이해진다.
Learned
폴더 구조를 설계하는 것은 프로젝트의 복잡성과 팀의 요구사항에 따라 달라질 수 있습니다. 따라서, 위의 구조는 하나의 예시일 뿐이며, 필요에 따라 유연하게 변경하여 사용하는 것이 중요합니다.
오늘 학습한 내용을 바탕으로 앞으로 리액트 프로젝트를 시작할 때 폴더 구조를 더 신중하게 설계해야겠다고 느낌.
사실, 고래의 레포를 보고 나서 관련 폴더를 계속 보니까 분류를 하면 좋은것도 있고 현재 회사에서는 이렇게 써보니깐,, 나도 그렇게 해보고 싶었다. 그전에, 분류의 기준을 제대로 잡으면 좋겠다 해서 작성해봄.
머리아프다. 자정 안넘길려했는데 또 넘어갔네;;
