이 튜토리얼은 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 부터 먼저 공부하여야 한다.
- package.json과 node_modules가 무엇이고 어떤 관계인지 알고 있다.
- package.json 안에 dependancy와 devDependancy가 무엇인지 알고 있다.
- scss 를 프로젝트에 적용할 수 있다.
- autoprefixer 가 무슨 역할을 하는지 알고 있다.
- HMR (Hot Module Replace) 개발환경이 무엇인지 알고 있다.
- commonJS 문법이 무엇이며 es6에서 어떻게 변화가 된건지 알고 있다.
- .gitignore 의 역할을 알고 있다.
- browserlist 가 무엇인지 알고 있다.
- babel이 무엇인지 알고 있다.
- eslint 가 무엇인지 알고 있다.
break into module