ReactJS Create-React-App #
Find similar titles

Structured data

Category: Programming

Create-React-App
1. CRA의 장점
2. CRA의 단점
설치방법
CRA 구조
Reference
Suggested Pages

Create-React-App #

Creat-React-App(CRA)은 메타에서 개발한 보일러 플레이트로 React 프로젝트 개발 초기 세팅에 필요한 여러 가지 라이브러리나 패키지의 설치 및 설정 없이 간편하게 시작할 수 있도록 환경을 제공해준다.

CRA의 장점 #

단 하나의 Build dependency를 가지게 되어 React 프로젝트 구성 시 필요한 Webpack, Babel, ESLint 등 간의 연결에 대해 신경 쓰지 않아도 된다.
위에서 나열한 Webpack, Babel, ESLint는 처음 프로젝트를 구성할 때 반드시 설정이 필요한 패키지들이다. 이를 처음 설정할 때 상당한 시간이 소요될 수 있는데, CRA는 프로젝트에 필요한 필수적인 설정(Configuration)을 대신 해준다.
Autoprefixer를 지원해준다. 일반적인 CSS 코드를 생성하게 되면 자동으로 -webkit-, -ms- 등을 자동으로 적용해준다.

CRA의 단점 #

높은 추상화에 따른 설정 flow를 이해하기 힘들다.
SSR, CSR을 위해 별도의 작업이 필요하다.
패키지(Webpack등)의 코어 부분을 건드려야 할 때 결국 eject를 해야 한다.

설치방법 #

프로젝트 생성
```
npx create-react-app inco-app
cd inco-app
```
기본적으로 npm이 설치되어있어야 하며 npx 사용을 위해 5.2 이상 버전을 권장한다. 터미널 혹은 Editor를 통해 작업 디렉터리에 접근하고 프로젝트명을 포함하여 다음 명령어를 작성한다.
프로그램 실행
```
npm start
```
npm을 이용하여 개발 모드로 프로그램을 실행하는 명령어로, CRA에 기본적으로 설치된 webpack-dev-server 위에 올라가 실행된다. 위 명령은 현재 React 프로젝트(inco-app)의 루트 디렉터리에서 입력되어야 한다.

CRA 구조 #

    inco-app
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── package-lock.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
        ├── reportWebVitals.js
        └── setupTests.js

node_modules #

npm install 명령어를 통해 설치된 패키지들의 모듈이 저장되는 디렉터리이며 해당 모듈들이 의존하는 다른 모듈 전부를 함께 포함하고 있다. 참고로 node_module은 커밋 대상에서 제외해도 된다. package.json에 설치된 패키지들의 정보가 모두 있으므로 npm install을 통해 node_modules를 언제든지 설치할 수 있기 때문이다.

package.json #

생성한 프로젝트의 메타정보와 해당 프로젝트가 의존하고 있는(설치한) 모듈들에 대한 정보들을 json 형태로 모아 버전을 관리할 수 있도록 하는 파일이다. 팀 내에서 같은 개발환경을 구축할 때 이미 작성된 package.json 파일이 있다면, 이를 배포하여 같은 개발환경을 빠르게 구축할 수 있다.

package-lock.json #

package.json에 작성된 의존 모듈에 대한 정보는 특정 버전으로 적히지 않고 범위 적으로 표현되어있는데, 이는 모듈이 업데이트될 때 해당 모듈과 의존된 다른 모듈들의 버전과 충돌이 일어나서 오류를 발생시킬 수 있다. package-lock.json은 이를 해결하기 위한 파일이며 의존성 트리에 대한 정보를 가지고 있다. npm install 시 package.json의 버전이 업데이트되고 동시에 package-lock.json의 버전도 업데이트되면서 의존성 트리가 재생산되어 모두 같은 버전으로 맞춰지기 때문에 오류를 막을 수 있게 된다.

public directory #

React 프로젝트의 Static 파일들이 저장된 디렉터리다.

favicon.ico : 브라우저 탭에 나타나는 아이콘
index.html : 개발한 React 프로젝트를 브라우저에 나타내기 위한 파일
manifest.json : PWA(Progresive Web Apps)에 필수적으로 포함되어야 하는, 앱에 대한 정보를 담고 있는 json 파일
- short_name : 사용자 홈 화면의 아이콘 이름으로 사용
- name : 웹앱 설치 배너에 사용
- icons : 홈 화면에 추가할 때 사용할 이미지
- start_url : 웹앱 실행 시 시작되는 URL 주소
- display : 디스플레이 유형(fullscreen, standalone, browser 중 설정)
- theme_color : 상단 툴바의 색상
- background_color : 스플래시 화면 배경 색상
- orientation : 특정 방향을 강제 지정(landscape, portrait 중 설정)
robots.txt : 웹 크롤러 등의 접근을 제어하기 위한 규약

src directory #

개발이 이루어지는 작업공간으로 js,jsx,css 등의 소스 코드 파일들이 저장된 디렉터리다.

App.css : App.js 안의 컴포넌트들에 대한 css 파일
App.js : CRA가 제공하는 기본 예제가 들어있는 파일
index.css : index.js 안의 컴포넌트들에 대한 css 파일
index.js : App.js 안의 App 컴포넌트와 public/index.html을 연결해주는 역할을 하는 파일
logo.svg : 기본 예제에 사용되는 React logo
reportWebVitals.js : React 프로젝트의 성능을 측정하기 위한 파일
setupTests.js : React 프로젝트에서 테스트를 실행하기 위한 설정 파일

Reference #

Suggested Pages #

0.025 ReactJS/Flux
0.025 BackboneJS
0.025 AngularJS
0.025 JSX
0.013 jQuery
0.013 모델
0.013 컨트롤러
0.013 HTML
0.013 MVVM
0.013 뷰
More suggestions...