React 개발 환경 구축하기

React란 자바스크립트를 기반으로 

페이스북에서 UI 부분을 재사용과 유지보수성을 높이기 위해 만든 자바스크립트 라이브러리입니다.

 

React의 문법을 알아보기 전에 환경을 구축하는 방법을 알아보겠습니다.

 

우선 React를 사용하기 위해서는 create-react-app이라는 프로그램을 설치해야 됩니다.

 

create-react-app이라는 프로그램은 Node.js를 먼저 받아야 합니다.

 

https://nodejs.org/ko/

Node.js

해당 홈페이지로가 자신이 원하는 버전을 받습니다. (저는 최신 버전을 다운로드하였습니다.)

 

프로그램을 별다른 설정 없이 install을 한 뒤 

 

명령 프롬프트 창을 띄웁니다.

 

 

명령 프롬프트창

 

그 후 npm -v 명령어를 실행하여 npm이 잘 설치되어있는지 확인합니다. (npm은 node.js를 설치하면 같이 받아짐)

 

npm 설치 확인

 

다음 npm install -g create-react-app 명령어를 실행하여 create-react-app을 설치합니다.

(-g 옵션은 컴퓨터 내에 어디서든 사용이 가능하게 해 줍니다.)

 

npm을 이용하여 create-react--app 설치

React 공식 홈페이지에서는 npx를 이용하여 다운로드하으라고 되어있는데 

npx는 create-react-app이라는 프로그램을 설치 후 한 번만 실행되고 바로 지워집니다. 사용자가 매번 다시 받아야

된다는 수고스러움이 있지만 계속해서 최신 버전을 받아오기 때문에 공식 홈페이지는 해당 방법을 권장하는 듯합니다.

 

 마지막으로 React를 작업할 폴더를 자신이 원하는 곳에 만들고 cmd의 경로를 해당 폴더로 이동시킵니다.

 

 저는 바탕화면 우클릭하여 react-app이라는 폴더를 만들어 주고 노란 줄 밑줄처럼 경로를 바꿔줬습니다.

 

 그 후 빨간 밑줄처럼 create-react-app . 을 해주면 해당 폴더 안에 아래와 같이 파일들이 생기게 됩니다.

 

 

 여기까지 react가 구동될 수 있게 만든 것이고 react를 사용할 편집기는 밑의 Visual Studio Code를 이용하였습니다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

다운로드한 후 편집기를 실행한 다음 아까 설치한 폴더를 지정하여 Folder Open 후 

터미널에 npm run start라는 명령어를 내리게 되면 React 기본 화면이 출력이 됩니다.