Vue.js로 todo list만들기
지난번 Vue.js를 기반으로 한 개발환경을 처음으로 구축해보았고 이번 시간에는 사용법을 익히기 위해서 가장 흔한 todo list app을 만들어 볼 것이다.
먼저 기본 환경이 설정된 파일은 여기에 있다.
Github Source Code
index.html파일에는 별도의 변경사항이 없다. react 개발할 때와 마찬가지로 <div id=”app”>만을 준비해주고 기능구현은 각각의 컴포넌트단위로 개발할 것이다.
index.js 역시 아직까지는 todo를 관리하는 AppComponent하나만을 렌더링해주는 것으로 역할이 끝나기 때문에 추가사항은 없다. 오늘 집중할 부분은 바로 AppComponent.vue파일이다.
vue 파일은 html template을 관리하는 <templete>영역과 javascript코드로 로직을 구현한 <script>영역, css style을 관리하는 <style>영역 세 가지로 구성되어있다.
각각의 영역을 살펴보면서 Vue.js의 특징을 알아보도록 하겠다.
<script>
vue 파일 내의 작성 순서는 tempalte이 먼저지만 script에서 정의된 변수를 tempalte에서 사용하고 있기 때문에 script먼저 확인해보도록 하겠다.
component를 export할 때 초기 코드에서는 name만을 정의해줬다면 이번에는 methods와 data() function을 함께 정의해줄 것이다.
먼저 data()는 default state를 return해주는 함수라고 보면 된다. todo app에서는 todo들의 목록인 todos가 필요하고, 각각의 todo는 내용(text)과 완료 여부(completed)데이터를 가지고 있다.
methods는 함수들로 구성된 객체이다. 여기에서는 addTodo()와 completeTodo(), deleteTodo() 세 가지를 생성해주었다. 내부 코드는 크게 어렵지 않다.
- addTodo()의 경우 todos에 새로운 todo를 추가해주고
- completeTodo()는 해당 index인 todo의 completed를 토글해준다.
- 마지막 deleteTodo()는 todos에서 해당 index인 todo를 삭제해준다.
<template>
먼저 template이다. 익숙한 html 마크업으로 구성되어있지만 중간중간 vue만의 특정한 표기방식이 추가되어있다.
먼저
@Click="functionName"부분은 해당 요소가 클릭되었을 때 실행할 함수를 등록한다. 더블쿼터 안에 실행할 function을 작성해주면 된다. 파라미터를 넘겨주고 싶다면 “function(param1, param2…)”와 같은 방식으로 작성한다.
react에서는 배열을 통해 list를 만든다면 보통 map() function을 사용하여 jsx형식의 list를 생성한 후 필요한 위치에 추가해주었다면, vue에서는 for문을 사용하여 간편하게 동일한 목록을 여러개 생성할 수 있다.
v-for"(item, index) in items"와 같은 방식으로 표기하며, 배열인 items의 각 요소를 첫 번째 파라미터로, 그 item의 index를 두 번째 파라미터로 받아서 해당 dom안에서 사용할 수 있다.
vue에서는 조건에 따라 분기처리하는 if문 역시 사용이 가능하다.
v-if=”condition”과 같이 표현하며, 더블쿼터 안의 내용이 true일 경우 해당 요소를 노출한다. if 하위에는
v-else로 위의 조건이 false일 경우 노출되는 요소 역시 정의해줄 수 있다.
<style>
css code부분을 담당하는 <style>영역이다. 크게 변화를 준 부분은 없으니 코드 자체에 대한 설명을 하기 보다는 단순 css가 아닌 less를 사용하였다는 점에 대해 정리해보려고 한다.
less는 css문법을 확장하여 변수를 선언할 수 있고, 하위 요소들에 대해서는 부모 요소 내부에 중첩적으로 스타일을 지정할 수 있도록 확장한 언어이다.
less를 사용하려면 먼저
<style lang=”less”>와 같이 language를 선언해 주어야 하고, less-loader를 설치해 webpack에서 빌드 시 사용할 수 있게 해주어야 한다.
$ npm i — save-dev mini-css-extract-plugin extract-text-webpack-pluginplugin을 설치하고
// webpack.config.jsmodule.exports = {
module: {
rulres: [
... {
test: /\.css$/,
use: [
process.env.NODE_ENV !== 'production'
? 'vue-style-loader'
: MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.less$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}]
}, ...
다음과 같이 less와 css에 대한 처리를 해주면 된다. webpack-dev-server를 통해서 실행시키면
다음과 같이 정상적으로 작동하는 모습을 볼 수 있다.