Vue3 set up 가이드(기본 프로젝트 생성) (2/2)

이어지는 글

 

2023.04.06 - [Frontend/Vue3] - Vue3 set up 가이드(환경설치) (1/2)

Vue3 set up 가이드(환경설치) (1/2)

---

기본 프로젝트 생성

NPM/Vite를 이용한 기본 프로젝트 생성

Npm을 통해 vue를 설치

npm install vue@next

npm 커맨드를 이용할 때 g옵션(전역 설정)을 지정하지 않으면 node_modules라는 폴더를 생성하고 해당 폴더 내에 다운로드한 라이브러리를 위치시킨다.

npm을 이용하여 Vue를 설치하면 Webpack이나 Rollup과 같은 다양한 모듈 번들러를 이용해 프로젝트를 컴파일 할 수 있다. Vue3는 새로운 빌드툴인 Vite를 사용할 수도 있다.

 

note!

Vite란?

Vue3 개발 함에 있어 별다른 번들 생성 없이 ES Module을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴. 매우 빠른 HMR(Hot Module Replacement)을 제공한다. 서버의 시작속도가 매우 빠르며, 번들없이 모듈화된 컴포넌트의 수정사항을 브라우저로 볼 수 있다.

 

Vite로 프로젝트 생성

npm create vite@latest 프로젝트명

명령어 실행하면 템플릿을 생성하기 위한 몇가지 질문이 나온다.

• proceed (진행여부) y 선택
• 프레임워크 vue 선택
• javascript or TypeScript 중 선택

설치 후 프로젝트의 간단한 정보 및 의존성을 명시한 package.json 파일을 확인 할 수 있다. 해당 파일은 어떤 패키지를 설치해야 하는지 알려주는 역할을 하기도 한다.

package.json이 들어 있는 프로젝트 폴더에서 다음 명령어를 수행하여 필요한 의존 패키지들을 설치한다.

npm install

설치를 하면 해당 패키지 안에 node_modules라는 폴더가 생기고 많은 패키지들이 설치되었음을 확인 할 수 있다.

아래 명령어를 수행하면 package.json내 script 속성에 명시된 vite가 npx를 통해서 실행이 된다. Vite는 개발 서버를 실행시켜 아래와 같은 주소로 접속을 할 수 있게 해준다.

note!

npm? npx? (참고 사이트 : https://seizemymoment.tistory.com/106)

• npm : node.js의 자동화 된 의존성과 패키지 관리를 위한 패키지 매니저이다. 패키지 설치와 버전관리를 제공한다.
• nnpx : npm 5.2.0 버전부터 추가된 node.js 패키지를 실행시키는 하나의 도구이다. 패키지의 실행을 제공하는데, 패키지의 최신버전의 파일을 불러와 설치하여 실행시키고 실행된 이우에 해당 페키지를 제거하는 방식이다.
  
  
• 그래서?
  
  업데이트의 경우 npm은 일일히 업데이트를 해줘야하기 때문에 모듈이 많아 업데이트가 잦은 경우 npx를 이용해 설치하는것을 권장하기도 한다.

npm run dev

ES 모듈을 하나의 번들로 컴파일하는 작업을 진행하기 위해서 다음 커맨드를 이용한다.

npm run build

Vite는 기본적으로 Rollup(Rollup.js, 번들링 모듈)을 이용하여 번들을 생성한다. 별다른 설정이 없다면 dist 폴더가 생성되고 그 아래에 번들화된 js 파일과 html, css 그리고 asset 파일들이 생성된다.

Vite 기본 프로젝트 구성

• index.html : Vue 컴포넌트들을 포함할 수 있는 루트 엘리먼트인 div 태그를 하나 가지고 있다.
  

  

  
  해당 div 엘리먼트는 app라는 id값을 가지고 있는데, 이 id는 Vue 컴포넌트들이 어느 곳에 포함이 되어야 하는지 알 수 있게 하는 매우 중요한 단서이다. 따라서 해당 id값을 변경한다면 웹 애플리케이션이 제대로 돌아가지 않는다.
  루트 엘리먼드가 생성되고 나면 main.js라는 자바스크립트 파일을 불러온다.

 

• main.js : 해당 파일은 아래와 같이 구성되어 있다.
  

  

  
  처음 두 줄은 프로젝트 구성에 필요한 항목들을 불러오는 코드로써, 루트 컴포넌트를 구성할 App.vue 파일 그리고 vue 모듈로부터 각각 필요한 자원을 불러온다. vue 모듈로부터 createApp 함수를 불러오고, App.vue로부터는 App 컴포넌트를 불러온다.
  그리고 마지막 createApp 함수를 이용하여 애플리케이션 인스턴스를 생성하고 id값이 app인 태그에 마운트시킨다.
• Vue2까지는 Vue 인스턴스를 생성할 때 new Vue({})와 같이 코드를 작성하였고, 이는 Vue 자체의 인스턴스를 생성하는 것인 만큼 여러 개의 독립된 Vue 인스턴스 생성을 불가능하게 했다.
• App.vue : 컴포넌트에 대한 다양한 정보를 하나의 파일에 담고 있는 SFC(Sing-FileComponents)이다. 이러한 SFC를 구성하는 파일은 vue라는 확장자를 가지며 크게 HTML, DOM 구조를 나타내는 template 영역, CSS 스타일 코드를 가지는 style 영역, 그리고 스크립트를 가질 수 있는 script 영역으로 구성되어 있다.
  

  

  • template 영역 : HTML을 기반으로 DOM을 구성하면 된다. 이 때 script 항목에서 선언된 변수를 이용해 선언적 렌더링을 구현할 수 있다. Vue는 모든 선언적 변수의 값을 DOM에 즉시 반영하지 않고 가상 노드에 먼저 반영한 후 최종적으로 완성된 DOM을 브라우저가 렌더링하게 한다. 이는 DOM에 빈번한 업데이트가 일어나지 않기 때문에 실제 애플리케이션의 실행속도를 높여준다.
  • script 영역 : HelloWorld.vue라는 SFC에 정의된 HelloWorld라는 Component를 import하고 있다. 여기서 중요한 점은 components 옵션을 이용해 HelloWorld 컴포넌트를 지정하지 않는다는 것이다. 이것은 <script setup>이라는 Vue의 신규 기능으로 가능한데, <script setup>이 내부적으로 <template>을 render() 함수로 변경하기 때문에 명시적으로 변수나 컴포넌트를 노출시킬 필요가 없는 것이다.
    

    

    
    위 HelloWorld.vue 소스를 살펴보면 Vue2까지만 해도 <template> 태그 내에는 하나의 루트 태그만 존재할 수 있었으나, Vue3에서는 이러한 제약을 공식적으로 풀어준것을 확인 할 수 있다. 따라서 무의미하게 <div>를 template의 루트 엘리먼트로 사용하는 것은 더 이상 하지 않아도 된다.
• style scoped : <style>은 CSS를 구성할 수 있는 곳인데, scoped라는 속성을 사용하지 안흥면 정의한 CSS가 애플리케이션의 전역에 적용된다. 따라서 component내에서만 적용되게 하기 위해서는 scoped 속성을 꼭 써줘야 한다.
• package.json : 프로젝트 정보 및 의존 패키지 모음
• package-lock.json : 공동 프로젝트에서 의존성 패키지의 버전이 동일해질 수 있도록 관리
• vite.config.js : Vitejs1, Vitejs2 문법이 다르므로 주의 할 것!

 

Vite Alias 생성

2020년 5월 Vite는 공식적으로 Alias를 지원하게 되었다. Alias를 이용하면 대규모 프로젝트를 진행할 때 각 파일의 경로를 모두 적어줘야 하는 불편함을 해소해 준다. Alias를 구성하기 전에 경로를 생성할 때 도움을 줄 수 있는 path 라이브러리를 다음 명령어를 통해 설치한다.

npm install path

설치 후 루트 폴더에 vite.config.js 파일에 아래 코드를 작성한다.

// (Vitejs2)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from path

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '/@': path.resolve(__dirname, './src'),
      '/@components': path.resolve(__dirname, './src/components'),
      '/@app_modules': path.resolve(__dirname, './src/modules'),
      '/@store': path.resolve(__dirname,"./src/store"),
    }
  },
  plugins: [vue()],
})

