004_Create React App 기본 구조에 대해 알아보자!

@CRA

서론

 최근 기업 과제나 프로젝트를 진행하며 Create React App으로 시작하는 경우가 많았다. (아니, 사실 전부 CRA로 시작했다..) 그런데 지금까지는 별 생각없이 예전에 봤던 노마드코더의 강의대로 기본 파일들을 대부분 지워버리고 남는건 App.tsx, Index.tsx 뿐인 상태로 시작했었는데, 문득 이런 생각이 들었다.

   

    '분명 기본적으로 정말 필요한 파일들만 모아 CRA를 만들었을텐데 뭔지도 모른 상태에서 너무 무지성으로 삭제한건 아닐까? '

 

 그래서 준비했다! 지우더라도 최소한 뭔지 알고 필요한지 아닌지를 판단할 수 있도록 이번 포스팅을 작성해보기로 했다. 리액트를 좀 더 리액트스럽게 쓰기 위한 기초를 이번에 제대로 배워보자.

 

설치 방법 + 기본 구조

 

 혹시 모르니 설치 방법을 간단히 설명하자면, 두가지 방법이 있는데 npx를 이용하는 방법과 yarn을 이용하는 방법이다.

npx create-react-app 프로젝트명 (--template typescript)

yarn create react-app 프로젝트명 (--template typescript)

 

두가지 설치 방법 중 개인적으로는 yarn을 선호하는데 그 이유는 다음과 같다.

1. yarn은 병렬 설치(Parallel Installation)로 npm보다 설치 속도가 빠르다.
- npm은 여러 패키지를 설치할 때 순차적으로 진행하지만 yarn은 동시에 여러 패키지를 설치한다.
NPM  — 3.572 seconds
YARN — 1.44 seconds

2. yarn은 보안에 좀 더 강하다.
- npm은 다른 패키지를 즉시 포함시킬 수 있는 코드를 자동으로 실행해 보안에 취약성이 있다.
- 반면 yarn은 버전을 어디에서나 같게 만들어 버그를 줄임으로써 보안을 높였다.

라고 했지만 npm, yarn 둘 다 지속적으로 업데이트를 하며 성능이 비슷하다고 하니 본인에게 익숙한 패키지 매니저를 사용하면 될 것 같다!

 

 이제 본격적으로 CRA의 구조에 대해 알아보자. 설명은 '폴더 > 파일' 순으로 진행하고자 한다.

 기본 디렉토리 구조

 1. node_modules 

• CRA를 설치하면 기본적으로 babel, webpack 등 여러 패키지가 자동으로 설치된다. 
• 이러한 패키지를 모아둔 곳이 node_modules 이다.
• 위 사진에서 보면 node_modules 폴더 이름 색이 좀 더 어두운데, 이는 .gitignore 파일에 node_modules 폴더명이 적혀있어서이며 'node_modules 파일은 Github과 같은 저장소에 올릴 때 제외해주세요' 라는 뜻에서 다음과 같이 표현된 것이다.

 2. Public 

• React 프로젝트의 정적(Static) 파일들이 저장된 폴더이다.

Static File: 이미지, CSS, HTML, JS와 같이 해당 내용이 고정되어, 응답할 때 별도 처리 없이 파일 내용을 그대로 보여주면 되는 파일.

• 리액트는 SPA(Single Page Application) 이기 때문에 모든 페이지가 Public 폴더의 index.html로 모여 처리된다.
•  favicon.ico : 브라우저 탭에 나타나는 아이콘이다. 
•  index.html : 브라우저에 나타내는 HTML 파일. <title>, <meta description> 등 CRA 기본 내용을 수정해주자.

•  manifest.json : PWA(Progressive Web Apps)에 필수로 포함돼야하는 파일.
  •  short_name : 사용자 홈 화면에서 아이콘 이름으로 사용한다.
  •  name : 웹앱 설치 배너에 사용한다.
  •  icons : 홈 화면에 추가할 때 사용할 이미지. favicon.ico, logo192.png 등의 파일이 여기에 사용된다.
  •  start_url : 웹앱 실행시 시작되는 URL 주소.
  •  display : 디스플레이 유형 (fullscreen, standalone, browser)
  •  theme_color : 상단 툴바 색상.
  •  background_color : 화면 배경 색상.
  •  orientation : 화면 방향 (landscape, portrait) 강제 지정 가능.

Progressive Web App : HTML, CSS, JS와 같은 웹 기술로 만든 앱. 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징들을 전부 제공하는 등 앱과 유사하게 만들 수 있다. Twitter, Starbucks, Pinterest 등이 PWA를 사용하고 있다.

 

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

 3. src 

