2. Vue.js

1. Vue.js 란?

Vue.js는 현대 웹 개발에 널리 사용되는 직관적이고 강력한 JavaScript 프레임워크입니다. 주로 싱글 페이지 애플리케이션(SPA) 및 인터랙티브한 웹 인터페이스 개발에 쓰인다.

1-1. Vue.js의 주요 특징

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    숫자 세기: {{ count }}
  </button>
</div>

1-1-1. 선언적 렌더링 (Declarative Rendering)

1) 개념 : '선언적 렌더링'은 개발자가 애플리케이션의 상태와 UI를 어떻게 보이게 할 것인지 '선언'하는 방식으로 작업하는 것을 의미한다. 이는 명령적 렌더링과 대비되는 개념으로, 명령적 렌더링은 개발자가 UI를 단계별로 어떻게 변경할 것인지를 명시하는 방식이다.

2) Vue.js에서의 구현: Vue.js는 객체의 속성을 추적하여 종속성을 관리한다. 데이터 객체의 어떤 속성이 업데이트되면, Vue는 자동으로 이를 감지하고 관련된 DOM을 효율적으로 업데이트한다. 이는 데이터 바인딩과 관찰자 패턴을 기반으로 작동한다.

1-2. 프로그레시브 프레임워크(Progressive Framework)

Vue.js를 "프로그레시브 프레임워크(Progressive Framework)"라고 부르는 것은 그것이 개발자가 필요에 따라 점진적으로 채택하고 확장할 수 있음을 의미한다. Vue는 다양한 규모와 복잡성을 가진 프로젝트에 유연하게 적용할 수 있으며, 이는 프론트엔드 개발에서 중요한 장점이다.

1-2-1. Vue.js의 프로그레시브 특성

1) 점진적 채택: Vue는 기존 프로젝트에 부분적으로 통합되어 점진적으로 확장될 수 있다. 이는 기존의 웹사이트나 애플리케이션에 Vue를 손쉽게 추가할 수 있음을 의미한다.

2) 다양한 사용 사례:

 - 정적 HTML에 적용: Vue는 단순한 JavaScript 라이브러리로 사용되어 정적 HTML에 동적 기능을 추가할 수 있다.

 - 웹 컴포넌트: Vue는 웹 컴포넌트를 구축하고 기존 웹 애플리케이션에 통합하는 데 사용될 수 있다.

 - 싱글 페이지 애플리케이션 (SPA): Vue는 SPA를 구축하는 데 이상적인 도구다.

 - 서버 사이드 렌더링 (SSR): Vue와 같은 프레임워크를 사용하여 서버에서 렌더링된 페이지를 생성할 수 있다.

 - 정적 사이트 생성 (SSG): Vue는 정적 사이트 생성을 위한 도구와 잘 통합된다.

 - 다양한 플랫폼: Vue는 데스크톱, 모바일, WebGL 또는 터미널과 같은 다양한 플랫폼을 대상으로 사용될 수 있다.

3) 기본 지식 요구사항: Vue를 시작하기 위해 필요한 것은 HTML, CSS, JavaScript에 대한 기본 지식이 필요하다.

1-3. 싱글 파일 컴포넌트(Single-File Component, SFC)

싱글 파일 컴포넌트(Single-File Component, SFC)는 Vue.js에서 컴포넌트를 구축하는 일반적이고 효율적인 방법이다. .vue 확장자를 가진 파일로, 컴포넌트의 템플릿, 스크립트, 스타일을 하나의 파일에 함께 저장한다. 이 방법은 코드의 구조화, 유지보수 및 재사용성을 개선하는 데 도움이 된다.

1-3-1. 싱글 파일 컴포넌트의 구조

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">숫자 세기: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

1) 템플릿 섹션(<template> 태그)

 - HTML과 유사한 구조로, 컴포넌트의 DOM 템플릿을 정의한다.

 - Vue의 데이터 바인딩 및 디렉티브를 사용하여 동적인 UI를 생성한다.

2) 스크립트 섹션(<script>태그)

 - 컴포넌트의 JavaScript 로직을 포함한다.

 - 데이터, 메소드, 생명주기 훅 등 컴포넌트의 동작을 정의한다.

3) 스타일 섹션 (<style>태그)

 - 컴포넌트의 CSS 스타일을 정의한다.

 - scoped 속성을 사용하면 해당 컴포넌트에만 스타일이 적용되어 스타일의 충돌을 방지할 수 있다.

1-3-2. SFC의 장점

1) 코드의 명확성과 구조화: HTML, JavaScript, CSS가 하나의 파일 내에 구성되어 있어 컴포넌트의 구조를 쉽게 파악할 수 있다.

2) 재사용성: 컴포넌트를 쉽게 재사용할 수 있어 개발 효율성이 증가한다.

3) 유지보수의 용이성: 관련된 코드가 한 곳에 모여 있어 유지보수가 용이하다.

4) 툴링과 통합의 용이성: Vue CLI나 다른 빌드 도구와의 통합이 용이하며, 개발자 도구를 통한 디버깅이 쉽다.

1-3-3. Vue와 빌드 도구

Vue 프로젝트에서 SFC를 사용하기 위해서는 빌드 도구가 필요하다. Vue CLI는 이러한 설정을 간편하게 처리해주며, Webpack과 같은 모듈 번들러와 함께 사용된다. 이러한 도구는 .vue 파일을 웹 브라우저가 이해할 수 있는 JavaScript, HTML, CSS로 변환하는 역할을 한다.

1-4. API

Vue.js에서 컴포넌트를 작성하는 데 사용되는 두 가지 주요 API 스타일은 옵션 API와 컴포지션 API다. 각각은 다른 접근 방식을 제공하며, 개발자의 선호나 특정 프로젝트의 요구사항에 따라 선택할 수 있다.

