0songha0

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

Vue.js

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

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

Vue는 하나의 페이지에서 Javascript로 동작하는 SPA (싱글 페이지 애플리케이션) 입니다.
index.html 로드 후, main.js에서 루트 컴포넌트를 생성하여 div에 마운트합니다.

SSR, CSR 차이

SSR (서버 사이드 렌더링) 서버가 완성된 HTML 문서를 만들어서 클라이언트에 전달하는 방식입니다.

예시 : JSP, PHP, ASP.NET 등
CSR (클라이언트 사이드 렌더링) 서버는 최소한의 HTML, Javascript 파일만 클라이언트에 보내고,
브라우저가 Javascript로 HTML을 생성해 화면을 구성하는 방식입니다.
페이지 새로고침 없이 부드러운 화면 전환이 가능합니다.

예시 : Vue.js, React.js, Angular.js 등

컴포넌트란?

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/components/app (global, layout, common) 앱 전역에서 재사용하는 UI 컴포넌트들을 저장하는 폴더입니다.
전역 컴포넌트명 앞에는 'App'을 접두사로 붙이는 것이 관례입니다.
src/composables 여러 페이지에서 재사용할 수 있는 컴포저블 함수 모듈 파일들을 저장하는 폴더입니다.
src/directives 전역 커스텀 디렉티브 파일들을 저장하는 폴더입니다.
v-focus, v-scroll 등 여러 컴포넌트에서 공통으로 사용할 디렉티브를 정의합니다.
src/layouts 헤더, 푸터 등 공통 레이아웃 .vue 컴포넌트 파일들을 저장하는 폴더입니다.
src/plugins 앱 전역에서 사용할 플러그인 파일들을 저장하는 폴더입니다.
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 시 경로를 간결하게 작성할 수 있습니다.

CLI로 Vue 설치 (자동 세팅)

Vue 공식 템플릿 CLI로 Vue 프로젝트 생성 방법

npm init vue@latest
또는
npm create vue@3.11.2

전통적인 npm init 명령어보다 npm create 명령어가 요즘 더 자주 사용되는 방식입니다.
특정 create-vue 패키지 버전으로 Vue 프로젝트 생성이 가능합니다.
프로젝트명, TypeScript 사용 여부, JSX 사용 여부, Router 추가 여부, Pinia 상태관리 추가 여부, ESLint/Prettier 사용 여부 등 초기 설정을 지정할 수 있습니다.

Vite CLI로 Vue 프로젝트 생성 방법

npm create vite@latest 프로젝트명 -- --template vue

vite가 Vue 프로젝트 구조 및 설정 파일들을 자동으로 생성해줍니다.
@latest 옵션은 최신 버전 create-vite 패키지로 설치 및 실행을 뜻합니다.

설치 가능 패키지 버전 확인

npm show create-vite versions

설치 가능한 패키지 버전 목록을 확인하고, @버전으로 특정 버전을 명시하여 설치할 수 있습니다.

Vue 프로젝트 실행 방법

의존성 패키지 설치 (필수★)

npm install
또는
npm i

CLI로 설치 시, 프로젝트 폴더에서 위 명령어로 node_modules 폴더를 생성해야 합니다.
package.json 파일에 dependencies 또는 devDependencies로 정의된 의존성 라이브러리들이 설치됩니다.
package.json 파일 수정 시에는 위 명령어를 재실행해 의존성을 업데이트해야 합니다.
충돌이 발생하면 node_modules 폴더, package.lock.json 파일 삭제 후 다시 설치해야 합니다.

Vue 실행 스크립트 추가

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

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

Vue 프로젝트 실행

npm run dev

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

Vue 프로젝트 빌드 방법

Vue 빌드 스크립트 추가

"scripts": {
  "build": "vite build"
}

package.json 파일에 Vue 애플리케이션 빌드 스크립트를 등록합니다.

Vue 프로젝트 빌드

npm run build

빌드 결과물은 프로젝트 경로 dist 폴더에 HTML, JS, CSS 등 정적 파일로 생성됩니다.
Nginx, Apache, Netlify, Vercel, GitHub Pages 등 정적 서버에 배포할 수 있습니다.

크롬 Vue 디버깅 방법

vue Devtools 확장프로그램 설치

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

Vue 컴포넌트 구조 및 상태 확인

Vue 페이지 > 크롬 F12 > 우측 Vue 탭 > 좌측 Components 메뉴
현재 페이지 컴포넌트 구조를 DOM 형태로 보고, 각 컴포넌트 내부 변수 값들을 확인할 수 있습니다.

전체 라우터 정보 확인

Vue 페이지 > 크롬 F12 > 우측 Vue 탭 > 좌측 Pages 메뉴
현재 사이트 전체 라우터 URL 정보, 현재 위치한 URL을 확인할 수 있습니다.

Pinia 스토어 상태 확인

Vue 페이지 > 크롬 F12 > 우측 Vue 탭 > 좌측 Pinia 메뉴
현재 사이트 Pinia 스토어에 저장된 상태 변수 값들을 확인할 수 있습니다.

최신 글