🔎 Vue.js

💬 ⭐ Vue란

• 효율적으로 사용자 인터페이스를 만들기 위한 자바스크립트 프레임워크이다. 컴포넌트 기반 개발이 가능하고, 양방향 데이터 바인딩을 통한 반응형 데이터 관리가 가능하며, 가상 돔을 이용한 효율적인 업데이트가 가능하다는 특징이 있다. 또한 템플릿 문법을 통한 직관적인 개발이 가능하다.

◽ Vue를 사용한 이유

• 낮은 러닝 커브와 직관적인 문법을 가지고 있으며, 양방향 데이터 바인딩을 통해 폼 처리가 용이하고, 공식 상태 관리 라이브러리와 라우터를 제공하여 개발 생산성이 높기 때문이다. 또한 Nuxt.js를 통한 SSR 개발이 가능하다.

◽ React와 Vue의 차이점

• React는 라이브러리이고 Vue는 프레임워크이다. React는 JSX 문법을 사용하는 반면 Vue는 템플릿 문법을 사용한다. React는 단방향 데이터 흐름을 가지지만 Vue는 양방향 데이터 바인딩을 지원한다. React는 함수형 컴포넌트와 Hook 중심으로 발전했고, Vue는 Options API와 Composition API를 모두 지원한다.

💬 ⭐ 양방향 데이터 바인딩(Two-Way Data Binding)

• 데이터와 뷰가 서로 연결되어 있어 한쪽이 변경되면 다른 쪽도 자동으로 업데이트되는 방식이다. Vue에서는 v-model 디렉티브를 통해 양방향 데이터 바인딩을 구현할 수 있다. 이를 통해 폼 입력 처리가 간편해지고 코드의 양을 줄일 수 있다.

단방향 vs 양방향

단방향 데이터 흐름(React)은 데이터 흐름을 추적하기 쉽고 디버깅이 용이하다는 장점이 있고, 양방향 데이터 바인딩(Vue)은 폼 처리가 간편하고 코드가 간결하다는 장점이 있다.

💬 템플릿 문법

• HTML 기반의 템플릿 문법으로, 디자이너와 협업이 용이하고 가독성이 높다. 이중 중괄호({{ }})를 통한 텍스트 보간, 디렉티브를 통한 조건부/반복 렌더링, v-bind를 통한 속성 바인딩 등이 가능하다.

💬 ⭐ 디렉티브(Directive)

• DOM을 조작하기 위한 특수한 속성으로, v- 접두사를 가진다.

◽ v-if / v-else-if / v-else

• 조건부 렌더링을 위한 디렉티브이다. 조건이 거짓일 때 DOM에서 완전히 제거된다.

◽ v-show

• 조건부 렌더링을 위한 디렉티브이다. 조건이 거짓일 때 display: none으로 숨김 처리된다. 토글이 빈번한 경우 v-if보다 효율적이다.

◽ v-for

• 리스트 렌더링을 위한 디렉티브이다. key 속성을 함께 사용하여 각 요소를 고유하게 식별해야 한다.

◽ v-model

• 양방향 데이터 바인딩을 위한 디렉티브이다. input, textarea, select 등의 폼 요소에서 사용된다.

◽ v-bind (:)

• HTML 속성을 동적으로 바인딩하기 위한 디렉티브이다. : 단축 표기법을 사용할 수 있다.

◽ v-on (@)

• 이벤트 리스너를 바인딩하기 위한 디렉티브이다. @ 단축 표기법을 사용할 수 있다.

💬 컴포넌트

• Vue에서 사용하는 재사용 가능한 독립적인 단위로, 자체적으로 데이터를 가지고 이 데이터에 따라 업데이트를 수행한다.

◽ ⭐ Options API vs Composition API

• Options API는 data, methods, computed, watch 등을 객체 형태로 정의하는 방식이고, Composition API는 setup 함수 내에서 ref, reactive, computed 등을 사용하는 방식이다.
• Options API는 구조가 명확하고 이해하기 쉽지만, 로직 재사용이 어렵고 코드가 분산된다. Composition API는 로직을 재사용하기 쉽고 타입스크립트 지원이 우수하며 관련 로직을 함께 배치할 수 있다.

