[React] CRA 시작 파일 정리

CRA (Create React App)으로 프로젝트를 시작하면 우리가 사용하지 않을 파일도 같이 생성된다. 이번에 새 프로젝트를 시작하면서 하나씩 정리해보려고 한다.

 

1. CRA로 프로젝트 생성

// yarn
yarn create react-app debrains-ui

// npm
npx create-react-app debrains-ui

CRA로 프로젝트를 생성하고 나면 아래와 같은 구조를 가지게 된다.

2. 파일 제거

1. public

- favicon.ico: 추후 변경될 때까지 유지

- logo192.png, logo512.png: react 기본 이미지므로 제거

- manifest: 웹앱에 대한 정보를 담고 있는 파일이다. 

- index.html: 사용하고 있는 logo192.png, manifest를 제거하므로 수정이 필요

<!-- 제거 -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

- robots.txt: SEO 관리를 위한 파일, 검색엔진 크롤러들이 엑세스할 수 있는지 막아야 하는지에 대한 설정을 할 수 있음. 

2. src

- App.css: App.js의 스타일

- App.test.js: App.js의 테스트 코드

- index.css: 사용하지 않는 스타일

- logo.svg: 사용하지 않을 파일

- reportWebVitals.js: React의 성능 측정 도구이다. 

- setupTests.js: React Testring library를 사용하기 위한 파일 (테스팅을 하지 않는다면 삭제)

- index.js: 수정이 필요

- App.js: 수정이 필요

3. 변경 후 프로젝트 구조

 

4. 후기

프로젝트 구조에 정답은 없는 것 같다.

본인은 public 폴더 내에 image를 관리하는 반면 public 폴더를 지워서 index.html을 src 폴더에서 관리하는 개발자도 있고, App.js 파일도 이름을 변경해 사용하는 개발자도 있다. 

이후에는 프로젝트 구조 관리를 위한 게시물을 작성하려고 한다.