프로젝트 세팅 - 디렉토리 구조에 대해

새로 생성한 프로젝트가 있는데, 이 디렉토리별 구조와 역할에 대한 정리가 필요해보여서 간단하게 정리!

1. public/

정적 파일(html, 이미지, 파비콘 등)을 두는 폴더. 이 폴더 안의 파일은 빌드 시 가공 없이 그대로 복사되며 이미지나 메타 태그 등 HTML에서 직접 불러와야 할 것들을 저장한다..

 

※ 정적 파일 : 서버에서 처리나 변환 없이 그대로 클라이언트에게 전달되는 파일. 요청할 때 마다 같은 내용이며, 처리시간이 없고(=응답이 빠름), 파일을 그대로 전송한다(=서버 처리 없음).

웹팩이 건들지 안혹, 빌드 후에도 파일명이 그대로이며 직접 url접근이 가능하다. "한번 만들어놓으면 누가 언제 요청해도 같은 내용을 보여주는 변하지 않는 파일"

ex) 로고, 배너, 폰트, 문서, 동영상

 

※ 동적 파일 : 요청마다 변할 수 있으며, 처리 시간이 필요하고(=응답이 느림), 데이터베이스 조회, 계산 등의 서버 처리가 필요하다.

웹팩이 처리하며(압축, 최적화, 해시 등), 빌드 후 파일명이 변경될 수 있으며(ex. logo.a1b2c3.jpg) import를 통해서만 접근 가능하다.

ex) 사용자 프사, 검색 결과, 현재 시간

 

 

2. src/ 

실제 React 애플리케이션 코드가 들어가 있는 핵심 폴더.

• assets/ : 정적 자산(이미지, 폰트, 아이콘, 스타일 등)을 넣는 곳(ex. assets/images, assets/fonts, asstes/icons)
• components/ : 재사용 가능한 UI 컴포넌트들을 저장하는 폴더(ex. button, modal, input, card 등), 작은 단위로 쪼개져서 여러 페이지에서 재사용 가능
• data/ :  정적인 데이터 파일이나 더미(Mock)데이터를 저장(ex. JSON형태의 게시글 목록, 설정 값, 목록 아이템 등)
• functions(혹은 utils/) : 유틸리티 ㅎ마수나 헬퍼 함수들을 정리(ex. 날짜 포맷, 정규식 검사, API응답 처리, formplus와 같은 프로그램 api 등)
• layouts/ : 공통 레이아웃 컴포넌트들을 저장
• pages/ : 라우트에 대응되는 개별 페이지 컴포넌트를 저장. router.tsx와 매핑되는 실제 콘텐츠 화면을 보여줌
• routers/ : 라우터 설정, 경로 상수, 사이트 맵 등 라우팅 관련 파일 저장
  • paths.ts : 모든 경로 문자열을 모아놓은 상수 파일
  • router.tsx: React Router의 설정
  • sitemap.ts: 메뉴, 사이드바, 네비게이션 항목을 위한 경로 정보

3. App.tsx

애플리케이션의 루트 컴포넌트. 전체 구조의 진입점(라우팅, 레이아웃 등 조합)

 

4. index.css

전역 css 설정

 

5. main.tsx

React앱이 실제로 브라우저에 렌더링되는 시작점. ReactDOM.createRoot()로 App을 DOM에 마우트하며,  index.html의 id="root"에 연결된다.

 

✅실제 흐름은?

1. 브라우저는 index.html을 읽고,

2. main.tsx가 실행되어,

3. App.tsx를 통해 전반적인 레이아웃과 라우팅을 구성하고,

4. 라우팅에 따라 pages/안에 있는 컴포넌트가 화면에 보여지고,

5. components/, layouts/, functions/ 등은 그걸 도와주는 구조이다.

 

✅public 내의 파일과 src/assets 내의 파일의 차이점은?

public 폴더의 파일은 "정적 파일"들을, assets폴더에는 모듈 파일 즉 "동적 파일"들을 처리한다. 

public 폴더에 넣을것	src/assets에 넣을 것
🟢 여러 페이지에서 공통 사용(favicon, logo) 🟢 외부에서 직접 접근 필요(sitempap.xml) 🟢 매우 큰 파일 : 동영상, 대용량 이미지 🟢 외부 라이브러리	🟢 특정 컴포넌트에서만 사용하는 것 🟢 최적화가 필요한 파일:  이미지, 아이콘 🟢 개발 중 자주 변경되는 파일 🟢 컴포넌트와 함께 관리하고 싶은 파일