[React] 리액트 환경 세팅

리액트를 배우기전에 환경 세팅 방법을 알아보고 가겠습니다.

우선, Node,js가 필요합니다. 아래 사이트에서 Node.js를 LTS 버전으로 다운해주세요. (최신 버전도 상관은 없지만 우리는 배워가는 입장이기 때문에 안정적인 버전을 이용하는 것을 추천드립니다.)

https://nodejs.org/ko/

Node.js

Node.js를 간략히 설명 드리자면 자바스크립트 런타임으로 이런저런 기능들을 이용할 수 있게 해줍니다. Node.js도 조금 공부를 해서 나중에 다룰수 있다면 좋겠네요.

사실 Node.js는 서버역할을 할 수 있는 런타임이기 때문에 뷰만을 관리하는 리액트와는 큰 상관이 없어보입니다. 하지만, 나중에 서버가 필요한 개발을 할 수도 있고 잠시뒤에 설치할 yarn을 깔기 위한 도구로 npm을 이용하기 위해서 설치하는 것입니다. npm이라는 생소한 단어가 또 등장했는데 npm은 Node.js에 포함되는 패키지 관리 도구입니다.

---

다음으로, yarn을 설치할 차례입니다. yarn은 npm같은 패키지 관리 도구인데, npm보다 더 효율적인 성능을 가진 시스템이므로 yarn을 사용하기로 합니다. 물론 npm을 이용해도 되지만, 여러곳에서 npm보다는 yarn을 이용하고 있기때문에 yarn을 설치해서 이용하도록 하겠습니다. 

window 운영체제를 기준으로 명령 프롬프트(cmd)를 열고 다음과 같이 입력하면 yarn이 설치됩니다.

npm install --global yarn

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

Yarn

---

이제 기본 준비물들은 준비가 끝났으니 리액트 프로젝트를 하나 생성해보겠습니다.

yarn을 이용해서 리액트 프로젝트를 생성하는 방법은 간단합니다.

yarn create react-app 프로젝트명

 

create react-app을 이용하면 리액트 프로젝트에 필요한 다양한 패키지들을 자동으로 구축해주는 명령어입니다. 

잘 설치되었는지 확인하려면 cd로 프로젝트 파일로 이동한뒤 yarn start 명령어를 입력하면 리액트가 구동되면서 웹 페이지가 하나 뜨게됩니다.

---

이렇게 리액트의 기본적인 환경 세팅 방법을 알아봤습니다. 그러면 본격적으로 리액트에 대해서 다음 포스트부터 공부해보겠습니다.