[React Basic] 리액트 프로젝트 생성하기. 그런데 이제 npx를 곁들인

우리가 웹사이트를 만들기 위해 필요한 것들을 하나씩 설치할 수 있지만, 이미 필요한 것들을 모아놓은 패키지를 이용하면 손쉬울 것이다. 이게 바로 CRA(Create React App)이다.

CRA를 이용한 프로젝트 생성을 진행하기 위해서는 node 및 npm 설치가 되어 있어야 한다. (이 포스팅에서는 이 내용은 생략하고, node와 npm이 설치되어 있다고 전제하겠다.) 그럼 npm을 이용해 npx를 설치해보자.

$> npm install -g npx  

대부분 많이 쓰는 npm install -g create-react-app 을 사용 하지 않는 이유는, -g 를 통해 전역적으로 create-react-app 가 설치됨으로서 여러 문제점을 야기한다.

• CRA의 무거운 의존성 라이브러리들이 로컬에 남음
  • 앞서 소개했듯 필요한 것들을 모아놓은 패키지이기 때문에 많은 의존성 라이브러리들이 있음
• CRA 버전 업데이트 시, 전역으로 설치된 CRA를 재설치 해야함

반대로 npx를 이용하면,

• 최신 CPA 패키지가 다운로드가 되고, 설정들을 세팅한 후에 CRA 패키지는 제거됨
• 무거운 의존성 라이브러리들도 남지 않고, 함께 제거되는 장점

그럼 npx로 CRA를 이용해 프로젝트를 생성해보자.

$> npx create-react-app [프로젝트 이름]    
$> npx create-react-app sample-project   

프로젝트는 바로 실행해 볼 수 있다.
생성한 프로젝트 이름의 폴더로 이동해서 npm run start를 실행한다.

$> cd sample-project
sample-project $> npm run start

실행이 완료되면 http://localhost:3000/ 과 같이 접속가능한 url을 터미널에 보여준다. 접속해 보면 이렇게 리액트 로고와 함께 페이지가 열린다.