[ReactJS] 작업 환경 구축 - create react app

작업 환경 구축 - create react app 

웹팩 설정을 하거나 보일러 플레이트를 사용하는 방법도 있지만

복잡한 설정없이 프로젝트를 만드는데 create react app을 사용하는것이 가장 간단한 방법인 것같다.

create react app은 페이스북 팀에서 만든 앱이고, Redux 개발자가 프로젝트에 참여했다.

create react app의 git 에 들어가면

설치 및 사용방법에 대한 예제가 자세히 나와있다.

npm install -g create-react-app                                                                             
 
create-react-app my-app
cd my-app/
npm start

우선 npm의 글로벌 옵션으로 create-react-app을 설치 해준다.

그리고 create-react-ap '폴더이름'을 입력해주면 바로 설치가 진행된다.

해당 폴더가 만들어지면 프로젝트의 기본 폼이 생성된것이다.

npm으로 이것저것 설치해주고 webpack을 이리저리 설정 하는것보다 너무 간단하다.

폴더가 만들어지면 해당 폴더로 이동 후 npm start를 입력하면 서버가 실행된다.

기본 포트는 3000번으로 열리게 된다.

서버를 동작시킨 후 localhost:3000번으로 접속하면 다음과 같은 화면이 뜬다.

src내부에 App.js 등이 위와같은 화면을 출력하는 것이다.

실제로 프로젝트를 진행할때 src내부에 모든 소스파일을 지우고 시작해도 된다.

 

create reat app의 장점은 다음과 같다.

babel이나 webpack 설정이 자동으로 이루어지며 파일이 저장될때마다 bundle.js를 갱신해준다.

또한 가장 좋은것은 ESLint를 이용해서 어떤 부분에 오류가 발생했는지 잡아준다는 것이다.

처음부터 혼자 설정 했을 때는 이런 오류가 어디에서 발생했는지 못찾아서 많이 고생을 했었다. 

만약 Atom에디터를 사용한다면 ESLint 패키지를 설치하면 상당히 유용하다.

또한 react 문법을 지원하는 react 패키지도 같이 설치해주도록 하자

그리고 react 패키지를 설치 후 설정으로 들어가 Enabled for all javascript files에 체크를 해준다

이는 확장자가 jsx인 파일 외에 js파일까지 지원하도록 설정하는 것이다.

npm install redux react-redux --save                                                                            

추가 모듈을 사용하고 싶다면 해당 폴더에서 npm install을 해주면 된다.

예를들어 redux를 사용하고 싶다면 위와 같이 redux 모듈을 설치 해주면 된다.