무작정 시작하기 앞서

본 시리즈는 같은 학원 수강생들과 함께하는 React 스터디 진행의 내용을 바탕으로 정리할 예정이다. 탄탄한 Javascript 지식은 없지만🤣 무작정 부딪치고 시간을 들여 얻은 지식을 공유하고자 한다.

React 무작정 개발 환경 구성하기

React로 개발하면서 개발에 도움이 되는 라이브러리들이 많다. 그런 자바스크립트 라이브러리들을 관리하기 위해서 노드 패키지 매니저 프로그램이 필요하다. 노드 패키지 매니저는 필요한 라이브러리를 자체 서버에서 받거나 삭제하는 등 관리하는 프로그램이다.
npm은 라이브러리를 node_modules 폴더에 담아서 관리하고 설치한 라이브러리들의 정보를 package.json 파일에 저장한다.

이렇게 따로 관리를 하는 이유는 라이브러리의 용량은 매우 크기 때문이다. git 같은 형상 관리 도구나 개발자 간 프로젝트를 공유할 때 package.json만 넘겨주면 노드 패키지 매니저를 통해 라이브러리 목록을 읽고 내려받을 수 있다.

Node.js 설치하기😎

Node.js를 내려받아 설치하면 npm을 사용할 수 있다. 현재 개발하고 있는 운영체제는 Windows 10을 사용하기 때문에 Windows 10을 기준으로 설치를 진행하겠다.
Node.js
위 링크는 Node.js의 공식 홈페이지이다.
Node.js는 현재 14.9.0 버전까지 업로드되었지만 안정적인 버전도 함께 홈페이지에 게시되어 있다.
안정적인 LTS 버전을 내려받아 설치하도록 한다.
설치하는 도중에 나오는 모든 설정은 기본값으로 설치하겠다.

Node.js 설치를 완료하고 cmd를 켜서 node -v 명령을 입력해보자.
Node.js의 버전이 출력되면 정상적으로 설치가 완료된 것이다.

yarn 설치하기❗

yarn은 Facebook 에서 npm의 단점을 개선하여 성능과 속도를 향상시킨 라이브러리 관리 도구이다. 그러므로 npm 대신 yarn을 사용하여 라이브러리를 관리하도록 하겠다.

Yarn install (Windows)
위 링크는 Windows 운영체제에서 Yarn을 설치할 수 있도록 Installer를 제공한다.
Stable 버전이 자동으로 선택되어 있으며 Download Installer를 클릭하여 설치 파일을 내려받는다.
Yarn 설치 또한 모든 설정을 기본값으로 설치하겠다.

Yarn 설치가 완료되었다면 다시 cmd를 실행하여
yarn --version 명령을 입력해보자
Yarn의 버전이 출력된다면 정상적으로 설치가 완료된 것이다.

🎉React 개발에 필요한 Node.js와 패키지 매니저 Yarn 설치를 완료하였다.