꿈꾸는 개발자 박혜웅

React 개발환경

1. React?

React는 자바스크립트 라이브러리로 오직 View만 신경쓰는 라이브러리 입니다.

React는 DOM을 복사해서 Virtual DOM을 사용합니다.

변화가 생겼을 때 페이지 전체를 렌더링 하지않고, 변화한 부분만 실제 DOM에 적용하는 방식을 사용합니다. 

2. 개발 환경

1) Node.js / npm 설치

Babel, Webpack등을 사용하기 위해 NodeJS와 npm 설치가 필요합니다.

아래 URL에서 다운 가능합니다.

https://nodejs.org/ko/download/

설치를 완료하고 node -v 명령과 npm-v 명령으로 

노드와 npm 버전 확인이 가능합니다.

2) yarn 설치

npm은 의존하는 라이브러리 개수가 많으면 속도가 매우 저하 되기때문에 yarn 도구도 설치해줍니다.

아래 URL에서 windows용 다운 가능합니다.

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

yarn 역시 yarn -v명령으로 버전확인이 가능합니다.

해당 명령이 실행되지 않을 경우

yarn이 설치되어있는 경로 \bin폴더 까지 환경변수를 잡아주시면 됩니다.

3) VSCODE 설치

Visual Studio Code는 에디터 이지만, 

javascript 외에도 확장 프로그램을 설치하면 

C, Java, Spring boot 등 다양한 언어도 사용 가능해서 간편합니다.

아래 URL에서 설치 다운 가능 합니다.

https://code.visualstudio.com/download

3. 테스트 프로젝트 생성

1) create-react-app 도구 설치

npm, yarn 도구 둘다 설치 가능합니다.

저는 yarn을 이용해서 전역으로  설치했습니다.

터미널에 다음과 같이 입력해서 설치합니다.

> yarn global add create-react-app

2) 프로젝트 생성

create-react-app 도구를 이용해서 프로젝트를 생성합니다.

터미널에 다음과 같이 입력해서 설치합니다.

> create-react-app 프로젝트 명

프로젝트명으로 대문자는 사용이 불가합니다.

작업 환경에 따라서 1분~3분정도 소요됩니다.

3) 로컬 서버 실행

프로젝트가 생성되었으면, 해당 프로젝트로 이동 후

터미널창에 아래와 같이 입력하면 빌드후 로컬 서버가 실행됩니다.

로컬서버는 기본으로 3000번으로 열립니다.

파일이 수정될때마다 자동으로 다시 빌드하고 페이지를 리로드합니다.

> yarn start

참고 : 리액트를 다루는 기술(저:VELOPERT)