React-CRA + TypeScript의 폴더 구조를 알아보자

mhlog·2023년 4월 15일

React

목록 보기

1/10

사이드 프로젝트를 할 때 create react-app으로 프로젝트를 시작하곤 하는데 최근에 TypeScript를 배우고 나서 React에 TS를 얹어서 프로젝트를 생성하고 나니 src내에 모르는 파일이 너무 많았다... 이참에 폴더 구조를 한번 정리해보려고 한다.

전체적인 폴더 구조

전체적인 폴더 구조는 다음과 같다.

└── node_modules/
└── public/
	├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── robots.txt
└── src/
    ├── App.css
    ├── App.test.tsx
    ├── App.tsx
    ├── index.css
    ├── index.tsx
    ├── logo.svg
    ├── react-app-env.d.ts
    ├── reportWebVitals.ts
    ├── setupTests.ts
└── package.json
└── tsconfig.json
└── .gitignore
└── yarn.lock

1. node_modules

CRA를 설치하면 기본적으로 webpack, babel 등 여러 패키지가 자동으로 추가된다. 이러한 패키지를 모아놓은 곳이 node_modules이다.
보통 .gitignore 파일에 node_modules 폴더명이 적혀있기 때문에 Github 저장소에서는 보이지 않는 것이 특징이다.

2. public

React 프로젝트의 정적(Static) 파일들이 저장된 폴더이다. 여기서 정적 파일이란 이미지, CSS, HTML, JS와 같이 해당 내용이 고정되며, 응답할 때 별도 처리 없이 파일 내용을 그대로 보여주면 되는 파일을 말한다.
React는 직접 Routing을 담당하는 SPA이기 때문에 모든 페이지가 Public 폴더의 index.html로 모여 처리된다.
favicon.ico : 기본적으로 CRA로 프로젝트를 생성하면 브라우저 탭에 나타나는 아이콘이다.
index.html : 브라우저에 나타내는 HTML 파일, 브라우저의 제목 등을 수정할 수 있다.
manifest.json : PWA(Progressive Web Apps)에 필수로 포함돼야하는 파일이다.
- short_name: 사용자 홈 화면에서 아이콘 이름으로 사용한다.
- name: 웹앱 설치 배너에 사용한다.
- icons: 홈 화면에 추가할 때 사용할 이미지, favicon.ico logo192.png 등의 파일이 여기에 사용된다.
- name: 웹앱 설치 배너에 사용한다.
- start_url: 웹앱 실행시 시작되는 주소
- display: 디스플레이 유형(fullscreen, standalone, brower)
- theme_color: 상단 툴바 색상
- background_color: 화면 배경 색상

Progressive Web App란? 웹사이트를 안드로이드/iOS 모바일 앱처럼 사용할 수 있게 만드는 일종의 웹개발 기술이다.

robot.txt: 웹사이트에 웹 크롤러와 같은 로봇들의 접근을 제어하기 위한 규약

3. src

실제 React를 사용하여 개발을 할 때 사용하는 폴더
App.css, index.css: App.tsx, index.tsx안의 컴포넌트들에 대한 CSS파일
App.test.tsx: DOM을 테스트하기 위한 도구. React Testing Library나 JEST등 테스트 라이브러리를 사용한다. TDD(테스트 주도 개발)과 테스트 케이스를 작성할 때 사용
App.tsx: CRA가 제공해주는 기본 예제가 들어있는 파일.
index.tsx: App.tsx에 모인 컴포넌트들을 public/index.html과 연결해주는 파일
logo.svg: App.tsx의 기본 예제에 사용되는 로고 (필요없음)
react-app-env.ts: TypeScript 타입 선언을 참조한다. bmp, gif, jpg, png 등의 리소스 파일 가져오기에 대한 지원을 추가한다. 또한, module.css(scss) 확장자를 가진 css 모듈 가져오기에 대한 지원을 추가한다.
reportWebVitals.ts: React 프로젝트의 성능을 측정하기 위한 파일. index.tsx에 reportWebVistals(console.log) 등으로 사용할 수 있다.
setupTest.ts: React 프로젝트에서 테스트를 실행하기 위한 설정 파일

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

React는 순수 자바스크립트이고, 이 자바스크립트를 이용해 컴포넌트를 만들어간다. 실제로 브라우저가 이해할 수 있는 것은 html, css, JavaScript 뿐이며, 이것들만 이용할 수 있다.
그래서 위의 코드와 같은 식은 바벨을 이용해서 순수 자바스크립트로 변환이 된다! 그리고 나서 우리가 만든 컴포넌트를 html과 연결하는 작업을 해줘야하는데 이것을 해주는 것이 바로 ReactDOM이다. 그래서 사용자에게 궁극적으로 배포되어지는 것은 index.html이다.

index.html 파일을 확인해보면 다음과 같이 id가 root인 div태그가 존재하는 것을 확인할 수 있다.

// index.html
...생략
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

이제 다시 index.tsx를 확인하면 이해가 쉬울 것이다. ReactDOM으로 id가 root인 요소를 가져와서 render함수로 App.tsx의 컴포넌트와 연결을 해주는 것이다 !!

4. root

.gitignore: Github, GitLab 등 레포지토리에 저장되지 않길 원하는 파일을 지정할 수 있다.
package.json: 설치한 패키지들의 정보가 담긴 파일. node_module을 통째로 올리고 복사하는 것은 비효율적이기 때문에 package.json에 설치한 패키지들의 정보를 기록하고 다른 사람이 레포지토리를 통해 설치할 때 이 파일에 근거해 패키지를 설치한다.
yarn.lock: npm으로 설치하면 package-lock.json이 만들어진다. 이 파일이 생성된 시점의 의존성 트리에 대한 정보를 가지고 있다.
tsconfig.json: 타입스크립트를 컴파일하는데 필요한 루트 파일과 컴파일 옵션을 지정하는 파일이다.

느낀점👋 !
그동안 무지성으로 파일들을 삭제했었는데 이제 어떠한 역할을 하는지에 대략적으로 알게 되었으니 좀 더 똑똑하게 지울 수 있게 되었다..ㅎㅎ Testing Library에 사용되는 .test파일들이 흥미로웠다. 어떻게 사용하는지 자세하게 알아봐야겠다.
참고자료
https://sangseophwang.tistory.com/89
https://velog.io/@khw970421/React-%ED%8C%8C%EC%9D%BC%EB%93%A4%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-index.js-App.js-index.html

mhlog

다음 포스트