vue로 개발을 하기 위해 공부하다보니 @, $, : 등 알 수 없는 기호들때문에 머리가 아팠다. 도데체 뭘 의미하는걸까... 리액트와 바닐라자바스크립트로 개발을 하다가 vue를 사용하려니 쉽다고는 하지만 그래도 처음이라 헷갈린다. 그래서 하나씩 찾아서 정리해보려고 한다.
1. $ (dollar) 의미
<template>
<v-app>
<v-main>
<v-app-bar elevation="3" flat>
<h2 class="mx-5" @click="$router.push('/')">MOVIE.WEB</h2>
<v-tabs background-color="deep-purple accent-4" center-active dark>
<v-tab class="mx-1" @click="$router.push('/search')">Search</v-tab>
<v-tab class="mx-1" @click="$router.push('/movie')">Movie</v-tab>
<v-tab class="mx-1" @click="$router.push('/about')">About</v-tab>
</v-tabs>
</v-app-bar>
<router-view />
</v-main>
</v-app>
</template>
가끔 보면 와 같이 this.$emit, this.$router.push() 등의 코드를 볼 수 있는데 이 때까지만해도 $가 어떤걸 의미하는지 모르고 썼던 것 같다. vue에서 router 하는 법을 검색했다가 다들 저렇게 쓰길래 썼던 건데 이제는 정확히 알고 써야 활용할 수 있을 것 같다.
$ 는 vue의 전역객체 속성을 의미하는데 private하게 사용하는 것이 아니라 public하게 사용하는 속성을 의미한다고 한다.
2. @ 의미
@ 는 지금까지 사용한 결과, 2가지 의미를 지니는데 첫번째는 절대 경로 설정에서 사용하는 것, 두번째로는 v-on의 줄임말, 이렇게 두가지였던 것 같다.
1) @ 절대경로 설정
첫번째로, 파일을 import 할 때 @로 시작하는 경로들을 어렵지 않게 찾아볼 수 있는데 이 부분은 설정을 해줬기 때문에 이렇게 사용할 수 있는 것이다. 폴더와 파일 셋팅이 복잡해지면 그에 따라 경로도 복잡해지기 때문에 절대 경로를 설정해주는 것이다.
<절대경로 설정을 하지 않았을 경우>
폴더 깊이가 깊어지면 깊어질수록 ../ 의 길이는 늘어난다.
<script>
import HelloWorld from "../../../components/HelloWorld.vue";
import Detail "../../../components/Detail.vue";
</script>
<절대경로 설정 예>
그래서 절대 경로를 설정해주어 @의 루트를 지정해주면 ../ 를 길게 쓸 필요가 없어진다.
<script>
import HelloWorld from "@/components/HelloWorld.vue";
import Detail "@/components/Detail.vue";
</script>
<설정 방법>
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const path = require("path");
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
});
2) v-on의 줄임 @
두번째로는 v-on을 @로 줄여서 쓸 수 있다는 것이다. 리액트에서는 이런게 없었는데 vue에서는 단축 표현을 많이 사용하는 것 같다. 위에서 사용했던 예시를 다시보면 click 앞에 @가 붙어있는 것을 볼 수 있다.
<template>
<v-app>
<v-main>
<v-app-bar elevation="3" flat>
<h2 class="mx-5" @click="$router.push('/')">MOVIE.WEB</h2>
<v-tabs background-color="deep-purple accent-4" center-active dark>
<v-tab class="mx-1" @click="$router.push('/search')">Search</v-tab>
<v-tab class="mx-1" @click="$router.push('/movie')">Movie</v-tab>
<v-tab class="mx-1" @click="$router.push('/about')">About</v-tab>
</v-tabs>
</v-app-bar>
<router-view />
</v-main>
</v-app>
</template>
리액트에서는 onclick이지만 vue에서는 v-on:click이 되는 것이다. 해당 부분은 이렇게 두가지로 사용할 수 있다.
# 기본
<v-tab class="mx-1" v-on:click="$router.push('/about')">About</v-tab>
# 약어 사용
<v-tab class="mx-1" @click="$router.push('/about')">About</v-tab>
3. : 의미
마지막으로 : 는 vue에서 정말 많이 보이는데 어떤 의미일까? 찾아보니 v-bind의 단축어라고 한다. v-bind는 .attr()과 비슷한 한 기능을 수행하는데 태그의 속성을 동적으로 변경할 때 사용한다고한다. 또한, 하위 컴포넌트로 props를 넘길 때 :props이름의 형태로 사용한다.
// Main.vue
<script setup lang="ts">
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
const data = ref({
name: "Lia",
age: 22,
});
</script>
<template>
<h2>메인 페이지</h2>
<HelloWorld :data="data">
<template v-slot:databox>
<button>클릭</button>
</template>
</HelloWorld>
</template>
