01. React 시작하기 (Mac)

0. 목표

React로 처음 프로젝트 만들기

1. 작업환경 설정 

1. Node LTS 버전 설치 (https://nodejs.org/ko/)

2. Yarn 최신버전 업데이트 (다른 OS사용시 그에 맞는 react 인스톨 방식 사용)

yarn upgrade
yarn upgrade v1.7.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Rebuilding all packages...

success Saved lockfile.
success Saved 0 new dependencies.
✨  Done in 0.06s.

3. Atom(에디터 아무거나 가능)

 

2. React 설치 및 프로젝트 생성

Create-React-App 설치

yarn global add create-react-app
yarn global v1.7.0
[1/4] 🔍  Resolving packages...
⠁ (node:19834) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...

success Installed "create-react-app@3.0.1" with binaries:
      - create-react-app
✨  Done in 1.08s.

Create-React-App 설치

create-react-app todo-list

Creating a new React app in /Users/yoonjongsung/Downloads/react/todo-list.

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

yarn add v1.7.0
[1/4] 🔍  Resolving packages...
⠁ (node:20810) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
warning react-scripts > fsevents@2.0.6: Please update: there are crash fixes

...[Omitted]...

Happy hacking!

Todo-List 프로젝트 실행

해당 프로젝트 디렉토리로 들어가 해당 명령어를 입력한다.

Yarn Start 
---------
Compiled successfully!

You can now view todo-list in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.25.10:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.
---------

브라우저를 통해 아래와 같은 결과를 확인할 수 있다.

React 초기 화면

3. 프로젝트 초기화

프로젝트를 변경하기 이전에 모든 세팅을 초기화 시키자.

 

참고 사이트

https://velopert.com/3480