NUXT는 기본적으로 Vue.js를 확장해서 만든 것 이기 때문에 변수, 함수, if나 for 등의 문법은 뷰의 그것도 동일 하다. 이번 포스팅에서는 초보자의 입장에서 변수와 함수에 대해서 알아보자.
Vue.js는 Reactive 변수를 제공 한다. 이게 무슨 말이냐면 변수의 값이 변경 되면 화면상의 표시 값도 싱크 되어 실시간 변경 된다.
코드로 알아보자.
우선 새로운 프로젝트를 생성 하는 것은 귀찮으니
지난 포스팅에서 만들었던 헬로월드 프로젝트를 불러오겠다.
프로젝트 폴더 > pages > index.vue
파일을 열어보자. (사진)
<template> ... </template> 태그 속에 디자인 부분이,
그리고 <script> ... </script> 태그 안에 로직부분이 오게 된다.
우선 로직 부분에 변수 a = 10 을 선언 해보려고 한다.
코드는 아래와 같다.
<template>
<Tutorial/>
</template>
<script>
export default {
data: () => ({
a: 10,
})
}
</script>export default { ... } 의 속에 data: () => ( ... )의 화살표 함수로 정의 되는 리턴값에 원하는 값을 json 형태로 넣어 주면 된다.
터미널에서 yarn dev 커맨드를 이용해 서버를 실행 해보자.
결과에 표시된 서버의 URL인 http://localhost:3000/ 를 웹브라우저로 열어보자. 페이지가 표시 된다.
nuxt.js(vue.js)에서는 변수를 프린트 하기 위해서는 뷰를 담당하는 <template> 태그 속에 {{ 변수명 }}의 문법으로 표현 하면 된다.
이 설명에 따르면 아래와 같이 코드를 작성 할 수 있을 것이다.
파일을 저장 한뒤 자동 컴파일이 이루어지고 아래와 같이 에러가 표시 되었다.
ERROR Failed to compile with 1 errors friendly-errors 13:14:13
ERROR in ./pages/index.vue?vue&type=template&id=2a183b29& friendly-errors 13:14:13
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): friendly-errors 13:14:13
(Emitted value instead of an instance of Error)
Errors compiling template:
text "a = {{ a }}" outside root element will be ignored.
1 |
2 | <Tutorial/>
|
3 | a = {{ a }}
| ^^^^^^^^^^^
4 |
friendly-errors 13:14:13
@ ./pages/index.vue?vue&type=template&id=2a183b29& 1:0-197 1:0-197
@ ./pages/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js모듈에러가 발생했고 루트엘레먼트 root element 의 바깥 텍스트 a = {{ a }} 는 무시 될 것이라고 한다. 그렇다, Vue.js에서는 <template>의 직속 자식은 1개의 element 여야 한다는 규칙이 있다.
여기선 <Tutorial/>태그 그리고 "a = {{ a }}"스트링 의 두가지 엘레멘트가 있기 때문에 컴파일 불가다.
이를 해결 하기 위해선 <Tutorial/> 를 삭제 하거나
혹은 다른 단일 엘레멘트로 전체를 감싸 주면 된다.
우선 후자인 <div>를 하나 추가 해 전체를 랩핑 해보겠다.
코드는 아래와 같다.
<template>
<div>
<Tutorial/>
a = {{ a }}
</div>
</template>저장을 하자 아래와 같이 자동컴파일이 성공 하였다.
브라우저창을 확인 하니 텍스트가 올바르게 출력 된 것을 알 수 있다.
값은 잘 표시 되지만 기존 코드속
튜토리얼 컴포넌트가 너무 커서 방해가 되므로 삭제 해야겠다.
깔끔하다.
이제 해당 숫자를 누르면 값을 1씩 증가 시키는 함수를 추가 해보겠다.
함수를 추가 하는 방법은 아래이 <script> 태그 안에 methods: { ... } 형태로 표현 하면 된다.
foo 라는 이름으로 함수를 하나 추가 해보겠다.
(이름은 원하는데로 지으면 된다.)
그리고 a 변수를 +1 시키는 로직을 추가 해보자.
(변수명 a도 자신이 원하는 이름으로 하면 된다.)
작업이 끝난거나 다름없다.
남은 일은 텍스트를 마우스로 클릭하면 그 클릭 이벤트를 잡아서 foo()함수를 call하기만 하면 된다.
아래와 같이 부모 <div>에 @click 이벤트 attribute를 지정 해주자.
<template>
<div @click="foo">
a = {{ a }}
</div>
</template>
<script>
export default {
data: () => ({
a: 10,
}),
methods: {
foo() {
this.a += 1
}
}
}
</script>그리고 브라우저로 가서 텍스트를 클릭해보자.
아래 움짤처럼 한번 클릭 할 때마다 값이 1씩 리얼타임으로 변경 되는 것을 확인 할 수 있다.
중요한것은 이것이 리렌더링(re-rendering) 되는 것이 아닌, DOM Tree(돔트리)를 직접 변경 하는 것이라서 페이지 전환이 없어 깔끔한 구현이 된다는 것이다. 누르는 순간 빛과 같이 반응 한다. (SPA의 특징 중 하나) 이것이 리액티브 하다는 것이다.
불과 수년전에 javascript나 jQuery를 혹은 PHP등 다른 언어로 동적인 페이지를 작성하던 시절에 비하면 훨씬 직관적이고 간편한 코드로 동적인 페이지가 만들어졌다. 격세지감이다.
data와 methods 외에도 컴포넌트 구성요소는 name, created, mounted, watch, computed 등 다양하게 존재한다. 기회가 된다면 다음 포스팅들에서 살펴보기로 한다.
