새로운 IT책을 읽었으면 미니 프로젝트를 해보는게 가장 좋다.
직접 만들어 보지 않으면 나중에 까먹기도 하고 이해를 장담할 수 없더라. ㅜㅡㅜ
Vue.js는 자바스크립트 프레임워크이다. 데이터 바인딩 형태의 프레임워크이며 컴포넌트 단위로 페이지를 구성한다.
*데이터 바인딩 : 데이터가 변경되면 자동으로 DOM을 업데이트 하는 형태
프로젝트를 빌드하기 위해서는 npm을 설치해야 한다. npm은 node.js를 설치하면 함께 설치된다.
1. vue 설치하기
가장 먼저 아래와 같이 vue를 설치해야 한다. --version을 입력했을 때 버전값이 나오면 설치된 것이다.
$ npm install vue
$ vue --version
2. 뷰 CLI를 이용한 프로젝트 생성하기
프로젝트를 생성하고 싶은 폴더에 가서 vue init 명령어를 하면 프로젝트에 필요한 뼈대와 리소스들이 추가된다.
$cd <프로젝트를 만들고 싶은 폴더 경로>
$vue init webpack-simple
webpack-simple에서 웹팩은 웹 성능 개선 도구로 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 역할을 한다. 웹팩은 좀 더 많은 내용이 있는 것 같아서 나중에 한 번 다뤄보겠다.
webpack-simple 이외에도 다음과 같은 템플릿들이 있다.
| 템플릿 종류 | 설명 |
| webpack | 고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원 |
| webpack-simple | 웹팩 최소 기능을 화용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용 |
| browserify | 고급 브라우저리파이 기능을 활요한 프로젝트 구성 방식. 테스팅, 문법 검사등을 지원 |
| browserify-simple | 브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용 |
| simple | 최소 뷰 기능만 들어간 HTML 파일 1개 생성 |
| pwa | 웹팩 기반의 프로그레시브 웹 애 기능을 지원하는 뷰 프로젝트 |
*출처 : Do it! Vue.js 입문 p.119
vue init 명령어를 하고 나면 폴더 하위에 아래와 같이 구성된다.
.
├── README.md
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js
아래 명령어 까지 입력하면 성공을 알리는 브라우저 창이 하나 띄워진다.
$ npm install
$ npm run dev
*npm install : 뷰 애플리케이션을 구동하기 위한 관련 라이브러리를 모두 다운로드. package.json의 라이브러리 목록이 전부 프로젝트의 node_modules폴더 밑에 설치한다.
*num run dev : 브라우저가 실행되면서 로컬 서버를 하나 띄운다.
아래와 같이 나오면 프로젝트 초기 세팅은 끝난 것이다.
다음으로는 게시판 만들기에 대한 포스팅을 해보겠다!
-- 그 외--
작업을 하면서 헷갈린 부분이 있었는데, vue 코드를 구현할 때 Vue.component도 있고 export default도 있어서 헷갈렸다.
-Vue.component를 사용할 때
<script>
Vue.component('my-component', {
template: '<div>test component</div>'
});
new Vue({
el: '#app'
});
</script>
- export default 사용할 때
<script>
export default{
props: ['propsdata'],
data() {
return {
todoItems: []
}
}
}
</script>
vue.component는 .html 확장자에서 쓰였고 export default는 .vue 확장자에서 쓰였다. html 확장자에서는 vue 코드라는 걸 vue.componenet를 사용해서 작성하고 있다.