[React] 프로젝트 생성과 구조

[DrMaemi]

1. 프로젝트 생성

1.1. CRA(Create React App) 방법

공식 홈페이지 https://create-react-app.dev/docs/getting-started/ 에서, React App을 만들기 위해 지원되는 공식적 도구/모듈 이라고 소개하고 있다.

# Run this to use npm
npx create-react-app my-app [--template typescript]
# Or run this to use yarn
yarn create react-app my-app [--template typescript]

npx란.. npm이 패키지들을 저장해두고 버전을 관리하는 매니저라면, npx는 Node Package Executor, 설치한 패키지를 실행(Execute) 하는 런처같은 개념인 듯하다. npm 버전 5.2.0 이상이라면 npm에 내장되어 같이 설치된다.

생성하고 나면 다음과 같은 구조를 가진다.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

1.2. Webpack (수동 생성) - Babel 세팅

여러 개의 나뉜 모듈을 하나로 묶어주는 것을 번들러(Bundler)라고 하는데, 의존성이 있는 것들을 그룹핑을 하는 도구이다. Webpack은 오픈소스 번들러이다. Webpack을 이용해서 리액트 어플리케이션 프로젝트를 생성할 수 있는데, CRA 방식에 비해 번거롭고 잘 사용하지 않는 방법이기 때문에 그냥 용어만 알아두고 넘어갔다. (알아야 할 일이 생길지는 모르겠다.)

2. 프로젝트 구조 분석

2.1. public/

• favicon.ico - 브라우저 탭에 나타나는 아이콘
• index.html (중요) - 브라우저 화면에 나타나는 정보와 코드들이 여기에 담긴다. index.js 로 작성된 js가 담겨 동작하는 html 파일
• 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 - 화면 방향 강제 지정
• robots.txt - 웹 크롤러와 같은 로봇들의 접근을 제어하기 위한 규약

Progressive Web App, PWA 란? HTML, CSS, JS 와 같은 웹 기술로 만든 앱을 말한다. 푸시 알림이나 오프라인 지원 등 네이티브 앱이 제공하는 기능들을 지원할 수 있다. Twitter, Starbucks, Pinterest 등이 PWA를 사용하고 있다.

2.2. src/

• index.js(index.tsx) - index.html에서 동작할 js 파일인데, App.js 파일에서 export 한 App 컴포넌트를 사용한다. 대부분의 경우 index.js 을 수정하지 않고 App.js를 수정하여 개발을 진행한다. (App 컴포넌트를 wrapping 하여 사용하는 Tanstack Query (구 React Query) 등을 개발에 적용하는 경우 수정하는 듯하다.)
• App.js(App.ts) - 리액트 어플리케이션에 사용될 컴포넌트들과 로직들을 담고 있는 최상위 컴포넌트
• index.css - index.js에 참조되는 css 파일
• App.css - App.js에 참조되는 css 파일
• reportWebVitals.js - React 프로젝트 성능을 측정하기 위해 사용되는 파일. index.js에 reportWebVitals(console.log), reportWebVitals(GoogleAnalyticsApi) 등으로 사용 가능
• setupTests.js - 테스트 코드를 실행하기 위한 설정 파일 (테스트 코드 예 - expect(element).toHaveTextContent(/react/i)

3. 이미 작성된 React 프로젝트 clone 후 실행

$ git clone ...
$ cd ${REACT_PROJ_DIR}
$ npm install
$ npm start

A. 참조

• [React] CRA 기본 구조 (#73)
• [React] Typescript (#59)
• [React] package.json 스크립트 (#58)
• React 프로젝트 Clone하여 사용하기, velog.io