◽ 컴포넌트 생명주기(라이프 사이클)

• 컴포넌트는 생성, 마운트, 업데이트, 언마운트라는 생명주기를 가진다.
• Options API: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted 등의 생명주기 훅을 제공한다.
• Composition API: onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted 등의 생명주기 훅을 제공한다.

💬 ⭐ props와 emit

• props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터이고, emit은 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달하는 메서드이다.
• 자식 컴포넌트에서 props는 Read-Only, 즉 수정할 수 없다. 자식에서 부모로 데이터를 전달하려면 $emit을 통해 커스텀 이벤트를 발생시켜야 한다.

◽ Props Validation

• props에 타입, 필수 여부, 기본값, 유효성 검사 함수 등을 정의하여 props의 유효성을 검증할 수 있다.

💬 ⭐ Reactivity System(반응성 시스템)

• Vue의 핵심으로, 데이터의 변경을 감지하고 자동으로 뷰를 업데이트하는 시스템이다.
• Vue 2: Object.defineProperty를 사용하여 getter/setter를 통해 반응성을 구현한다. 배열의 인덱스 직접 수정이나 객체 속성 동적 추가를 감지하지 못하는 한계가 있다.
• Vue 3: Proxy를 사용하여 반응성을 구현한다. 모든 종류의 변경을 감지할 수 있고 성능이 개선되었다.

◽ ref와 reactive

• ref: 원시 타입이나 객체를 반응형으로 만들기 위한 함수이다. .value를 통해 값에 접근한다. (템플릿에서는 자동으로 언래핑되어 .value 없이 사용 가능)
• reactive: 객체를 반응형으로 만들기 위한 함수이다. .value 없이 직접 접근한다. 원시 타입에는 사용할 수 없다.

💬 ⭐ Computed vs Watch

• Computed: 의존하는 데이터가 변경될 때 자동으로 계산되는 속성이다. 결과값이 캐싱되어 의존 데이터가 변경되지 않으면 이전 값을 재사용한다. 반환값이 있고 동기적으로 동작한다.
• Watch: 특정 데이터의 변경을 감지하여 콜백 함수를 실행하는 함수이다. 캐싱되지 않고 변경될 때마다 실행된다. 비동기 작업이 가능하다.

◽ 사용 시점

• Computed는 여러 데이터를 조합하여 새로운 값을 계산할 때 사용하고, Watch는 데이터 변경에 따라 비동기 작업이나 부수 효과를 실행할 때 사용한다.

💬 가상 돔(Virtual DOM)

• Vue도 가상 돔을 사용하여 효율적인 업데이트를 수행한다. 변경 사항을 가상 돔에서 먼저 처리하고 diff 알고리즘을 통해 변경된 부분만 실제 DOM에 반영하여 성능을 최적화한다.

React의 가상 돔과의 차이점

React는 상태가 변경되면 전체 컴포넌트 트리를 다시 렌더링하고 비교 과정을 통해 변경된 부분을 찾는 반면, Vue는 반응성 시스템(Reactivity System)과 가상 돔을 결합하여 의존성 추적을 통해 어떤 컴포넌트가 업데이트되어야 하는지 미리 정확히 파악할 수 있다. 따라서 변경된 컴포넌트만 선택적으로 비교하여 불필요한 diff 연산을 줄인다. / 또한 Vue 3에서는 Compiler-informed Virtual DOM을 사용하여 정적 노드 호이스팅, 패치 플래그 등의 기술로 성능을 더욱 최적화한다. 이러한 이유로 Vue는 기본 성능이 더 우수하며 개발자가 별도의 최적화를 덜 신경써도 된다.

💬 ⭐ Vuex와 Pinia

• Vue의 상태 관리 라이브러리이다.

◽ Vuex

• 중앙 집중식 상태 관리 패턴 라이브러리로, state, getters, mutations, actions, modules로 구성된다.
• state: 중앙에서 관리하는 상태
• getters: state를 기반으로 계산된 값(computed와 유사)
• mutations: state를 변경하는 동기적인 메서드
• actions: 비동기 작업을 수행하고 mutations를 호출하는 메서드
• modules: store를 모듈화하여 관리

◽ Pinia

