[Vue3] Vue를 TypeScript로 사용하기 (생성 시 옵션 설정)

Vue 문법을 공부하기 위하여 Vue 파일을 작성하였더니 오류가 끊이지 않았습니다. Vue에 TypeScript를 설정하는 방법을 다시 찾아보니 잘못된 부분이 있어 어제의 글도 수정하였습니다.

Vue를 생성할 때 유용한 옵션 설정에 대하여 추가로 알게 된 것을 정리하였습니다.

목차

Vue 생성 옵션 설정

파일 tree

파일 분석

느낀 점

---

Vue 생성 옵션 설정

TypeScript를 사용하는 Vue 생성

검색을 통하여 알게 된 방법과 공식 사이트에서 알려준 방법 두 가지를 소개드립니다.

vue create 후  Manually select features 선택

방향키로 Typescript로 이동 후 스페이스바로 선택

 

이후에 나오는 설정은 아래와 같습니다. 

- Use class-style component syntax? N

클래스 스타일의 컴포넌트 문법을 사용할 것인지 선택하는 것으로 클래스 스타일 컴포넌트 문법은 Vue는 컴포넌트를 클래스로 작성하는 방식을 의미합니다.

- Use Babel alongside TypeScript (required for modern mode, auto-detected ploy fills, transpiling JSX)? Y

TypeScript와 함께 Babel을 사용할지 여부를 묻는 질문으로 모던 모드, 자동으로 감지되는 폴리필, JSX 변환을 위한 Babel을 TypeScript와 함께 사용해야 합니다.

- Use history mode for router? : Y

Vue.js에서 라우팅을 관리하기 위한 공식 라이브러리 Vue Router를 사용합니다

- Pick a CSS pre-processor Sass/SCSS

프로젝트에서 사용할 CSS 전처리기를 Sass/SCSS로 선택합니다.

- Pick a linter / formatter config : ESLint + Prettier

코드 품질을 관리하기 위해 사용할 Linter 및 코드 포매터를 선택합니다. ESLint는 JavaScript 코드의 문제를 찾아내고 보고하는 정적 분석 도구입니다. 코드 품질과 일관성을 유지하기 위해 사용합니다. Prettier는 코드 포매터로 코드를 일관되게 포매팅하여 가독성을 향상합니다.

- Pick additional lint features : Lint on save

저장할 때마다 코드를 자동으로 Lint 체크하겠다는 의미입니다.

- Where do you prefer placing config for Babel, ESLint, etc.? In package.json

Babel, ESLint 등의 설정 파일을 어디에 두고 싶은지 선택합니다. package.json에 저장을 선택합니다.

- Save this as a preset for future projects? Y

현재 설정을 향후 프로젝트에서 사용할 수 있도록 프리셋으로 저장합니다. 다음에 다시 생성할 때 위의 설정 값으로 생성할 수 있습니다.

- Save preset as : vue basic

프리셋 이름을 설정합니다.

 

선택하는 내용은 출처사이트에서 참고하였고 각각의 의미는 검색을 통하여 조사하였습니다.

참고 : https://ryu-e.tistory.com/44

참고 :  https://okayoon.tistory.com/entry/Vue3Typescript%ED%95%A0%EC%9D%BC%EB%AA%A9%EB%A1%9D%EC%9D%84%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9CVue3%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90-01

---

파일 tree

파일 tree는 아래와 같습니다.

src

 ├ components

 │  └ HelloWorld.vue

 ├ router

 │  └ index.ts

 ├ store

 │  └ index.ts

 ├ views

 │  ├ AboutView.vue

 │  └ HomeView.vue

 ├ App.vue

 └ main.ts

저의 생각으로는 각 페이지는 views의 vue가 담당하고 페이지에 필요한 component는 components에 작성하는 것 같습니다.

---

파일 분석

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");

기존과 동일한 방식이지만 router와 store을 사용하기 위하여 중간에 use를 이용하여 store과 router를 추가합니다.

---

App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

style은 생략하고 설명드리겠습니다.

1. <nav> 태그는 이용하여 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 내비게이션 링크들의 집합을 정의할 때 사용합니다.
2. <router-link> 태그는 to를 이용하여 이동할 path를 지정합니다. html로 렌더링 시 a태그로 변환됩니다.
3. <router-view> 태그는 현재 라우터가 제공하는 component로 렌더링 됩니다.

---

/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import HomeView from "../views/HomeView.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

router에 따라 어떤 component를 렌더링 할 것인지 작성하는 파일입니다.

 

routes에 path를 설정하고 component에 렌더링 될 component를 입력합니다.

component는 위에서 import 한 값을 입력하는 방법과 ()=> import()를 이용하여 설정할 수 있습니다.

---

 

/view/HomeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "HomeView",
  components: {
    HelloWorld,
  },
});
</script>

template에서 화면을 구성할 영역들을 나누고 HelloWolrd 같은 component를 채워 화면을 완성합니다.

1. HomeView도 페이지이지만 큰 component이므로 defineComponent를 임포트 합니다.
2. 사용할 component를 import 합니다.
3. defineComponent에 components 값으로 사용할 component를 입력합니다.
4. 작성한 HomeView를 export 합니다. component의 이름은 HomeView로 정하였습니다.

---

느낀 점

Default 값이 아닌 Manually select features로 필요한 기능을 선택하여 사용하려고 하니 문법보다 옵션과 파일 구조에 대한 공부를 하게 됩니다. 그냥 Vue를 사용하는 것보다 상당히 어렵게 느껴집니다.

장점은 feature을 직접 설정하기 위하여 더 많은 자료를 찾아보게 된다는 점과 router 설정이 완료된 프로젝트를 얻는 편리함이 있습니다.

문법을 공부하려고 한 날이었지만 오류와 부딪히여 공부하니 옵션의 의미와 문법만 보았을 때 알지 못했을 것 같은 views와 components폴더 구조, router에서 component를 import 하는 법, @를 이용한 경로 설정 등 더 많은 것을 알게 되었습니다.

공부를 하여도 끝은 없고 항상 일부만을 활용하는 것이기에 배우려는 자세와 자료를 찾아내는 능력을 기르는 기회였습니다.