React 설치하기

메타에서 개발한 오픈 소스 자바스크립트 라이브러리 React 설치 방법에 대해서 알아 보겠습니다.

1. 개발환경 세팅 (Node.js 설치하기)

React가 구동할 수 있는 개발환경  Node.js를 먼저 설치 하도록 하겠습니다.

Node.js는 아래 공식 사이트에서 설치가 가능 합니다.

https://nodejs.org/en/

Node.js

1) 설치 파일을 다운로드 합니다.

버전을 다운로드 하는 웹 페이지 입니다. LST버전 설치하는걸 추천 드립니다.

2) 다운로드 한 파일을 실행 합니다.

Next 버튼을 누릅니다.

"I accept ..." 항목에  체크 후 Next 버튼을 누릅니다.

설치경로를 지정 하고, Next 버튼을 누릅니다.

사용자 정의 셋업 에서는 기본값으로 설치 합니다. Next 버튼을 누릅니다.

c/c++된 컴파일 모듈을 자동으로 설치할 건지 물어보는 창. 설치 안하셔도 됩니다.

Install 버튼을 눌러 설치 합니다.

설치가 완료되었다고 표시하는 창 입니다. Finish 버튼을 눌러서 종료 합니다.

** Node.js 유틸리티 설치하는 부분으로 이부분은 생략해도 됩니다.

Tool for Netive Modules 에서 체크한 사용자에게 표시되는 실행 창으로 설치에 3GiB 여유공간이 필요하고, 중지하려면 창을 닫으면 되며, 계속 진행하려면 아무키나 누르면 됩니다.

Windows PowerShell 도구에서 설치 실행중인 화면

2.  React.js 설치하기

Windows 검색 > CMD 실행

React.js를 사용하기 위해서는 create-react-app이라는 도구를 사용하여 프로젝트를 생성합니다. create-react-app을 설치하려면 명령 프롬프트 또는 터미널에서 다음 명령어를 실행합니다.

npm install -g create-react-app

위 명령어를 실행하면 create-react-app이 전역으로 설치됩니다.

설치 된 화면

3. React.js 프로젝트 생성하기

React.js 프로젝트를 생성하기 위해서는 명령 프롬프트(Windows PowerShell)에서 다음 명령어를 실행하면 됩니다.

npx create-react-app hello

위 명령어를 실행하면 hello라는 이름의 React.js 프로젝트가 생성 됩니다. 프로젝트 이름은 원하는 이름으로 입력하면 됩니다.

프로젝트가 설치 완료 된 화면

4. React.js 애플리케이션 실행하기

실행하려면 명령 프롬프트(Windows PowerShell)에서  다음 명령어를 입력 합니다.

cd hello 
npm start

실행 완료 화면

http://localhost:3000/ 으로 실행한 화면

위 명령어를 실행하면 "webpack compiled successfully" 메세지가 표시되고 3,000번 포트로 웹 페이지에 접속 합니다.

5. 기타 패키지 관리자 도구  yarn 추가

yarn은 npm을 대체할 수 있는 도구로 npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공합니다.

1) NPM으로 설치 

npm install -g yarn

2) 프로젝트 생성 (프로젝트명: hello)

yarn create react-app hello

6. Visual Studio Code 설치 및 확장 프로그램 추가

1) Visual Studio Code 설치

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

2) 확장프로그램 추가

왼쪽 사이트바 Extention 버튼을 눌렀을때 화면

> Prettier-Code formatter : 코드 포맷터 중 하나로, 코드를 일관된 형식으로 정리해주는 도구입니다.

> Reactjs Code Snippets : React 프로젝트를 개발할 때 코드 작성을 효율적으로 도와주는 코드 단편(코드 스니펫)의 모임 입니다.

> ESLint : Javascript 및 TypeScript 프로젝트에서 코드 품질을 향상시키기 위해 코드 스타일, 오류, 버그 등을 감지하고 개발자에게 피드백 제공 합니다.

감사합니다.