1-4-1. 옵션 API

옵션 API는 Vue.js에서 초기부터 제공되던 방식이다. 이 스타일은 컴포넌트의 다양한 옵션(데이터, 메소드, 생명주기 훅 등)을 정의하는 객체 기반의 접근 방식을 사용한다.

 - 특징 

1) 구조화: data, methods, computed, watch, mounted 등과 같은 속성을 사용하여 컴포넌트의 기능을 구조화한다.

2) 직관적: JavaScript 객체의 속성으로 컴포넌트의 다양한 기능을 정의하므로, 직관적이고 알기 쉽다.

3) this 접근 : 컴포넌트 인스턴스를 this 키워드를 통해 접근한다.

1-4-2. 컴포지션 API

Vue 3에서 소개된 컴포지션 API는 더 유연하고 재사용 가능한 코드를 작성할 수 있게 해주는 새로운 방식이다.

 - 특징

1) 재사용성과 조직화: 로직을 함수로 분리하여 재사용 가능하고 조직화된 코드를 작성할 수 있다.

2) 반응형 참조: ref와 reactive 같은 함수를 사용하여 반응형 데이터를 생성한다.

3) 함수 기반 접근: 컴포넌트의 로직을 함수로 나누어 관리한다.

4) setup 함수: 컴포넌트의 시작점으로, 모든 컴포지션 API 로직이 이 안에서 실행된다.

1-4-3. 차이점

- 옵션 API: 전통적인 Vue.js 사용에 익숙한 개발자, OOP(객체지향 프로그래밍) 스타일을 선호하는 경우, 또는 작은 규모의 프로젝트에 적합하다.

 - 컴포지션 API: 재사용 가능한 로직을 많이 작성하는 경우, 대규모 프로젝트, 또는 함수형 프로그래밍 접근 방식을 선호하는 경우에 적합하다.

2. Vue.js 시작하기

2-1. Vue 프로젝트 생성하기

2-1-1. 프로젝트 스캐폴딩

1) npm init vue@latest 명령어를 사용하여 Vue 프로젝트를 생성합니다. 이 명령은 create-vue 도구를 설치하고 실행한다.

2) 생성 과정에서 프로젝트 이름 설정 및 여러 옵션(예: TypeScript, JSX, Vue Router, Pinia, Vitest, Cypress, ESLint, Prettier 등)을 선택할 수 있다.

2-1-2. 프로젝트 설정

1) 생성된 프로젝트 폴더로 이동합니다: cd <your-project-name>

2) 필요한 종속성을 설치합니다: npm install

3) 개발 서버를 시작합니다: npm run dev

2-1-3. IDE 설정

1) Visual Studio Code와 Volar 확장 프로그램을 사용하는 것이 권장된다. 다른 편집기를 사용할 경우에는 해당 편집기의 Vue 지원을 확인해야 한다.

2-1-4. 추가 리소스

1) 백엔드 프레임워크 통합, 빌드 도구 등에 대한 자세한 정보는 Vue의 툴링 가이드에서 확인할 수 있다.

2) 기본 빌드 도구인 Vite에 대한 자세한 정보는 Vite 문서에서 확인할 수 있다.

3) TypeScript를 사용하기로 결정했다면, TypeScript 사용 가이드를 확인해야 한다.

2-2. 프로덕션 빌드

1) 프로덕션에 앱을 배포할 준비가 되었을 때는 npm run build 명령어를 실행한다. 이 명령은 ./dist 디렉터리에 프로덕션용 앱 빌드를 생성한다.

2) 프로덕션 배포 방법에 대한 자세한 내용은 Vue의 프로덕션 배포 가이드에서 확인할 수 있다.

2-3. 주의사항

1) 생성된 프로젝트의 예제 컴포넌트는 옵션 API 대신 <script setup>과 컴포지션 API를 사용하여 작성되었습니다. 이는 Vue 3에서 권장되는 새로운 방식이다.

2-4. CLI를 사용한 Vue App 생성

vue create appname 명령어를 사용하여 Vue.js 애플리케이션을 생성하는 방법은 다음과 같습니다. 이 방법은 Vue CLI를 사용하여 새 Vue.js 프로젝트를 생성하고 초기화한다.

2-4-1. 전제조건

1) Vue CLI가 설치되어 있어야 한다. Vue CLI를 설치하려면 Node.js가 필요하다.

2) Node.js를 설치하지 않았다면, Node.js 공식 웹사이트에서 설치할 수 있다.

3) Vue CLI를 설치하려면, 명령줄에서 다음 명령을 실행합니다: npm install -g @vue/cli 

2-4-2. Vue.js 애플리케이션 생성

1) 프로젝트 생성

 - 명령줄에서 다음 명령어를 실행한다: vue create appname

- appname은 생성하려는 프로젝트의 이름이다. 원하는 이름으로 변경하여 사용해야 한다.

2) 설정 선택

 - 프로젝트 생성 과정에서 다양한 설정을 선택할 수 있다. 예를 들어, 기본 설정을 사용하거나, 수동으로 각 설정(예: Babel, ESLint, Unit Testing 등)을 선택할 수 있다.

3) 프로젝트 디렉토리로 이동

 - 생성된 프로젝트 디렉토리로 이동한다. cd appname

4) 개발 서버 시작

 - 개발 서버를 시작하려면, 다음 명령어를 실행합니다: npm run serve

 - 이 명령은 개발용 로컬 서버를 시작하고, 브라우저에서 애플리케이션을 볼 수 있게 해준다.

5) 브라우저에서 애플리케이션 확인

 - 명령줄에 표시된 URL(예: http://localhost:8080)로 브라우저에서 애플리케이션을 확인할 수 있다.