0songha0

Vue 개념 및 구조 / Vue.js 설치 및 실행 방법 / Vue 디버깅 방법

Vue.js

컴포넌트 단위로 UI를 구성하는 프론트엔드 프레임워크입니다.
기존 Javascript와 달리, 컴포넌트를 재사용해 중복 코드를 줄일 수 있습니다.

DOM을 직접 가져와서 데이터를 수동 할당 및 업데이트 해야 하는 Javascript와 달리,
Vue는 data에 선언한 값을 템플릿 구문에 바인딩 해두면 DOM에 자동 반영하고 렌더링 합니다.

컴포넌트란?

HTML, CSS, Javascript를 캡슐화하여 재사용 가능한 UI 단위입니다.
SPA는 앱 루트 컴포넌트 안에 컴포넌트들을 배치해 화면을 구성하는 컴포넌트 기반 아키텍처입니다.

Vue API 종류

Options API Vue 2에서 주로 사용되던 방식입니다.
data, methods, mounted 등 타입별 옵션 객체들에 로직을 분산해 구현합니다.
Composition API Vue 3에서 도입되어 공식적으로 사용이 권장되는 API입니다.
Options API의 연관 로직 분산 문제가 개선되었고, Options API와 혼용도 가능합니다.
Composable 함수로 공통 로직을 추출해 재사용 가능하다는 장점이 있습니다.
setup 함수 내에서 ref, reactive, computed 등 함수를 사용하여 로직을 구현합니다.

Vue API 문법 문서

Vue 프로젝트 기본 구조

node_modules npm install 시 package.json 파일 내 의존성 라이브러리들이 설치되는 폴더입니다.
public 파비콘 등 빌드 없이 배포될 정적 리소스들을 저장하는 폴더입니다.
src/assets Webpack, Vite 빌드 도구에 의해 처리될 수 있는 정적 리소스들을 저장하는 폴더입니다.
src/components 여러 페이지에서 재사용할 수 있는 .vue 컴포넌트 파일들을 저장하는 폴더입니다.
src/layouts 헤더, 푸터 등 공통 레이아웃 .vue 컴포넌트 파일들을 저장하는 폴더입니다.
src/views 라우터에 연결되는 페이지 단위 .vue 컴포넌트 파일들을 저장하는 폴더입니다.
src/App.vue Vue 앱 최상위 루트 컴포넌트입니다.
다른 컴포넌트들이 App 컴포넌트 안에 포함됩니다.
src/main.js Vite가 앱의 진입점으로 사용하는 JavaScript 모듈입니다.
index.html 내부에 script 태그로 import 됩니다.
main.js 내에서는 App.vue 루트 컴포넌트 정의를 import 하고 있습니다.
CreateApp()으로 생성된 앱 인스턴스를 index.html의 #app div에 mount 합니다.
.eslintrc.cjs ESLint 설정 파일입니다.
코드 스타일 가이드 기반 문법 검사 규칙, 플러그인, 환경 등을 설정합니다.
index.html Vite 개발 서버가 HTML 진입점으로 사용하는 템플릿 파일입니다.
package-lock.json npm install 시 자동 생성되는 의존성 버전, 트리 구조 기록 파일입니다.
package.json 프로젝트 정보, 스크립트, 의존성 라이브러리 설정 파일입니다.
vite.config.js vite 실행 시 참조되는 vite 설정 파일입니다.
플러그인, 경로 alias, 서버 설정 등을 정의합니다.

Vue 설치 방법

CDN으로 Vue 설치

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

HTML에 Vue CDN script 추가 시 즉시 Vue 사용이 가능합니다.
작은 프로젝트 또는 간단한 테스트 시 적합한 방법입니다.

npm으로 Vue 설치 (수동 세팅)

npm init -y
npm i vue
npm i vite
npm i @vitejs/plugin-vue

npm 명령어 사용 시에는 로컬에 Node.js가 설치되어 있어야 합니다.
프로젝트 루트에서 npm init 시 package.json 파일이 생성되고, npm 기반으로 프로젝트가 초기화됩니다.
이후 Vue.js 프레임워크, 개발서버 및 빌드 도구 vite, vite에서 vue 파일 처리를 위한 플러그인을 설치합니다.
이렇게 설치하면 프로젝트 구조, HTML 템플릿, vite 설정 파일을 수동으로 작성해야 합니다.

vite 설정 파일 생성

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

import { fileURLToPath, URL } from 'url'

export default defineConfig ({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Vue 프로젝트 루트에 vite.config.js 파일을 생성해야 vite 실행이 가능합니다.
alias 설정으로 ./src 경로를 @로 대체하여, import 시 경로를 간결하게 작성할 수 있습니다.

vite CLI로 Vue 설치 (자동 세팅)

npm init vue@latest
// 프로젝트명, TypeScript 사용 여부, JSX 사용 여부, Router 추가 여부, Pinia 상태관리 추가 여부, ESLint/Prettier 사용 여부 등 초기 설정을 지정할 수 있습니다.

또는

npm create vite@latest 프로젝트명 -- --template vue
// vite가 Vue 프로젝트 구조 및 설정 파일들을 자동으로 생성해줍니다.

@latest 옵션은 최신 버전 설치 및 실행을 뜻합니다.

의존성 모듈 설치 ★

npm install

CLI로 설치 시, 프로젝트 폴더로 이동해서 node_modules 폴더를 생성합니다.
package.json 파일에 dependencies로 정의된 의존성 라이브러리들이 설치됩니다.

Vue 프로젝트 실행 방법

Vue 실행 스크립트 추가

"scripts": {
  "dev": "vite"
}

package.json 파일에 dev 프로파일 실행 시 vite 개발서버 실행 스크립트를 등록합니다.

Vue 프로젝트 실행

npm run dev

로컬에서 vite 개발 서버를 실행하여 브라우저에서 Vue 프로젝트에 접근할 수 있습니다.

크롬 Vue Devtools 디버깅 방법

vue Devtools 확장프로그램 추가

구글 > Chrome 웹 스토어 > vue.js devtools 검색 > Vue.js devtools 선택 > Chrome에 추가 > 확장 프로그램 추가

vue 변수 확인

크롬 F12 > Vue 탭 > …

렌더링 영역 표시

크롬 F12 > Vue 탭 > 가장 안쪽 탭 우측 점 3개 > Highlight updates 토글 ON
Vue 컴포넌트 렌더링 시 하이라이트 표시되는 설정입니다.

최신 글