지난 시간에는 Vue.js에 대해서 알아보았으니, 이번에는 개발하기위한 환경을 구성해 보겠습니다. 전체적인 단계는...
- Node.js 설치
- vue-cli 설치
- vue project 생성
- vue project 실행
순으로 진행하겠습니다.
1. Node.js 설치
Vue.js는 기본적으로 npm을 통해서 설치가 됩니다. npm(node package manager)은 자바스크립트 프로그래밍 언어를 위한 패키지 관리도구 입니다. 이를 사용하기 위해서는 Node.js의 설치가 필요합니다. 설치는 어렵지 않습니다. 언제나 그렇듯... 공식 페이지로 접근해봅니다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
들어가면 바로 현재 접속자의 PC환경에 맞는 파일을 Download할 수 있게 해줍니다. 그리고 LTS버전을 설치합니다. 일단 Recommended 버전으로 최적화된 버전이기 때문입니다.
역시나 Next의 향연으로 계속 눌러줍니다. 그러면 설치가 종료됩니다. 설치가 완료됬다면, 현재 내 PC에 설치된 버전을 확인해봅니다. cmd창에서 node -v 라고 명령을 입력하면 버전을 보여줍니다.
저도 예전버전을 사용하다가 이번에 업데이트 했습니다.
2. vue-cli 설치
vue는 현재 2가지 버전에 대한 설치를 제공합니다. 2.x와 3.x를 제공하는데, 이 두가지의 설치방법에 차이가 있습니다. 저는 이번에는 그래도 안정화 되어있고 많이 사용하는 2.x를 설치해 보겠습니다.
- ver 2.x : npm install vue-cli -global
- ver 3.x : npm install @vue/cli -global
이렇게 설치가 완료 되었습니다. 그렇다면 잘 설치가 되었는지 node.js와 유사하게 버전을 확인해 보겠습니다. 역시나 cmd 창을 열어서 vue라고 입력하면 관련 command 리스트를 보여줍니다. 이중에서
-V, --version output the version number
으로 확인을 해보면... 2.9.6 이라고 친절하게 알려줍니다.
3. vue project 생성
project 생성은 그럼 어떻게 할까요... 아까 cmd로 vue라고 입력해서 확인해 보았을때, 눈치가 빠르신 분들은 확인하셨을 수도 있습니다.
Commands:
init generate a new project from a template
바로 vue init 명령으로 간단하게 프로젝트 생성이 가능합니다. 생각할것 없이 그냥 바로 입력해봅니다.
template-name과 project-name을 입력하라고 합니다. vue에서는 기본적으로 아래의 5가지 template을 제공합니다. 바로 확인하기전에 용어 2가지만 정리하고 들어가겠습니다.
- Vue Loader : vue로 생성된 파일을 HTML, CSS, JS 파일로 변환해주는 모듈
- Module Bundler (모듈번들러) : HTML, CSS, 이미지를 JS모듈로 변환해주는 번들러
[template 종류]
- webpack : 모듈번들러를 hot-reload, linting, test, CSS추출기능 등 대부분의 기능을 갖추고 있는 webpack으로 사용하고, vue-loader를 포함하는 template
- webpack-simple : 단순히 webpack과 vue-loader를 포함하는 template. 간단히 프로토 타입을 만들때 사용
- browserify : 모듈번들러를 hot-reload, linting, test,CSS추출기능 등 대부분의 기능을 갖추고 있는 browserify로 사용하고 vuetify를 포함하는 template
- browserify-simple : 단순히 browserify와 vuetify를 포함하는 template. 간단히 프로토 타입을 만들때 사용
- simple : 가장단순하게 html파일에 vue 설정만 가짐
자 그렇다면, webpack으로 생성해 보겠습니다. 어마어마한 질문들을 하는데... 걱정할 것 없습니다. 사실 뭐하나 잘못선택해도 프로젝트만드는데 큰 영향은 없으니까요... 그냥 선택한걸 사용하게 되겠죠?? 그럼 질문에 대해서 알아보겠습니다.
? Project name ad-vue <프로젝트 이름>
? Project description adproject <프로젝트 설명>
? Author ayoteralab <프로젝트 제작자>
? Vue build standalone
? Install vue-router? Yes <vue-router를 사용할지... 이는 SPA로 view를 개발할때 필수요소 입니다.>
? Use ESLint to lint your code? Yes <코드작성 규칙을 ESLint로 사용할 것인지... 이게 또 제약이 심하지만...>
? Pick an ESLint preset Airbnb <2가지 preset을 선택이 가능한데... 저는 Airbnb를 추천합니다.>
? Set up unit tests Yes <단위테스트 환경 여부>
? Pick a test runner jest <부하테스트를 위한 종류 선정>
? Setup e2e tests with Nightwatch? Yes <e2e테스트 여부>
? Should we run `npm install` for you after the project has been created? (recommended) NPM <의존성 설치여부>
이렇게 설치가 완료 되었습니다. 제가 아무생각없이 사용자 폴더에 만들어서... 일단 해당 경로로 가보겠습니다.
이렇게 프로젝트를 구성하는 파일들이 생성되었습니다.
4. vue project 실행
실행은 간단합니다. 이번에는 cmd 에서 해당 프로젝트로 들어가고 npm run 이라고 입력해 봅니다.
가능한 모드가 나오고 이번엔 dev를 실행해 보겠습니다. 그렇게 되면, node에서 제공하는 자체 서버를 통해서 구동이 되게 됩니다. 현재 해당 프로젝트 안으로 들어가서 실행하는 것을 꼭 확인해 주시면 됩니다.
이렇게 application이 정상으로 돌고있다고 확인이 됬고... 그렇다면 표시된 주소로 접근을 해보겠습니다. 아래와 같이 표시가 된다면 정상적으로 동작한다는 것 입니다.
이제 다음시간에는 좀더 깊은 Vue의 세계로 빠져보겠습니다.
-Ayotera Lab-
댓글