[React] 개발환경 구축

React란?

자바스크립트 라이브러리의 한 종류로 UI(User Interface, 사용자 인터페이스) 라이브러리이다.

즉, 화면을 만들기 위한 기능을 모아놓은 것이라 볼 수 있다.

라이브러리란?
자주 사용되는 기능들을 정리해 모아놓은 것

 

React 설치를 위해 npm 또는 npx로 create-react-app을 설치하여 개발환경을 구축해야 한다.

공식문서를 읽어보면 npm보다 npx로 설치할 것을 권장하고 있다. 아래 주소로 들어가보자.

https://github.com/facebook/create-react-app#create-react-app--

GitHub - facebook/create-react-app: Set up a modern web app by running one command.

읽다보면 다음과 같은 내용이 기술되어 있다.

If you've previously installed create-react-app globally via npm install -g create-react-app,
we recommend you uninstall the package using
npm uninstall -g create-react-app
or 
yarn global remove create-react-app 
to ensure that npx always uses the latest version.

 

즉, npm보다 npx를 권장하는 이유는 최신 버전을 사용하는 것을 보장할 수 있기 때문이라고 한다. 

그러나 본 포스팅에서는 npx는 다소 복잡하므로 npm을 통해 개발환경을 구축하고자 한다.

 

우선 npm과 npx의 정의는 다음과 같다.

npm (Node Packaged Manager)이란? 
Node.js 기반으로 만들어진 모듈을 명령어로 설치하고 관리할 수 있는 도구

npx란?
npm의 5.2.0버전부터 새로 추가된 도구로, npm을 편하게 사용하기 위해 npm에서 제공하는 도구

1. npm으로 설치하기

1) Node.js 설치

• 가장 최근버전보다는 안정적인 LTS 버전 설치
• Node.js 를 설치하면 npm이 함께 설치된다.

https://nodejs.org/en/

Node.js

2) cmd 로 npm 버전 확인 및 create-react-app 설치

npm -v // npm 버전확인

npm install -g create-react-app // create-react-app 설치

create-react-app -V // create-react-app 버전확인

2. npx로 설치하기

npx로 create-react-app을 설치하는 방법은 다음과 같다.

npx create-react-app my-app
cd my-app
npm start

3. 개발환경 디렉토리 설정

나의 경우, 바탕화면에 있는 react-app 폴더로 개발환경 디렉토리로 지정하였다.

지정하는 방법은 다음과 같다.

cd C:\Users\Park\Desktop\react-app // 이동
create-react-app . // 해당 디렉토리를 개발환경 디렉토리로 설정하겠다.