create-react-app

React로 개발 프로젝트를 맨땅에서 시작하려면 웹팩(Webpack), 바벨(Babel) 등 정말 미리 배워야하는 기술들이 한 두개가 아니다. 초보 개발자들이 이러한 선수 기술들을 일일이 학습하다보면 본래 목표했던 React 애플리케이션 개발이 아득하게 멀어지기 일수이다..

React는 각종 개발 편의 도구가 함께 포함된 프레임워크(framework)라기 보다는 어느 프로젝트에서나 추가해서 쓸 수 있는 가벼운 라이브러리(library)에 가깝기 때문에 React를 기반으로 프로젝트를 시작하려고 하면 막막해지는 경우가 많은 것 같다.

과연 이러한 관련 기술을 신경쓰지 않고 React 애플케이션을 바로 개발할 수 있는 방법이 있는데, React를 만든 페이스북(Facebook)에서는 Create React App이라는 CLI(커맨드 라인 인터페이스) 도구를 제공하고 있다. 이 도구를 사용하면 이러한 골치 아픈 문제없이 아주 간단하게 React 프로젝트를 구성할 수 있다.

 

일단 boilerplate 강의에서 백엔드 부분을 이제 막 끝냈으므로 server 폴더를 만들어서 백엔드 부분 파일들을 모두 넣어주자.

그리고 프론트엔드 개발을 위해서 client 폴더를 만들자.

루트 경로에서 방금 만든 client 경로로 이동해서 "npx create-react-app . " 을 입력해주자.

 

 

*NPX 와 NPM의 차이*

NPM(node package manager)은 굉장히 많은 것을 할 수 있는데, 크게 보자면 레지스트리 같은 저장소 역할을 한다.

1. 평소 우리가 무언가를 깔 때 npm install ~~ 이런식으로 dependencies 라이브러리들을 다운로드 받았었는데, dependencies 라이브러리들을 담고 있는 데가 레지스트리 이다. 

2. npm run start나 배포를 할 때도 build를 해서 배포를 해야되는데 이 때도 npm run build를 한다. 이때도 npm을 이용한다. 

 

원래는 create-react-app을 할 때 npm install -g create-react-app 커맨드를 이용해서 로컬 뿐만 아니라 우리 컴퓨터안에 까지 모두 다운받았는데, 이제는 npx를 이용하여 이것을 다운 받지않고 노드 레지스트리에 있는 것을 가져와서 쓸 수가 있게 된다. 

 

이러한 이점에는 우리 머신에다가 다운을 받지 않아도 되니까 disk space를 낭비하지 않을 수 있고, npm 레지스트리에 있는 create-react-app을 찾아서 실행을 시키니까 항상 최신 버전을 사용할 수 있다.