React, React 환경설정-1

리액트란?

 

React 는 UI 를 구현하는 JavaScript 라이브러리

웹 앱(Web App) 또는 네이티브 앱(Native App)

유지보수를 쉽게 , DOM 관리

성능 최적화 쉽게

컴포넌트에 집중

대부분 공식 라이브러리가 없음 (높은 자유도)

자바스크립트 친화적 es6 기반로 배우기가 쉽다

 

 

React 환경설정

 

1. NodeJs

- 리액트 프로젝트를 준비하기 위해 필요한 webpack, babel 등의 도구들을 실행하는데 사용된다.

- npm은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다

 

2. Yarn

- 자바스크립트 패키지를 관리하기 위해서 사용된다.

- yarn은 npm동작 방식과 비슷하지만 npm의 단점을 보완해 성능과 속도를 개선한 패키지 관리도구이다.

Node.js 를 설치하면 npm 이 설치되어서 npm 으로 해도 되긴 하지만, yarn을 사용하면 훨씬 빠르다.

 

npm VS yarn npm

은 여러 패키지를 설치할 경우 패키지가 완전히 설치될 때까지 기다렸다가 다른 패키지로 이동한다.

작업이 패키지별로 순차적으로 실행된다는 것이다.

 

yarn은 이 작업들을 병렬로 설치하기 때문에 성능과 속도가 향상된다는 장점이 있다.

 

3. VS Code

 

---

NodeJs

 

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

 

 

건드는거 없이 Next >

 

 

저장 위치

 

C:\Program Files\node.js

 

 

 

 

 

---

Yarn

https://classic.yarnpkg.com/en/docs/install#windows-stable

Yarn

 

 

이것도 건드는거 없이 Next > 

 

저장위치

 

C:\Program Files (x86)

 

 

 

 

 

 

---

Visual Studio Code (VS Code)

 

https://code.visualstudio.com/

 

 

 

건드는 거 없이 Next

* 저장 위치만 변경함

 

 

 

 

 

 

 

---

Visual Studio Code 환경설정

 

 

 

Server Run Browser 설정

 

톱니바퀴 →  Settings → browser 검색 → 아래로 내려오면 Custom Browser : Chrome 선택

 

현재 컴퓨터에 배정된 ip주소로 변경하기

 

톱니바퀴 → Settings → local 검색 → Extensions(왼쪽) → 아래로 내려오면 Use local IP as host 체크

 

 

 

부가 설치

 

- Live Server

- Korean Language Pack for Visual Studio Code

- Auto Close Tag

- Auto Complete Tag

- Auto Import

- Auto Rename Tag

- Reactjs code snippets – 코드 자동 생성

 

 

 

프로젝트 만들기

 

https://greenyellow-s.tistory.com/127

React, React 환경설정-1