무지개곰
article thumbnail
Published 2023. 8. 20. 21:23
[Vue3] Vue.js 구축 (Vue3, TypeScript) Vue

지금까지 React를 이용하여 프로젝트를 진행하였기에 새로운 도전을 하고 싶어 Vue를 이용한 프로젝트를 하기로 하였고 이번 프로젝트에서 Backend를 담당하였지만 Front의 코드를 이해한다면 의사소통에 도움이 될 것이라고 생각하여 Vue에 대하여 공부하기로 하였습니다.

목차

Vue의 특징과 장점

Vue 구축

Vue 파일 구조

느낀 

Vue의 특징과 장점

우선 Vue는 무엇인지 React와는 어떤 차이가 있는지 Vue에 대한 이해가 필요하다고 생각되어 Vue에 대하여 조사하였습니다.

Vue.js란?

Vue.js가 무엇인지 구글에 검색하면 아래와 같은 설명을 볼 수 있습니다.

  1. Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다.
  2. Vue.js는 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프런트엔드 프레임워크이다.
  3. Vue.js는 고성능의 싱글 페이지 애플리케이션을 구축하는데 이용가능하다.

참고 : https://ko.wikipedia.org/wiki/Vue.js

 

*프로그레시브 자바스크립트 프레임워크 : 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발된 것을 의미 - https://seungwongo.medium.com/vue-js-%EB%9E%80-8f865b34e53d

 

위의 정보만 본다면 React와 상당히 비슷하게 느껴집니다.

 

Microsoft는 Vue에 대한 특징으로 Vue는 MVVM모델 아키텍처를 사용한다고 설명하였습니다.

또한 Vue의 도구 패키지 관리자, Vue CLI, Nuxt.js, Vue 라우터, VueX 등을 소개하였습니다.

각 도구에 대한 설명입니다.

  • 패키지 관리자 : Vue에서 가장 많이 사용되는 패키지관리자에는 npm과 yarn 두 가지가 있습니다.
  • Vue CLI : 신속한 Vue.js 개발을 위한 표준 도구 키트로, Babel, PostCSS, TypeScript, ESLint 등을 바로 지원합니다.
  • Nust.js : 서버 측 렌더링 된 Vue.js 앱을 만들 수 있는 프레임워크입니다. 서버 측 렌더링은 SEO와 사용자인터페이스 응답성을 향상할 수 있습니다.
  • Vue 라우터 : 애플리케이션 URL을 Vue 구성 요소에 매핑할 수 있습니다.
  • VueX : Vue 앱을 위한 상태 관리 시스템입니다.

참고 : https://learn.microsoft.com/ko-kr/windows/dev-environment/javascript/vue-overview

 

Vue의 장점

  • 직관적이고 낮은 러닝커브
  • 재사용을 통한 애플리케이션 개발 기간 단축
  • 데이터 바인딩(Angular의 장점)과 가상 돔(React 장점)을 모두 가지고 있음
  • 여러 명이 개발 시 코드 규격을 맞추기 쉬움

데이터 바인딩 : 데이터와 웹화면의 요소가 서로 양 방향으로 연결되어 있어서, 어느 한쪽에 변경이 일어나면 연결되어 있는 다른 쪽에 자동으로 반영된다.

가상 돔 : 변화가 많은 화면을 DOM에서 직접 처리하는 방식이 아닌, 가상의 DOM을 만들어서 메모리에서 처리한 다음 실제 DOM과 동기화하기 위한 DOM

 

참고 : https://coreant.tistory.com/9

Vue 구축

Vue 공식 Docs : https://v2.ko.vuejs.org/v2/guide/installation.html

가벼운 구축

Vue는 HTML 파일에 아래의 코드를 추가하여 실행할 수 있습니다.

<script src = “https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

 

기본 ES 모듈을 사용하는 경우 이를 지원하는 ES 모듈 호환 빌드파일도 있습니다.

<script type=”module”>
import Vue from ‘https://cdn/jsdelivr.net/npm/vue@2.7.14/dist/vue.esm.browser.js’
</script>

대규모 애플리케이션 구축

