React.js 설치방법 ( Node.js 포함)

검은바탕이 진리

 

리액트를 통해 개발을 하기 위해서는 까다로운 설치과정을 거쳐야 한다.

1. Node.js 설치

먼저, Node.js를 설치해준다.

https://nodejs.org/ko/

Node.js

 

2021/07/26 현재 기준의 node.js 다운로드 페이지의 모습

node.js 다운로드 페이지가 들어가면 해당 화면이 나온다.

LTS란 Long Term Support의 준말이다. 즉, 오랜기간 동안 해당 버전의 기능들을 지원한다는 뜻이다.

반대로 현재 버전(최신 기능)은 아직 개발중인 단계인 버전을 뜻한다. 이 개발 중인 버전을 통해 코드를 작성할 경우, 해당 버전이 패치를 통해 버전업이 되면서 기능이 변경되거나 사라질 수 있는 가능성을 가지고 있다. 이로인해 현재 버전을 통해 개발을 진행할 경우, 기능이 사라져 소스코드를 재수정해야하는 일이 벌어질 수도 있다.

 

그렇기에 안정적으로 LTS버전을 사용하는 것을 추천한다.

 

2. Node.js 버전 확인

설치가 완료된 거 터미널을 연 후, node -v 라는 명령어를 입력

node.js 버전

설치가 정상적으로 된 경우 node.js버전을 확인할 수 있다.

 

3. 패키지 매니저 확인

node.js에는 패키지 매니저가 존재한다.

Java의 Maven, Gradle, Python의 pip, PHP의 composer와 같이 관련 패키지들을 쉽게 설치하고 삭제하는 작업르 도와주는 것을 뜻한다. node.js에는 npm과 yarn이라는 패키지 매니저가 있다.

 

npm.js

npm은 node.js를 설치할 경우, 기본적으로 설치되는 패키지 매니저이다.

 

https://classic.yarnpkg.com/en/docs/install#mac-stable

Yarn

또 다른, 패키지 매니저 yarn이 있다. yarn은 공식문서의 순서에 따라 설치를 진행하면 된다.

 

 

4. React프로젝트 생성

리액트 프로젝트를 생성하고자 할 폴더로 이동한다.

해당 폴더의 터미널에 npx create-react-app 프로젝트명을 입력해준다.

프로젝트명이 test-project일 경우.

npx create-react-app test-project

명령프롬포트에 입력하면 약 30초 ~ 1분 가량 설치가 진행된다.

 

관련 패키지들이 설치되는 모습

 

설치가 완료되면 해당 화면이 cmd창에 나타나게 된다.

5. React실행하기

설치가 완료되면 node_modules, package.json 등의 파일이 설치된다.

npm start
yarn start

 

설치가 완료되면, npm start, yarn start로 node서버를 실행시켜 리액트 프로젝트를 띄울 수 있다.

 

localhost:3000

localhost:3000에 서버가 띄워진 것을 확인할 수 있다.