사부작사부작해요

환경 구성 본문

리액트

환경 구성

sabujaky 2021. 7. 8. 01:29

리액트 프로젝트를 만들기 위해 Windows10에서 Node.js, yarn을 설치한다.

추가적으로, VS Code의 확장 프로그램을 설치한다.

1. Node.js 설치

Node.js는 웹 브라우저 환경이 아닌 곳에서도 자바스크립트로 연산할 수 있도록 한다.

리액트 프로젝트 개발과 연관된 도구들이 Node.js를 사용하기 때문에 설치한다.

Installer 다운로드 및 Node.js 설치

Node.js Windows installer를 다운로드받아 설치한다. 나는 최신 LTS 버전인 14.17.3을 다운로드 받았다.

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

 

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

다운로드 완료 후 installer를 실행하여 Node.js를 설치한다.

설치 확인

터미널에서 설치 여부를 확인한다.

설치된 Node.js 버전 확인함

2. yarn 설치

Node.js를 설치하면 패키지 관리 도구인 npm이 함께 설치되지만, 편의성을 위해 yarn을 추가로 설치한다.

yarn은 npm과 같은 패키지 관리자 도구로 npm보다 더 빠르고, 효율적인 캐시 시스템 및 기타 기능을 제공한다. 

yarn 설치

npm을 사용해 yarn을 설치한다[각주:1].

이와 같은 방법으로 2.0 버전 이하의 yarn을 설치하며, Stable 버전이다.

다음 명령어를 터미널에 입력한다.

npm install --global yarn

yarn 성공적으로 설치함

추가. VS Code 확장 프로그램 설치

3개의 확장 프로그램을 추가로 설치했다. 동일한 이름의 확장프로그램에 대해, 다운로드 수가 더 많은 것을 선택하여 설치했다.

  1. ESLint
  2. Reactjs Code Snippets
  3. Prettier-Code formatter

REFERENCES

김민준(2019). 리액트를 다루는 기술, 개정판

'리액트' 카테고리의 다른 글

컴포넌트 선언  (1) 2021.07.16
undefined 리턴 또는 렌더링?  (0) 2021.07.15
프로젝트 생성  (0) 2021.07.08
Comments