- 단위 테스트(Unit test) 버전이 추가되었습니다.
unit-testBranch에서 확인할 수 있습니다.
- 같은 테스트 환경을 위해 Vue CLI를
4.1.2버전으로 설치하도록 문서를 수정했습니다. - 모든 모듈의 버전은 Package.json 파일을 참고해주세요.
- 강의 영상의 NodeJS 버전은
10.15.0이며, 그 이상의 LTS 버전(짝수 버전)을 사용하시길 권장합니다. - 강의 영상의 NPM 버전은
6.5.0이며, 역시 그 이상의 버전을 사용하시길 권장합니다. - 버그 및 수정/건의 사항 등은 Issues 혹은 [email protected]으로 문의 부탁드립니다.
Todo App 예제를 통해 Vue CLI 없이 개발 환경을 구성했다면,
이번에는 Vue CLI를 사용해 손쉽고 빠르게 개발 환경을 구성합니다.
Movie API를 사용해 영화 검색 페이지를 만듭니다.
Vue CLI를 전역 모드(-g)로 설치합니다.
vue명령어를 사용할 수 있습니다.
$ npm i @vue/[email protected] -g다음과 설치 및 버전을 확인할 수 있습니다.
$ vue --version
# @vue/cli 4.1.2Vue CLI를 통해 쉽게 프로젝트를 (바탕화면에 혹은 원하는 위치에) 생성합니다.
$ cd desktop
$ vue create YOUR_PROJECT_NAMEVue CLI는 그래픽 인터페이스(GUI)를 사용하여 프로젝트를 작성하고 관리하는 기능을 제공합니다.
$ vue ui상태 관리 패턴(Store)을 사용하기 위해 Vuex를 설치합니다.
Vuetify는 Material Design 사양을 기준으로 웹앱 구축에 필요한 다양한 기능을 제공합니다.
특히 UI components를 사용해 손쉽고 빠르게 프로젝트의 UI를 구성할 수 있습니다.
OMDb API는 영화 정보를 얻기 위한 RESTful 웹 서비스입니다.
무료로 API키를 발급받아(하루 1000건 제한) 사용할 수 있습니다.
https://github.com/axios/axios
Axios는 HTTP 클라이언트 라이브러리로써, OMDb API를 통해 영화 정보(비동기 HTTP 데이터)를 요청하기 위해 사용합니다.
이 예제에서는 비동기 방식에 대한 이해가 매우 중요합니다.
https://github.com/shershen08/vue-masonry#readme
검색된 영화 목록을 핀터레스트 스타일의 레이아웃으로 구성하기 위해 사용합니다.
vue-masonry는 Masonry 라이브러리를 Vue.js로 랩핑한 모듈입니다.
https://firebase.google.com/
https://firebase.google.com/docs/hosting/?authuser=0&hl=ko#implementation_path
웹 사이트 호스팅을 위해 Firebase Hosting을 사용합니다.
회원가입 후 무료로 사용할 수 있습니다.
Firebase CLI를 전역으로 설치합니다.
firebase명령어를 사용할 수 있습니다.
$ npm install -g firebase-tools
$ firebase login
$ firebase init
$ firebase deploy단위(Unit) 테스트란 상태, 메소드, 컴포넌트 등의 정의된 프로그램 최소 단위들이 독립적으로 정상 동작하는지 확인하는 것을 말합니다.
이를 통해 프로그램 전체의 신뢰도를 향상하고 코드 리팩터링(Code refactoring)의 부담을 줄일 수 있습니다.
CLI에서 Jest를 직접 실행하기 위해 전역 설치합니다.
$ npm install -g jest테스트를 위해 프로젝트에 다음 모듈들을 설치합니다.
$ npm install -D jest @vue/test-utils vue-jest babel-jest babel-core@bridge| 모듈 | 설명 |
|---|---|
| jest | 페이스북에서 만든 테스트 프레임워크로 Vue Test Utils에서 권장하는 테스트 러너입니다. |
| @vue/test-utils | Vue.js 환경에서 단위 테스트를 하기 위한 공식(Official) 라이브러리 입니다. |
| vue-jest | Vue 파일을 Jest가 실행할 수 있는 자바스크립트로 컴파일합니다. |
| babel-jest | JS/JSX 파일을 Jest가 실행할 수 있는 자바스크립트로 컴파일합니다. |
| babel-core@bridge | Babel 6버전과의 호환을 위해 설치합니다. 관련 이슈가 있습니다. |
jest.config.js 파일을 생성하고 다음과 같이 Jest 구성 옵션을 추가합니다.
module.exports = {
// 파일 확장자를 지정하지 않은 경우, Jest가 검색할 확장자 목록입니다.
// 일반적으로 많이 사용되는 모듈의 확장자를 지정합니다.
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
// `@` 같은 경로 별칭을 매핑합니다.
// E.g. `import SearchBar from '@/components/SearchBar'`
// `<rootDir>` 토큰을 사용해 루트 경로를 참조할 수 있습니다.
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
// 일치하는 경로에서는 모듈을 가져오지 않습니다.
// `<rootDir>` 토큰을 사용해 루트 경로를 참조할 수 있습니다.
modulePathIgnorePatterns: [
'<rootDir>/node_modules',
'<rootDir>/build',
'<rootDir>/dist'
],
// 정규식과 일치하는 파일의 변환 모듈을 지정합니다.
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\.jsx?$': 'babel-jest'
},
// 각 테스트 파일이 실행되기 전,
// 테스트 프레임워크를 구성하거나 설정하기 위해,
// 일부 코드 실행 모듈의 경로를 지정합니다.
// Vuetify UI 프레임워크를 사용하는 경우 필요합니다.
// https://github.com/vuetifyjs/vuetify/issues/4964
setupFilesAfterEnv: [
'./jest.setup.js'
]
}jest.setup.js 파일을 추가하고 다음과 같이 Vuetify 설정을 추가합니다.
vuetifyjs/vuetify#4964
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)package.json 파일에 eslintConfig에 다음과 같이 Jest 옵션을 추가합니다.
{
"eslintConfig": {
"env": {
"jest": true
}
}
}