• 우리가 실질적으로 작업하는 공간. 
•  App.css, index.css : App.tsx, Index.tsx 안의 컴포넌트들에 대한 CSS 파일. scss를 사용할거면 확장자를 .scss로 변경해 사용해준다.
•  App.test.tsx : DOM을 테스트하기 위한 도구. React Testing Library나 Jest 등 테스트 라이브러리를 사용한다. 
•  App.tsx : CRA가 제공해주는 기본 예제가 들어있는 파일. 내부 컴포넌트들을 과감히 삭제해주자.
•  index.tsx : App.tsx에 모인 컴포넌트들을 public/index.html과 연결해주는 파일.
•  logo.svg : App.tsx의 기본 예제에 사용되는 React 로고. 과감히 삭제해주자.
•  react-app-env.d.ts : TypeScript 타입 선언을 참조한다. bmp, gif, jpeg, jpg, png 등의 리소스 파일 가져오기에 대한 지원을 추가한다. 또한 .module.css, .module.scss 확장자를 가진 CSS 모듈 가져오기에 대한 지원을 추가한다.
•  reportWebVitals.ts :  React 프로젝트의 성능을 측정하기 위한 파일. index.tsx에 'reportWebVitals(console.log)', 'reportWebVitals( 구글 애널리틱스로 보내는 함수 )' 등으로 사용할 수 있다.
•  setupTests.ts : React 프로젝트에서 테스트를 실행하기 위한 설정 파일. 

 4. root  

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

 

지금까지 CRA에서 제공하는 폴더와 파일들의 역할에 대해 알아보았으니, 이제 파일 내부 코드들을 살펴보도록 하겠다.

 

 1. index.html 

• 파비콘, viewport, PWA를 위한 manifest.json, logo, title, description, 그리고 root id를 가진 div 태그가 있다.
• 브라우저 상단의 아이콘을 수정하려면 favicon.ico 파일을, 아이콘 옆 타이틀을 수정하기 위해서는 <title> 태그를, 구글 등 검색 플랫폼에서 배포될 사이트의 설명을 수정하려면 <meta> 태그의 description > content를 수정하면 된다.

 2. robots.txt 

• 반드시 폴더명 맨 끝에 /를 붙여야 한다. 붙이지 않으면 확장자가 없는 파일로 인식하기 때문에 제대로 작동하지 않는다.
  특정 디렉토리의 접근을 허가하려면

User-agent: 제어할 로봇의 User-Agent Allow: /foo/bar/

• 특정 디렉토리의 접근을 차단하려면

User-agent: 제어할 로봇의 User-Agent Disallow: /foo/bar/

• 모든 문서에 대해 접근을 허가하려면 (사실상 의미는 없다.)

User-agent: * Allow: /

• 모든 문서에 대해 접근을 차단하려면

User-agent: * Disallow: /

• 모든 문서에 대해 접근을 차단하고, 첫 페이지에 대해서만 허가하려면

User-agent: * Disallow: / Allow : /$

 

 3. index.tsx 

• index.tsx에서 주목해볼 요소는 <React.StrictMode> 이다.
• <React.StrictMode>는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. strict mode는 개발 중에만 적용되며, 배포가 되면 strict mode는 저절로 작동하지 않는다.
• <React.StrictMode>는 내부 구성 요소가 권장 사항 중 일부 방법을 따르고 있는지 확인하고 콘솔에 없는 경우 경고한다. 또한 사용되지 않는 메서드가 사용되고 있지 않은지 확인하고, 엄격한 모드를 사용하면 콘솔에서 경고한다. 마지막으로 잠재적인 위험을 식별하여 부작용을 예방할 수 있도록 도와준다. 이 과정에서 경고를 위해 두번 렌더링을 하게 된다.

 4. react-app-env.d.ts 

• JavaScript의 import와 비슷한 용법이라고 한다. node_modules의 react-scripts라는 dependency를 불러와서 사용한다는 의미이다.

• /node_modules/react-scripts 코드를 보면 react, node, react-dom, jpg, png, svg, .module.scss 등 모듈에 대한 타입이 적혀있는 것을 볼 수 있다.
• 이 외의 모듈을 사용하려면 react-app-env.d.ts에 추가해주면 된다.

결론

 이렇게 CRA의 구조 및 기본으로 제공하는 파일들의 코드에 대해 간략히 살펴봤다. 모든 파일들을 다루진 않았지만 그래도 이렇게 알아보면서 CRA에서 제공하는 파일들이 기본적으로 하는 역할과 왜 이렇게 구성했는지에 대해 이해할 수 있었다. 다음 프로젝트부터는 무작정 삭제했던 파일들을 좀 더 활용할 수 있도록 테스팅 방법이나 PWA 등에 대해 학습해봐야겠다. 

 

 

 

출처

https://velog.io/@swanious/TIL-.d.ts%ED%8C%8C%EC%9D%BC%EC%97%90%EC%84%9C-reference-typesreact-scripts%EC%9D%B4-%EB%AD%98%EA%B9%8C

https://velog.io/@ordidxzero/cra-project-structure

https://namu.wiki/w/robots.txt

https://create-react-app.dev/docs/measuring-performance/