본문 바로가기

Front-End/React

React {02 환경 설치}

Node.js 환경에서 React 설치는 너무 쉬워 그냥 넘어가려고 했는데..

입문자를 위한 글이라 짧게 짚고 넘어 갑니다.

모던한 개발(?)이라 하면 대세가 된 Node.js (서버사이드 자바스크립트)를 말하는 듯 합니다.

IE, 크롬, 파이어폭스 등의 브라우저(클라이언트)에서 동작하던 Javascript가 이젠 

Node.js를 PC에 설치하고 내 PC를 서버로 만들 수 있게 된 것이죠.

아닥하고 설치해보죠.

 

하나,

막강한 무료 IDE 에디터 Visual Studio Code (이하 vscode라 칭할께요) 설치

다운로드 code.visualstudio.com 후에 설치합니다.

 

두울,

Node.js 설치

LTS 버전 다운로드 nodejs.org/ko/ 후에 설치합니다. 

설치 후엔 윈도우 명령창(command) 또는 vscode 에디터를 열고 Ctrl+` 단축키로 터미널을 열고 아래 명령 실행

> node  -v
> V10.xx.x    <------- 와 같이 Node 버전이 출력되면 설치 완료

Node.js 를 설치하면 명령창에서 npm (Node Package Manager)이란 명령어로 관련 팩키지 설치가 가능한데

npm은 Node.js가 제공하는 기본 패키지매니저이고 npm 외에 yarn 이란 녀석도 많이 쓰이는 추세입니다.

yarn 공식 사이트에서 다운로드 받아 설치해 놓는 것을 추천합니다. (npm도 쓰고 yarn도 쓰고~)

 

세엣,

이제 React 라이브러리를 설치합니다.

임의의 폴더(ex: myapp)를 만들고 해당 폴더로 이동 > cd myapp 후 아래 명령으로 react 설치

myapp> npm create-react-app .

*npm 이란 관리기능으로 React 패키지를 설치하게 되는 것이죠.

yarn 으로 설치할 경우,

myapp> yarn create react-app .

 

네엣,

설치가 완료되면 아래 명령으로 개발 서버 실행

myapp> npm start

yarn으로 시작할 경우,

myapp> yarn start

 

잠깐 기다리면 내 PC의 기본 브라우저가 실행되면서 React 로고가 보이는 데모 페이지가 보입니다.

 

 

끄읏!

 

다음 글에서 만나요.

'Front-End > React' 카테고리의 다른 글

React - { 단순하게 보는 props 사용 흐름 }  (0) 2020.11.03
React {01 개념찾기}  (0) 2020.10.24