create-react-app CLI 방식으로 전환

이 튜토리얼은 create-react-app 이라는 react에서 만든 CLI 로 구성된 모듈 방식으로 개발하는 단계입니다.

먼저 npm이라는 node package manager와 webpack 이라는 모듈번들러를 살펴보겠습니다.

그리고 git 사용법에 대해서 살펴봅니다.

CDN 링크 페이지 방식에서 npm, webpack 기반 create–react-app 과 같은 모듈 방식 개발을 하기 위해서 먼저 설치되어야 할 툴이 있다. node 는 npm 을 사용하기 위해서 반드시 먼저 설치되어야 하는 프로그램이다. 커맨드창에서 node -v 로 확인후 8.10.x 이상 노드가 설치되어있지 않다면 먼저 node 부터 설치해야 한다. 그리고, git도 필수이기 때문에 git도 설치되어있지 않다면 먼저 설치해주자.

node와 git 이 설치되었다면 아래 명령어로 모듈 방식 react 프로젝트를 생성한다. npx는 create-react-app을 global로 설치하지 않고 실행하게 해주는 유틸리티이다. create-react-app의 버전관리를 하지 않아도 된다는 장점이 있다. scoreboard는 프로젝트 이름이다.

생성이 되었다면 해당 프로젝트로 이동후 실행해본다.

생성된 프로젝트를 열어보자.

create-react-app 으로 생성된 프로젝트는 최신 프런트엔드 기술이 모두 반영된 결과물이라 페이지방식으로 개발하다가 이런 프로젝트를 처음하게 되면 react 보다 더 생소하게 느껴질것이다.

최신 프런트엔드 기술에 관한 아래 9가지 질문에 대해서 잘 모르겠다면 최신프런트엔드 – 모듈화와 webpack 부터 먼저 공부하여야 한다.

1. package.json과 node_modules가 무엇이고 어떤 관계인지 알고 있다.
2. package.json 안에 dependancy와 devDependancy가 무엇인지 알고 있다.
3. scss 를 프로젝트에 적용할 수 있다.
4. autoprefixer 가 무슨 역할을 하는지 알고 있다.
5. HMR (Hot Module Replace) 개발환경이 무엇인지 알고 있다.
6. commonJS 문법이 무엇이며 es6에서 어떻게 변화가 된건지 알고 있다.
7. .gitignore 의 역할을 알고 있다.
8. browserlist 가 무엇인지 알고 있다.
9. babel이 무엇인지 알고 있다.
10. eslint 가 무엇인지 알고 있다.