React 프로젝트 생성하는 방법

리액트는 기본적으로 Babel-loader를 사용하는 방법과 typescript-loader를 사용하는 방법이 있다.

그리고 npm이나 yarn 의 패키지 모듈로 설치할 수 있다.

여기서 npm은 자주 접해 익숙하나 yarn은 React를 사용해보며 처음 들어보는 모듈이였다.

간단히 설명하면 yarn은 

npm의 단점을 보안하며 안정적이며 빠르며 보안성이 뛰어나도록 만든 새로운 패키지 매니저이다.

npm install --global yarn 으로 설치를 할 수 있다.

그리고 React Project를 생성하기 위해 create-react-app을 설치해야 한다.

create-react-app을 사용하기 전에는 프로젝트를 만들고 폴더를 생성하고 webpack/babel 등을 설정하고 귀찮았는데 

create-react-app명령어 하나면 Angular Cli처럼 기초 세팅을 다 해준다.

npm install -g create-react-app

yarn add create-react-app

설치를 했으니 프로젝트를 만들면 된다.

create-react-app myProject

나는 기존에 Angular를 사용해 봤으니 typescript 버전으로 생성할 것이다.

create-react-app my-app --scripts-version=react-scripts-ts 

생성을 하게 되면 아래와 같은 폴더들이 생긴다.

ts-loader => tsconfig.json

tslint-loader => tslint.json

밑은 src 폴더 파일들의 설명이다.

+ index.tsx

웹팩에서 메인 엔트리로 지목

루트 컴포넌트를 받아와서 index.html에 들어있는 특정 태그의 

리엑트 컴포넌트의 렌더

이렇게 프로젝트를 생성해봤다.