윈도우 개발 세팅 (2) - node 설치 or React , Vue , Angular 설치

이번에는 Windows 버전에서 node를 설치해보겠습니다.

 

일단 node.js를 설치해서 개발 환경 세팅을 하려면 nodejs 버전을 정하고 툴도 찾아보고 소스 버전 관리용 github에 연동 해야합니다.

---

1. node.js 설치

Node.js

공식 사이트에 들어가셔서 node를 설치해 줍니다.

최신 버전을 받으셔도 되고 저같은 경우 안전성 있는 버전을 택하고 싶기 때문에 안전성 버전을 다운 받았습니다.

node -v

다운 로드가 끝나면 node-v 로 버전이 잘 설치 되었는지 확인 해주세요.

Node.js 실행후 간단하게 코드를 날려보겠습니다. 이상 없이 작동되고 있습니다.

 

 

2. React 개발 환경 구성

Node.js 설치가 완료 되었다면 이제 React 환경을 구성하는데 이상 없을 것입니다.

먼저 사용할 React로 만들 프로젝트 폴더를 하나 만들어 줍니다.

Home

그 전에 먼저 react에서 이용할 실행 코드를 다운 받아야합니다 npm 과 yarn 이있는데 저는 yarn을 개인적으로 선호하기 떄문에 yarn을 다운 받겠습니다.

 

npx create-react-app 프로젝트명

npx 를 이용해 프로젝트를 만들어줍니다.

•  npm 이 아닌 npx 인 이유는 ?
  - 기본적으로 npx는 npm 5.2.0 버전 부터 추가된 도구 입니다.
    npm으로 전역이나 로컬에 모듈을 설치해서 프로젝트마다 같은 모듈을 공유해 사용할 수 있습니다.
    업데이트 될시 로컬에서 빠르게 변환하는 모듈을 관리하는데 어려움이 있는데 이를 개선해 모듈을 로컬에
    저장하지 않고 일회성으로 패키지 명령을 실행하게 해주는 것이 npx입니다.

2-1.앱 실행하기 

React 앱이 생성되었다면

code ./폴더이름

code ./폴더이름 으로 들어가 visual studio로 실행해줍니다.

react 앱을 시작하려면 yarn start로 package.json에 있는 start 명령어를 실행해줍니다.

👉 package.json의 scripts에 있는 start 명령어를 실행

 package.json
 프로젝트 정보와 패키지 버전 정보를 담고있는 파일

 

 

참고 자료

[React] 개발 환경 구축 (CRA)

 

3. Vue 개발 환경 구성

Vue.js는 주로 크롬 브라우저에서 개발하는 언어입니다. 크롬에서 개발시 Vue.js는 크롬 확장 프로그램인 Vue.js devtools를 사용하면, 더편리하게 Vue.js를 디버깅할 수 있습니다. Vue.js를 사용하는 3가지 방법에 대하 알아보도록 하겠습니다.

 

1. <script> 에 추가

<script> 태그에 Vue.js 코드를 추가하는 방법이 있습니다.

 

Vue.js 소스코드

개발용 버전을 다운 받거나, 배포용 버전을 다운 받으시고 Script에 추가하시면 됩니다.

 

참고 - 최소화 버전 (vue.min.js) 사용시 유의 사항

개발 중에는 최소화 버전을 사용하지 않는 것이 좋습니다. 최소화 버전에서는 개발에 도움되는 Waring 들이 출력해 주기 때문에,

 

개발 중에는 개발용 버전을 사용하다 실제 서비스에서는 배포용 버전을 배포하는 것이 좋습니다.

 

CDN

Vue.js 소스코드를 직접 script 태그에 추가하지 않고 , https://unpkg.com/vue 를 script태그에 추가하는 방법도 있습니다.

(해당 링크는 npm에 올라간 최신 버전), 이곳에서 npm 패키지 원보을 확인할 수 있습니다.

두방법 차이는 Vue.js 소스코드를 직접 script태그에 추가할지, CDN으로 웹주소에 script태그에 추가할지 정도 밖에 없습니다.

 

2. NPM

Vue로 대규모 서비스를 만들때 NPM을 사용하는 것이 좋습니다. Webpack과 browserify와 같은 번들러와 함께

사용할 수있습니다.

npm install vue

위에 명령어로 vue를 설치할 수 있습니다.

 

3. CLI

Vue.js는 다른 Vue.js 프로젝트 생성을 지원하기 위해 공식 CLI를 제공합니다.

# vue-cli 설치
npm install -g vue-cli

# "webpack" 템플릭을 이용해 새프로젝트 생성
vue init webpack my-project

위 두줄 명령어 실행하면 vue.js 프로젝트가 생성됩니다. 위에 명령어 실행시 webpack을 이용한 vue.js 프로젝트가 생성됩니다.

 

Vue-cli 설치하기

npm install --global vue-cli

위 셀 명령어로 vue-cli를 설치할 수 있습니다. CLI 설치후, CLI를 사용해 Vue.js프로젝트를 생성할 수 있습니다.

 

Vue.js 프로젝트 생성

vue.js 프로젝트 생성시, CLI명령어의 형태는 아래와 같습니다.

vue init <template-name> [project-name]

예를 들어

vue init webpack my-project

위 명령어로, my-project 디렉토리에 webpack 번들러를 사용한 Vue.js 프로젝트를 생성할 수 있습니다.

 

4. Angular 개발 환경 세팅

Angular 개발 환경세팅도 간단합니다. Node와 yarn을 이미 설치했으니 가이드만 따라잡아 봅시다.

npm install -g @angular/cli

먼저 Angular 기본 cli를 설치해줍니다.

 

ng new my-angular-app

angular 프로젝트 생성 코드는 ng 입니다. ng 로 새로운 new 프로젝트를 만들고 my-angular-app은 여러분이 만들 프로젝트 이름입니다.

 

스타일 언어를 설정할 부분인데 여러분이 사용하기 편한 언어로 설정해주세요

 

선택 완료되었다면 설치가 진행됩니다.

 

Angular 앱 실행하기

code ./my-angular-app

이제 내가 생성한 app을 vs code 로 실행해줍니다.

 

ng serve --open

 실행을위해 ng server --open을 입력해줍니다.

이렇게 localhost:4200으로 실행이 되었고 이곳을 들어가면

 

짜잔 ~ 앵귤러 서버가 정상적으로 실행되었습니다. 여기 까지가 윈도우의 세팅방법 입니다.

 

다음 시간에는 React,angular,vue 에 github pages 배포 방법에 대해 알아보도록 하겠습니다.

 

윈도우10에 Angular 개발환경을 설치하는 방법