[리액트] 리액트 설치 및 작업 환경 설정 방법 (macOS / window)

리액트 설치 전 준비

windows

https://nodejs.org/ko/ 

Node.js 공식 홈페이지에서 LTS 다운로드

Node.js

* Node.js를 사용하는 이유

Node.js + npm

웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용할 수 있도록 하는 자바스크립트 런타임임. 

Node.js 패키지 매니저 도구인 npm이 함께 설치되어 패키지를 설치하고 버전관리가 가능함.

 

 

macOS

nvm을 이용하여 설치한다. (버전 업데이트와 버전 관리에 용이하다.)

Node.js 홈페이지에서 다운 받아도 상관없다.

 

1. Visual Studio Code 터미널에서 명령어를 실행한다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

2. 터미널을 재시작하여 nvm 설치 확인

$ nvm --version

3. nvm 설치 확인 후 Node.js LTS 설치

$ nvm install --lts

※ 안 될 경우 참고

https://huggingface.co/spaces/huggingface-projects/wordalle/blob/408eef894c3fe856009a8efdfcd22a081c6e852f/install-node.sh

 

※ npm이 아니라 yarn을 이용해서도 리액트 프로젝트 생성 가능

 

Git 설치

https://git-scm.com/download/

깃 공식 홈페이지에서 다운로드 

git bash 에뮬레이터를 사용하므로 깃 설치 및 세팅이 필요합니다.

 

Git - Downloads

---

리액트 프로젝트 생성하기

npm으로 작업환경 구축

1. VS code 터미널을 열어 bash 창으로 변경 후에 명령어 입력한다.

 

$ npm init react-app my-project

 

 아래 더보기와 같은 내용이 나오면 설치중 입니다.

$ npm init react-app my-project

Creating a new React app in D:\me\collieLog\test\npm-init-react-app\my-project.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1392 packages in 56s

203 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 52 packages in 3s

203 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1444 packages in 2s

203 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

 

Created git commit.

Success! Created my-project at D:\me\collieLog\test\npm-init-react-app\my-project
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-project
  npm start

 

2. 프로젝트 생성 완료 확인 후 다음 명령어 입력한다.

$ cd my-project
$ npm start

bash에서 구동한 터미널 화면

위와 같은 화면이 나타나면 프로젝트 생성에 성공한 것 입니다.

리액트 페이지가 자동으로 띄워진 브라우저를 확인해보세요.

• 화면이 자동으로 띄워지지 않은 경우 http://localhost:3000/  입력.
• VS code 종료 후 다시 열었을 때, 리액트 작업 화면 불러오려면 터미널에 $ npm start 입력.

리액트 자동 실행 초기 화면

 

 

 

---

* 잘못된 정보 및 오류가 있을 경우 댓글에 적극적으로 말씀 부탁드립니다. 수정, 보완 하겠습니다.