React 개발환경 설정, 프로젝트 만들기

VS Code

• React 코드 편집기로 사용할 개발환경

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

---

Github Desktop

https://desktop.github.com/

GitHub Desktop

---

Github 회원가입

https://github.com/join

GitHub: Where the world builds software

---

Git bash

• VS Code 터미널로 사용

https://git-scm.com/downloads

Git - Downloads

Git bash 설치 후 아래설명을 참고해서 진행

• VS Code 실행 후 왼쪽 상단 File -> Preference -> Settings 클릭.

• 상단 검색창에 terminal 입력

• 하단에 Terminal > External: Window Exec 이라 써 있는 부분에 bash.exe의 경로를 적어줌
• 설치할 때 경로를 건들지 않았다면 C:\Program Files\Git\bin\bash.exe로 되어 있을거임!

• 스크롤을 쭉 내려서 Terminal › Integrated › Default Profile: Windows 에서 Git bash를 선택해서 디폴트 터미널창을 Git bash로 변경해줌.

• VS Code 상단의 Terminal -> New Terminal 클릭해서 터미널 창을 열어보면 터미널이 파워쉘에서 bash로 변경된 것을 확인할 수 있다.

---

nvm

• Node.js의 버전을 관리하는 도구.
• 협업을 할 때나 다양한 프로젝트를 동시에 진행해야 할 때 다양한 라이브러리, 프레임워크, 개발툴의 버전 호환 문제를 겪을 때 사용한다.
• 컴퓨터에 다양한 버전의 Node.js를 설치할 수 있게 도와줌.

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

• 위 링크에 들어가서 nvm-setup.zip 다운로드

• 다운로드 받은 파일의 압축을 푼 뒤에 파일 실행.
• Next 클릭

• browse 클릭 후 경로를 C: 로 설정.

• nvm이 잘 설치되었나 확인하기 위해 VS Code 터미널 창을 열고 아래 명령어 입력

nvm version

 

---

Node.js / npm (Node Package Manager)

• 자바스크립트를 활용한 서버사이드 개발에 사용되는 소프트웨어 플랫폼
• 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하다.
• npm은 Node Package Manager의 약자로 node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통하여 관리하고 배포하고 있다
• Node.js를 다운받으면 npm이 자동으로 설치된다.

https://nodejs.org/ko/

Node.js

• 위 주소에 들어가면 LTS와 현재 버전(Current Version)으로 나뉘어 있는데, LTS는 장기적으로 패치를 지원하는 버전이고 현재 버전은 말 그대로 최신 버전이다.

Node.js 설치하기 및 버전 관리

• VS Code 실행 후 상단의 Terminal -> New Terminal 클릭해서 터미널 창 열기.

• 아래 명령어를 입력해서 Node.js를 설치할 수 있다.
• LTS 버전을 설치해보자.

nvm install [설치할 버전]

• 아래 명령어로 내 컴퓨터에 설치되어 있는 Node의 버전들을 확인할 수 있다.
• 그 중에서 *로 표시된 부분은 내가 사용하고 있는 버전이다.

nvm ls

• node가 잘 설치되어 있나 확인하기 위해 node 명령어로 확인을 해보자.
• 위에서 *로 표시된 부분이 나타나는 것을 볼 수 있다!

node -v

 

• node의 버전을 바꾸기 위해 아래 명령어를 사용하면 된다. 
• 현재 가장 안정적인 14.17.3 버전을 사용해보자.

nvm use [사용할 버전]

npm 으로 yarn 설치하기

• NPM(Node Package Manager)은 무수히 많은 third-party 패키지를 활용할 수 있게 해준다!
• 비슷한 친구로는 yarn이 있다. 둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"이다. → "누가 만들어 놓은 좋은 것"(= 패키지)을 가져다 쓰기 편하게 도와준다.
• 우선 VS Code 터미널창을 열자.
• 아래 명령어를 이용해서 npm으로 yarn을 설치해보자.

# npm으로 패키지를 설치할 때는 아래 명령어를 사용해요!
# 옵션은 필요한 경우에만 적어줍니다.
# npm install [옵션] [설치할 패키지 이름]

npm install -g yarn 

# 이 명령어는 "npm으로 yarn을 컴퓨터 전체에 설치한다"는 뜻입니다.
# -g 옵션은 컴퓨터 전체에서 쓸 수 있게 한다는 뜻입니다.

• 설치가 잘 되었다면 아래 yarn 명령어로 버전을 확인할 수 있다.

yarn -v

• yarn으로 패키지를 설치할 때는 add 명령어를 사용한다.

yarn add [옵션] [설치할 패키지 이름]

---

create-react-app

• CRA(Create React App)는 웹사이트를 만들 때 필요한 것을 몽땅 때려넣어 만든 패키지이다.
• React 사용을 위해 필요한 패키지를 하나씩 설치할 수 있지만 yarn으로 CRA를 설치해서 이를 간편하게 할 수 있다.
• 아래 명령어를 사용해서 yarn으로 CRA를 설치하자.

# 옵션 global은 전역에 이 패키지를 깔겠다는 뜻입니다.
yarn add global create-react-app

---

리액트 프로젝트 만들기

• Node.js를 설치하고 npm으로 yarn을 설치한 뒤에 yarn으로 CRA를 설치했다면 비로소 리액트 프로젝트를 만들 수있다!
• CRA를 설치했다면 프로젝트를 만들기 원하는 폴더를 Vs Code로 열고 bash 터미널에 아래 명령어를 입력해서 리액트 프로젝트를 만들어보자!

yarn create react-app [리액트 프로젝트 이름]

• React 프로젝트의 폴더 구조는 아래처럼 생겼다.

• 이제 터미널에서 리액트 프로젝트 폴더로 이동해서 실행을 해보자!

cd [리액트 프로젝트 폴더명]
yarn start

• 실행하면 localhost:3000의 주소를 가지고 아래와 같은 화면이 나타난다!

주의사항 (노드 버젼)

• 만약 create react-app으로 설치할 때, the engine "node" is incompatible with this module. expected version와 같이 node 버전이 맞지 않는 문제가 발생하면 node 버전을 LTS 버전으로 설치한 후 적용시켜서 다시 CRA로 리액트 프로젝트를 설치하자!!