Vue를 사용하여 대규모 애플리케이션을 구축할 때 NPM을 이용한 설치를 권장한다고 합니다.

 

설치 방법

  1. npm install vue
  2. npm install -g @vue/cli
  3. vue create 프로젝트 이름

위의 작업을 진행하면 아래와 같은 화면이 나옵니다.

Vue 3과 Vue 2의 차이는 Options API 사용과 Composition API 사용 차이라고 합니다.

앱을 만드는 방법과 몇 가지 문법에 차이가 있으므로 선택 시 유의하시길 바랍니다.

참고 : https://velog.io/@lire_eruel/TIL-Vue-2%EC%99%80-Vue-3%EC%9D%98-%EC%B0%A8%EC%9D%B4

 

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와 함께 사용해야 합니다.

- 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://v3-docs.vuejs-korea.org/guide/quick-start.html#using-vue-from-cdn

create-vue를 이용한 방법

설치가 완료되었다면 npm의 경우 npm run serve를 yarn의 경우 yarn run serve를 이용하여 실행하면 아래와 같은 화면이 나올 것입니다.

Vue 파일 구조

vue create의 Default를 통하여 앱을 생성하면 root폴더 안에 node_modules, public, src폴더가 생성됩니다.

src폴더를 보면 main.ts와 App.vue파일이 있고 components폴더 안에 HelloWorld.vue가 있습니다.

각 파일의 코드를 보며 분석하면 아래와 같습니다.

main.ts

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
  1. vue라이브러리로부터 createApp을 임포트 합니다.
  2. src폴더에 있는 App.vue의 App을 임포트 합니다.
  3. createApp의 매개변수로 App을 전달하고 mount(#app)을 통하여 id가 app인 요소로 App.vue의 내용을 마운트 합니다.

App.vue

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

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  1. template 태그 속의 내용이 App.vue가 나타내는 html요소입니다.
  2. template에서 HelloWorld라는 태그에 msg를 이용하여 화면에 나왔던 Welcome to Your Vue.js + TypeScript App을 띄우고 있습니다.
  3. script에서 lang을 통하여 typescript를 사용하는 것을 알려줍니다.
  4. vue의 defineComponent를 임포트 합니다.
  5. components폴더 속의 HelloWorld.vue를 HelloWorld로 임포트 합니다.
  6. 현재 파일의 component이름을 App으로 설정하고 components에 사용하고 있는 component를 입력하여 defineComponent로 export 합니다.
  7. style을 이용하여 #app의 스타일 즉 app이라는 id를 가지는 태그에 대한 style을 선언합니다.

HelloWorld.vue

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

실행된 화면을 제일 위에 보여드렸기에 template은 길이가 길어 생략하였습니다.

  1. <h1>{{msg}}</h1>는 template 중 일부입니다. App.vue에서 HelloWorld태그의 msg를 받아 h1태그의 값으로 사용합니다.
  2. script의 lang을 이용하여 TypeScript의 사용을 알립니다.
  3. vue의 defineComponent를 임포트 합니다.
  4. 전달할 props인 string타입의 msg를 defineComponent에 선언합니다.
  5. style scoped는 기존의 style과 다르게 해당 컴포넌트에만 스타일을 적용하기 위하여 사용합니다. 다른 컴포넌트와 style이 겹치지 않도록 하여 style을 주기 편리합니다.

느낀 점

새로운 프레임워크를 시작하려니 낯설었지만 React에 비하여 HTML을 사용하는 기분이 들어서 반갑기도 했습니다.

Vue를 공부하며 Vue에 대한 기본 지식을 채움으로써 Vue 개발자의 이야기에도 공감할 수 있는 기회를 얻었다고 생각합니다.

BackEnd를 목표로 하지만 Vue라는 것을 혼자 공부하며 분석함으로써 Back에서도 새로운 프레임워크를 공부하게 되더라도 할 수 있다는 자신감도 생겼습니다.

항상 알고 있는 것을 할 수 없기에 새로운 것을 배우는 것에 두려움을 없애고 스스로 발전하는 습관을 가지겠습니다.

저작자표시 비영리 변경금지

'Vue' 카테고리의 다른 글

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

무지개곰

@무지개곰

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

티스토리툴바