const path = require('path')

module.exports = {
  alias: {
    '/@/': path.resolve(__dirname, './src'),
    '/@components/': path.resolve(__dirname, './src/components'),
  }
}

/// (Vitejs)
const path = require('path')

module.exports = {
  alias: {
    '/@/': path.resolve(__dirname, './src'),
    '/@components/': path.resolve(__dirname, './src/components'),
  }
}

이렇게 Alias를 하면 컴포넌트를 불러올 때 fullpath를 적을 필요 없이 /@components/Component.vue라고 할 수 있다.

 

독립형 Vue-devtools 연동

Standalone Electron Vue-devtools 설치

브라우저 앱을 사용하지 않는 개발자라면 독립형 일렉트론 애플리케이션으로 Vue devtools를 사용할 수 있다. Devtools 버전이 낮을 경우 Vue3를 지원하지 않기 때문에 반드시 6.0.0-beta.2 이상을 사용하길 권장한다.(버전 확인 : https://www.npmjs.com/package/@vue/devtools?activeTab=versions)

npm install -g @vue/devtools@버전

독립형 Vue-devtools 연동

아래 명령어로 실행시킨다.

vue-devtools

Vue Developer Tools가 실행되면 아래와 같은 창이 뜬다.

Add의 주소를 복사하여 프로젝트 내 index.html <head> 태그의 마지막에 추가한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <script src="http://localhost:8098"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

VS Code Terminal에서 터미널을 더 실행한 후 개발용 서버를 실행하여 애플리케이션을 돌아갈 수 있도록 한다.

브라우저에서 애플리케이션이 실행 되면 count 버튼을 클릭해보자. 아래와 같이 count가 변경되는 것을 devtool에서도 확일 할 수 있다.

크롬 Vue-devtools 실행

실행하는 법에 대해 이어서 작성한다.

크롬 우측 상단 퍼즐 모양의 확장 프로그램을 선택하면 설치한 vue-devtools가 보인다. 핀 버튼을 클릭해 고정 시킬 수도 있다.

고정 후 브라우저로 애플리케이션을 확인해 보면 해당 확장 프로그램이 활성화 된 것을 확인 할 수 있다.(Vue로 개발된 프로젝트의 경우 활성화)

F12를 눌러 개발자 도구를 열면 메뉴 좌측에 Vue가 생겨난 것을 확인 할 수 있다. 해당 탭에서 위와 똑같이 count의 변화를 확인 할 수 있다.

참고 서적

• 한 권으로 배우는 Vue.js 3 웹 애플리케이션 개발 기초부터 실전까지
  
  저자 : 김동혁
  
  출판 : 영진닷컴
  
  발행 : 2021.09.10.
  
  (네이버 쇼핑 : https://search.shopping.naver.com/book/catalog/32445823246)
  
  (코드 : https://github.com/dongprojectteam/vue3_examples)