React.js #리액트 시작

※ 『리액트를 다루는 기술』을 읽고 공부한 과정을 기록합니다. 

 

---

1장 리액트 시작

---

React.js

리액트는 자바스크립트 라이브러리로 유저 인터페이스를 만드는 데 사용합니다. 오직 V(View)만 신경 쓰는 라이브러리이며 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것에 있습니다. 리액트 매뉴얼에는 다음 문장이 있습니다.

지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기

 

리액트는 뷰만 신경 쓰는 라이브러리이므로 기타 기능은 직접 구현하여 사용해야 합니다. 책에서는 코드 에디터 설치 후 git bash를 설치하지만 버전확인 순서를 위하여 git bash를 먼저 다운로드한 후 진행하였습니다.

실습환경 : Windows 10 Home / Node.js v8.11.1 / yarn 1.17.3 / VS Code 2017 / javascript ES6
설치순서 : Git 설치 → Node.js / npm, yarn 설치 → 코드 에디터 설치 → create-react-app으로 프로젝트 생성

 

git

Git 공식 내려받기 사이트에서 Windows용으로 다운로드 합니다. bash 에뮬레이터도 함께 설치하여 이제 cmd 창이 아닌 bash 에뮬레이터로 사용합니다. (터미널에서 사용할 명령어를 maxOS, 리눅스에서 사용하는 명령어와 통일하기 위함)

 

☞ git 설치 https://git-scm.com/downloads

 

Node.js / npm

리액트 프로젝트를 만들 때는 node.js와 npm을 반드시 설치해야 합니다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 node.js와 직접적인 연관은 없지만 프로젝트를 개발하는 데 필요한 주요 도구들이 node.js를 사용하기 때문에 설치하는 것입니다.

 

npm은 node.js 패키지 매니저로 수 많은 개발자가 만든 모듈을 설치하고 해당 모듈 버전을 관리하는 도구입니다. 리액트 역시 하나의 모듈입니다.

 

☞ node.js 설치 https://nodejs.org/en/download/

Download | Node.js

☞ node.js 버전확인

git bash > $ node --version

 

yarn

node.js와 함께 설치한 npm은 패키지를 설치하고 관리할 때 사용하면 되는데, 책에서는 npm 대신 yarn 패키지 관리자 도구를 설치하여 사용하기 때문에 실습환경을 동일하게 진행하고자 yarn을 설치하였습니다. yarn을 사용하면 패키지를 훨씬 빠르게 설치할 수 있습니다.

 

☞ yarn 설치 https://yarnpkg.com/en/docs/install#windows-stable

Yarn

☞ yarn 버전확인

git bash > $ yarn --version

 

코드 에디터 설치

가벼운 토이 프로젝트에는 브라켓을 주로 쓰는 편이지만 책의 가이드를 따라가기 위하여 Visual Studio Code를 사용합니다. 2017년 버전으로 설치하였습니다.

 

☞ VS Code 설치 https://visualstudio.microsoft.com/ko/?rr=https%3A%2F%2Fwww.google.com%2F

Visual Studio IDE, 코드 편집기, Azure DevOps 및 App Center - Visual Studio

☞ VS Code 확장 프로그램 설치

책에 적힌 확장 프로그램명이 일치하는 것이 없어 유사한 기능을 구현하는 것들로 대체하였습니다.

ESLint(자바스크립트 문법 체크) → VisualLinter 로 대체 / Reactjs code snippets(리액트 관련 스니펫 모음) → React Code Snippets 로 대체

 

프로젝트 생성

리액트 입문자에게 node.js 기반의 개발 도구로 webpack, 바벨 등을 사용하는 것은 시간 투자가 많이 됩니다. 따라서 초반에는 복잡하게 설정하는 부분을 모두 생략하고, 바로 리액트 프로젝트를 만들 수 있는 create-react-app 도구를 사용합니다.

 

create-react-app 도구는 npm 또는 yarn으로 설치할 수 있습니다. 패키지 설치 방법은 두 가지로 첫 번째는 지역적(local)으로 설치하는 것이고, 두 번째는 전역적(global)으로 설치하는 것입니다. 둘의 차이는 프로젝트 디렉터리에서만 사용하느냐, 아니면 모든 디렉터리에서 사용하느냐 차이라고 책에서 설명합니다. create-react-app는 커맨더라인(명령 프롬프트같은) 도구라 모든 디렉터리에서 필요하므로 적역적으로 설치합니다.

 

☞ create-react-app 패키지 전역적 설치방법 두 가지

1. git bash > $ yarn global add create-react-app

2. git bash > $ npm install -g create-react-app

 

☞ 프로젝트 생성

git bash > $ create-react-app hello-react

설치가 완료되면 마지막에 이런 문구가 뜬다. Happy hacking!

 

☞ 프로젝트 서버 실행

경로이동 : git bash > $ cd hello-react

서버실행 : git bash > $ yarn start

 

☞ 웹브라우저 확인 : http://localhost:3000/

 

---

리액트 공부 준비 끝

---