• Vue 3 공식 상태 관리 라이브러리로, Vuex의 차세대 버전이다. 더 간단한 API와 타입스크립트 지원이 우수하며, mutations 없이 actions만으로 상태를 변경할 수 있다. 모듈 구조가 더 직관적이다.

💬 Provide / Inject

• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방법으로, Props Drilling을 해결할 수 있다. 상위 컴포넌트에서 provide로 데이터를 제공하면, 하위 컴포넌트에서 inject로 데이터를 주입받을 수 있다.

💬 Slots

• 부모 컴포넌트에서 자식 컴포넌트로 템플릿 내용을 전달하기 위한 기능이다. 재사용 가능한 컴포넌트를 만들 때 유용하다.

◽ Slot의 종류

• 기본 슬롯: 하나의 슬롯만 사용
• Named Slots: 여러 개의 슬롯을 이름으로 구분하여 사용
• Scoped Slots: 자식 컴포넌트의 데이터를 부모 컴포넌트로 전달하여 사용

💬 KeepAlive

• 컴포넌트의 상태를 유지하고 캐싱하기 위한 내장 컴포넌트이다. 탭 전환 시 컴포넌트를 다시 렌더링하지 않고 캐시된 상태를 유지할 수 있다.

💬 Teleport

• DOM의 특정 위치로 컴포넌트를 이동시키는 기능이다. 모달, 토스트 등의 UI를 body나 특정 요소에 렌더링할 때 유용하다.

💬 Custom Directive

• 사용자 정의 디렉티브를 만들 수 있는 기능이다. DOM 조작이 필요한 경우 재사용 가능한 디렉티브를 정의할 수 있다.

💬 Composables

• Composition API에서 재사용 가능한 로직을 추상화한 함수이다. React의 Custom Hook과 유사하다. 'use'로 시작하는 이름을 가지며 반응형 데이터와 로직을 반환한다.

💬 Vue Router

• Vue의 공식 라우팅 라이브러리로, SPA 개발을 위한 클라이언트 사이드 라우팅을 제공한다.

◽ Navigation Guard

• 라우팅 전후에 실행되는 훅으로, 인증 체크, 권한 확인, 데이터 로딩 등에 사용된다.
• 전역 가드: beforeEach, beforeResolve, afterEach
• 라우트별 가드: beforeEnter
• 컴포넌트 내 가드: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

◽ Lazy Loading

• 라우트 컴포넌트를 필요할 때만 로드하여 초기 로딩 속도를 개선하는 방식이다. Dynamic import를 사용하여 구현한다.

💬 SSR vs CSR

• Vue는 기본적으로 CSR 방식을 사용하지만, Nuxt.js를 통해 SSR 개발이 가능하다. SSR은 첫 로딩이 빠르고 검색 엔진 최적화에 유리하다는 특징이 있다.

🔎 Nuxt.js

💬 Nuxt.js란?

• Vue에 SSR, SSG, 자동 라우팅 등의 기능을 제공하는 웹 프레임워크이다. 파일 기반 라우팅을 지원하고 SEO 최적화에 유리하다.

◽ SSR(Server Side Rendering)

• 서버에서 완전한 HTML을 생성하여 전달하기 때문에 초기 로딩 속도가 빠르고 검색 엔진 최적화에 유리하다.

◽ SSG(Static Site Generation)

• 빌드 타임에 페이지를 미리 생성하여 정적 파일로 제공한다. 정적 사이트 호스팅이 가능하고 성능이 매우 우수하다. 콘텐츠가 자주 변경되지 않는 페이지에 적합하다.

◽ ISR(Incremental Static Regeneration)

• Nuxt 3에서 지원하는 방식으로, 정적 페이지를 주기적으로 재생성할 수 있다. SSG의 성능과 SSR의 동적 데이터 처리를 결합한 방식이다.

💬 Nuxt의 주요 기능

• 파일 기반 라우팅: pages 디렉토리의 파일 구조가 자동으로 라우트가 됨
• 자동 Import: 컴포넌트, Composables 등을 자동으로 import
• Middleware: 라우팅 전에 실행되는 코드를 정의
• Layouts: 페이지의 공통 레이아웃을 정의
• Plugins: Vue 인스턴스에 기능을 추가