지금까지 생각없이 기계적으로 코딩하다보니 실력이 점점 늘지 않는 느낌이 들어서 생각이란 걸 해보고자 가장 쉽게 접할 수 있는 create-react-app의 구조부터 까보기로 했다.
CRA(with Typescript) 기본 구조
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
.gitignore
package-lock.json
package.json
README.md
tsconfig.jsonpublic 폴더
React 프로젝트의 Static 파일들(index.html 등)이 저장된 폴더입니다.
favicon.ico: Favicon입니다. Favicon은 아래 사진처럼 브라우저 탭에 나타나는 아이콘입니다.
index.html: 개발한 React 프로젝트를 브라우저에 나타내기 위한 파일입니다.manifest.json: PWA에 필수적으로 포함되어야하는 파일입니다. PWA란 프로그레시브 웹앱(Progressive Web Apps)의 약자이며 웹과 네이티브 앱이 가진 단점을 개선하는 새로운 형태의 웹앱을 의미합니다. 아래는manifest.json에서 사용하는 옵션들입니다.short_name: 사용자 홈 화면에서 아이콘 이름으로 사용합니다.name: 웹앱 설치 배너에 사용합니다.icons: 홈 화면에 추가할때 사용할 이미지입니다. (logo192.png,logo512.png가 여기서 사용됩니다.)start_url: 웹앱 실행시 시작되는 URL 주소입니다.display: 디스플레이 유형(fullscreen,standalone,browser)입니다.theme_color: 상단 툴바의 색상입니다.background_color: 스플래시 화면 배경 색상입니다.orientation: 특정 방향(landscape,portrait)을 강제로 지정합니다.
robots.txt: 웹사이트에 웹 크롤러같은 로봇들의 접근을 제어하기 위한 규약입니다.
src 폴더
App.css:App.tsx안의 컴포넌트들에 대한 CSS 파일입니다.App.tsx: CRA가 제공해주는 기본적인 예제가 들어있는 파일입니다.index.css:index.tsx안의 컴포넌트들에 대한 CSS 파일입니다.index.tsx:App.tsx안의App컴포넌트와public/index.html을 연결해주는 역할을 하는 파일입니다.logo.svg: 기본적인 예제에서 사용되는 React 로고입니다.react-app-env.d.ts: create-react-app으로 시작된 프로젝트와 관련된 TypeScript 타입 선언을 참조합니다. 그리고 이러한 타입 선언은 bmp, gif, jpg, jpg, png, webp 및 svg와 같은 리소스 파일을 가져오는데 대한 지원을 추가합니다.reportWebVitals.ts: React 프로젝트의 성능을 측정하기 위한 파일입니다.setupTests.ts: React 프로젝트에서 테스트를 실행하기 위한 설정 파일입니다.
root
.gitignore: github에 저장되지 않길 원하는 파일을 지정할 수 있는 파일입니다.package-lock.json: 이 파일이 생성되는 시점의 의존성 트리에 대한 정보를 가지고 있는 파일입니다.package.json에서는 패키지의 버전을 범위로 나타내는데, 업데이트된 패키지에서 에러가 발생하는 경우가 있어 안전성을 위해package-lock.json가 필요합니다.package.json: 설치한 패키지들의 정보가 있는 파일입니다.node_modules를 복사하기엔 비효율적이기 때문에package.json에 설치한 패키지들의 정보를 기록하고, 이를 토대로 필요한 패키지들을 다른 사람들이 설치할 수 있습니다.README.md: markdown 문법을 이용하여 프로젝트에 대한 설명을 남길 수 있습니다.tsconfig.json: 타입스크립트 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정합니다.
