vue와 react 설치방법

Vue.js 와 React.js의 초기설치 방법에 대해서 정리했습니다.

 

1) vue 2.0

1. node.js를 다운로드 받고 npm install vue를 통해 vue를 설치한다.
2. vue install -g @vue/cli
3. vue init webpack 프로젝트명

• 2.0 버전과는 다르게 vue 3.0버전에서는 vue create 프로젝트명 으로 vue 프로젝트를 설정할 수 있다.
  • 3.0버전에서도 2버전의 vue init webpack 프로젝트명 를 사용 할 수 있다.

• cli는 전역으로 설치하는 vue전용 npm패키지로서 reacte appr과 비슷한 초기세팅을 도와주는 패키지이다.
• vue init webpack은 사용자가 직접 원하는 설정을 지정해 프로젝트를 만들지만 3.0버전은 이 과정이 생략된다.

2) react

React의 초기 설정은 두가지가 존재한다.

• 웹팩을 통한 리액트 개발 설정
• create-react-app을 통해 설정된 값으로 개발 시작
• 이중 create-react-app를 사용해볼 예정이고 create-react-app에는 babel, webpack 등 react에서 주로 사용하는 설정이 포함되어 있다.

1. node.js를 설치한다

2. yarn을 설치한다 -> npm으로 사용할 경우 3-1.로

# yarn을 설치하지 않고 npm이나 npx로도 충분히 프로젝트를 생성 할 수 있다.
`npm i -g yarn`

• yarn은 JS 패키지 매니저 중 하나이며 npm에서 발생하는 이슈(버전문제, 속도, 안전성)를 해결하기 위해 사용
• 그 동안 npm으로만 작업을 진행했었는데 react를 공부하면서 yarn을 주로 사용해보려고 한다.

3. CRA(create-react-app)을 설치한다.

yarn create react-app 프로젝트명

3-1. yarn을 설치하지 않고 npm이나 npx로 설치할 경우

# npm 5.2 이상인 경우
    npx create-react-app 프로젝트명

# npm 5.1 이하인경우
    npm install -g create-react-app
    create-react-app 프로젝트명

# npm 6 이상인 경우
    npm init react-app 프로젝트명

4. 프로젝트 실행

# yarn
cd 생성한 프로젝트 이름
yarn start

# npm
npm start