[React] 리액트 시작하기 / 초기 생성 파일 정리

[React] WebStorm CRA 및 구성 파일

[React] WebStorm CRA 및 구성 파일

CRA 새 프로젝트를 생성하고 나면 여러 파일들이 생성된다. 리액트 공부 처음 시작했을 때 무슨 파일인지도 모르고 정리하고 싶은 마음에 무작정 지웠다가 수도 없이 뜨는 오류들을 보고 당황한 기억이 있다.

생성된 파일들은 React 앱 실행을 위한 기본 템플릿으로, 기본 환경을 제공하기 위한 것이기 때문에 필요 없는 파일과 주석을 삭제해 깨끗한 프로젝트에서 작업하고자 한다

---

 

초기 생성 파일 정리

초기 파일 구조 

생성된 초기 파일 구조

 

 📂 src 정리 

 📄 App.js  -  수정
 📄 App.css  - 삭제 
 📄 App.test.js  - 삭제 
 📄 logo.svg  - 삭제 
 📄 index.js  - 수정
 📄 index.css  - 삭제 
 📄 reportWebVitals.js  - 유지
 📄 setupTests.js  - 삭제 

 npm start  혹은  yarn start  명령어를 사용해 개발 서버를 켰을 때 보이는 화면을 구성하는 코드는  📄 App.js  와  📄 App.css  에 있다.

개발 서버를 켠 화면

 📄 App.js ,  📄 App.css  초기 파일

개발 서버를 켰을 때 보이는 화면에 빙글빙글 돌아가는 리액트 아이콘과 흰 글씨, Learn React 링크는 아래 코드에 작성되어 있다.
템플릿 초기 생성 코드이기 때문에 전부 지워도 된다.

App.js, App.css 초기 파일

정리 후  App.js 

정리된 App.js

 

 📄 App.js 에서 사용 하고 있던 📄 App.css ,  📄 logo.svg  파일은 아예 삭제했다.

 

 📄 App.test.js  

App 컴포넌트의 테스트 코드를 담당하는 파일이다. 일단 test 할 계획이 없기 때문에 삭제했다.

 📄 index.js  

리액트 시작점인 파일

 📄 index.css  

index.html에 사용되는 css 파일

 📄 reportWebVitals.js  

성능 측정을 위한 웹 바이탈(vitals) 정보(페이지 로드 성능, 응답성 등)를 리포트하는 데 사용

 📄 setupTests.js 

Jest 테스트 프레임워크와 사용되는 테스트 실행 전 설정 파일

---

 📂 public 정리 

 📄 index.html  - 수정
 📄favicon.ico - 유지
 📄 logo192.png  - 유지
 📄 logo512.png  - 삭제
 📄 manifest.json  - 유지
 📄 robots.txt  - 유지

 

 📄 index.html   초기 파일

index.html 초기 파일

초기 파일에서 주석만 삭제했다.

 📄 favicon.ico 

브라우저 탭에 표시되는 아이콘 파일로, 일단 삭제하지 않는다.

브라우저 탭 문서 제목

 📄 index.html  에서  <title>  태그 안에 작성한 글씨가 브라우저 탭에 표시되는 문서 제목이 된다.

 📄 manifest.json  

모바일에서 저장하는 웹 애플리케이션을 만들 때 필요

 📄 robots.txt 

크롤링을 위해 이용되는 파일

---

정리한 파일 구조 

정리한 파일 구조