React) Node.js, yarn, Git, VS Code 다운로드 및 프로젝트 생성

안녕하세요, 코린이의 코딩 학습기 채니 입니다.
[리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다.

 

Node.js 다운로드

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

다운로드 | Node.js

 

* Node.js 다운로드 이유?

리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만,

프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치!

 

이 때 사용하는 개발 도구에는 ECMAScript 6를 호환시켜주는 바벨, 모듈화된 코드를 한 파일로 합치고(번들링),

코드를 수정할 때마다 웹 브라우저를 리로딩하는 등의 여러 기능을 지닌 웹팩 등이 있습니다.

 

Node.js를 설치하면 Node.js 패키지 매니저 도구인 npm이 설치됩니다.

npm으로 수많은 개발자가 만든 패키지를 설치하고 설치한 패키지의 버전을 관리할 수 있습니다.

 

LTS 버전을 다운로드 받아줍니다.

 

설치를 진행해줍니다.

 

라이센스에 동의

 

설치 위치를 지정해주며, 기본 설치 위치로 지정하였습니다.

 

사용자 설정화면으로 모두 기본값 처리하였습니다.

- Node.js runtime : Node.js 런타임 본체가 되겠습니다. 
- corepack manager : 패키지 관리자입니다. npm, yarn등의 패키지 관리자의 여러 버전을 설치하고, 시용여부를 지정하는 것이 가능합니다. 서로 다른 개발 또는 배포 환경에서 상호간의 설치 호환성을 유지하기 위해서 사용되어질 수 있다고 합니다. 
- npm package manager : 패키지 관리자 입니다. 
- Online documentation shortcuts : 온라인 문서에 대한 바로가기 입니다. 
- Add to PATH : PATH 환경변수에 등록합니다.

 

Native 모듈들을 위한 툴을 설치할지에 대한 여부로 선택하지 않았습니다.

(npm 모듈 중에 컴파일이 필요한 것이 있을 때 필요한 도구를 자동으로 설치할 것인지 물어보는 것)

 

Install 버튼을 눌러 설치를 진행해줍니다.

 

설치가 완료된 것을 확인할 수 있으며, CMD 창을 열어 설치가 제대로 되었는지 확인해줍니다.

node -v

 

※ 참고 포스팅

https://offbyone.tistory.com/441 

Node.js 설치하기

 

---

yarn 다운로드

- npm 대신 yarn 패키지 관리자 도구 사용 예정

 

npm install --global yarn

yarn --version

설치 및 설치 확인을 하였습니다.

 

---

VS Code 다운로드

 

아래 포스팅 참고!

https://chanychu.tistory.com/216?category=973491 

HTML) VS Code 다운로드, workspace 설정, Extensions

유용한 확장프로그램

* ESLint

* Reactjs Code Snippets

* Prettier-Code formatter

 

---

Git 다운로드

추후 포스팅 예정

 

---

 

create-react-app으로 프로젝트 생성

- 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경 구축

 

프로젝트를 만들고 싶은 디렉터리에서 설치 명령어를 실행

C:\Users\82103>cd C:\Workspaces\react_workspace

C:\Workspaces\react_workspace>yarn create react-app hello-react

프로젝트가 성공적으로 생성되었다면 위와 같은 메세지들이 쭉 뜰 것입니다.

 

프로젝트 디렉터리로 이동 후 리액트 개발 전용 서버 구동

C:\Workspaces\react_workspace>cd hello-react

C:\Workspaces\react_workspace\hello-react>yarn start

위와 같은 결과가 나타날 것이고, 브라우저에서 자동으로 리액트 페이지가 띄워집니다.

(만일 자동으로 열리지 않는다면 http://localhost:3000/ 을 입력하여 직접 열기)

준비 끝!!