<div id="readability-page-1" class="page"><div>우리가 웹사이트를 만들기 위해 필요한 것들을 하나씩 설치할 수 있지만, 이미 필요한 것들을 모아놓은 패키지를 이용하면 손쉬울 것이다.
이게 바로 CRA(Create React App)이다. CRA를 이용한 프로젝트 생성을 진행하기 위해서는 node 및 npm 설치가 되어 있어야 한다. (이 포스팅에서는 이 내용은 생략하고, node와 npm이 설치되어 있다고 전제하겠다.) 그럼 npm을 이용해 npx를 설치해보자. 대부분 많이 쓰는 <code>npm install -g create-react-app</code> 을 사용 하지 않는 이유는, -g 를 통해 전역적으로 create-react-app 가 설치됨으로서 여러 문제점을 야기한다. <ul><li>CRA의 무거운 의존성 라이브러리들이 로컬에 남음 <ul><li>앞서 소개했듯 필요한 것들을 모아놓은 패키지이기 때문에 많은 의존성 라이브러리들이 있음 </li></ul></li><li>CRA 버전 업데이트 시, 전역으로 설치된 CRA를 재설치 해야함</li></ul>반대로 npx를 이용하면, <ul><li>최신 CPA 패키지가 다운로드가 되고, 설정들을 세팅한 후에 CRA 패키지는 제거됨 </li><li>무거운 의존성 라이브러리들도 남지 않고, 함께 제거되는 장점 </li></ul>그럼 npx로 CRA를 이용해 프로젝트를 생성해보자. <div data-language="shell"><pre><code>$&gt; npx create-react-app [프로젝트 이름] 
$&gt; npx create-react-app sample-project </code></pre></div>프로젝트는 바로 실행해 볼 수 있다. 
생성한 프로젝트 이름의 폴더로 이동해서 npm run start를 실행한다. <div data-language="shell"><pre><code>$&gt; cd sample-project
sample-project $&gt; npm run start</code></pre></div>실행이 완료되면 http://localhost:3000/ 과 같이 접속가능한 url을 터미널에 보여준다. 접속해 보면 이렇게 리액트 로고와 함께 페이지가 열린다. <img src="https://baek.dev/assets/images/post/2022/2022_042_001.png" alt="CRA"> </div>쿠팡 파트너스 활동을 통해 일정액의 커미션을 제공받을 수 있습니다.</div>

아웃풋 트레이닝

BAEKDEV

우리가 웹사이트를 만들기 위해 필요한 것들을 하나씩 설치할 수 있지만, 이미 필요한 것들을 모아놓은 패키지를 이용하면 손쉬울 것이다.
이게 바로 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   
프로젝트는 바로 실행해 볼 수 있다.
$> cd sample-project
sample-project $> npm run start
실행이 완료되면 http://localhost:3000/ 과 같이 접속가능한 url을 터미널에 보여준다. 접속해 보면 이렇게 리액트 로고와 함께 페이지가 열린다.

리액트 프로젝트 생성하기 / Create React App with npx

댓글