React 작업 환경 설정

오늘은  리액트 라이브러리를 시행하기 위한 도구들을 설치해보도록 하겠다. 

 

Node.js

 

 

 

 

Windows 의 경우엔, https://nodejs.org/ko/에서 좌측에 나타나는 LTS 버전을 설치한다. 

 

macOS / Linux 의 경우엔, nvm 이라는 도구를 사용하여 Node.js 를 설치하면 된다. 

 

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

$ nvm install --lts

 

 

 

Yarn

 

 

 

자바스크립트 세계에서 개발자는 패키지를 공유하고 이를 조립하여 프로젝트를 빌드하는 도구로 패키지 매니저를 사용한다. 전 세계적으로 가장 인기 있는 자바스크립트 패키지 매니저는 npm이다. 이것은 엄청난 양의 패키지(jQuery, Bootstrap, React와 Angular 같은)를 호스팅하고 있다. 그러나 npm이 자바스크립트 커뮤니티에서 많이 사용된다고 하더라도, 단점 역시 존재한다. 이것이 페이스북, Exponent, 구글과 Tilde의 엔지니어 그룹들이 함께 협력하여 npm의 핵심 이슈를 해결하기 위해 새로운 패키지 매니저를 만든 이유이다. 이 새로운 자바스크립트 패키지 매니저가 Yarn이다.

 

 

yarn 설치는 Yarn 공식 홈페이지의 Install Yarn 페이지를 참고하면 된다. 

 

 

VScode

 

 

설치는 VScode 공식 홈페이지에 나와있듯이 운영 체제에 따라서 설치하면 된다. 

 

 

 

VScode 터미널을 이용해 새로운 react 라이브러리 폴더 생성하기

 

 

위의 세가지를 모두 성공적으로 설치했다면 VScode에서 React를 시행할 수 있다. 일단 VScode를 시행하여 터미널을 연다. 그리고 아래와 같이 입력한다. 

 

 

> npx create-react-app begin-react   --> begin-react라는 이름의 폴더를 생성하고 react 라이브버리를 설치한다.

> cd begin-react                           --> 디렉토리의 위치를 바꿔준다. 

 

>code ./                                     --> 현재 위치한 폴더를 VScode에서 열어준다. 

 

 

새롭게  열린 창에서 다시 터미널을 열어 아래 명령어를 입력한다. 

 

 

> yarn start                                 --> 로컬 서버를 이용하여 페이지를 시행하여 브라우저로 띄워준다.

 

 

아래와 같은 화면이 브라우저에 나타날 것이다. 

 

 

이제 여러분은 작은 웹페이지를 서버를 통해 실행시킬 수 있게 되었다~!

 

 

터미널을 클릭한 뒤에 crtl+c를 누르면 localhost를 중지할 수 있다.