리액트 폴더 구조

리액트를 사용하여 작업을 할 때 수많은 파일들과 기능, 컴포넌트를 관리하는 것은 정말 복잡한 일이다. 그렇기에 폴더 구조를 미리 정해두는 것은 코드의 유지 및 보수에 큰 도움이 된다.

 

최초 생성 디렉토리

 

• node_modules
  • CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
• package.json
  • CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
  • 모든 프로젝트마다 package.json이 하나씩 존재
    
    [ dependencies ]
    • 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능.
    • 실제 코드는 node.modules 폴더에 존재한다.
    
    [ scripts ]
    • start : 프로젝트 development mode(개발 모드) 실행을 위한 명령어.
      → npm run start
    • build : 프로젝트 production mode(배포 모드) 실행을 위한 명령어.
      → 서비스 상용화.
• package-lock.json (or yarn.lock)
  • 프로그래머가 관리할 필요가 없고 npm 이나 yarn이 알아서 관리해주는 파일들
  • lock파일은 해당 프로젝트에 설치한 패키지 , 그 패키지와 관련된 모든 패키지의 버전정보를 포함한다.
•  .gitignore
  • .gitignore 파일에 github에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
  • push를 해도 .gitignore 파일에 작성된 폴더와 파일은 올라가지 않는다.
• public
  • index.html을 포함하고 있다.
  • 가상 DOM을 위한 html파일 (빈 껍데기 파일)
  • <div id="root><div>
• src
  • React의 시작
  • index.js을 포함하고 있다.
  • ReactDOM.render 함수의 인자는 두개이다. 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트, 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치
  • ReactDOM.render(<App />, document.getElementById('root'))
• App.js
  • 현재 화면에 보여지고 있는 초기 컴포넌트
  • React Router를 설치하면 컴포넌트가 최상위 컴포넌트로 App.js 컴포넌트 자리에 위치하게 된다.

---

각 디렉토리 구성

 

• <assets>
  • 서비스에서 사용하는 폰트 정의
• <constants>
  • 서비스에서 사용하는 스타일 상수 정의
  • fonstStyle.constant.ts
  • fontWeight.constant.ts

• <components>
  • 서비스에서 사용하는 컴포넌트 구성요소 정의
  • [screen] - Screen.tsx (Header, Children, Footer)
  • [text] - Text.tsx

• <hooks>
  • [axios] - useSetAxiosInstanceDefaultsAccessToken.ts
  • [screens]
    • [main] - Text.tsx
    • [auth] - Join.tsx / Layout.tsx / Login.tsx / Signup.tsx
    • [common]
  • [services]
    • [auth] - postLogin.service.ts