3. Vue 이해하기

1. 라우터

1-1.  라우팅(Route)

클라이언트 측 라우팅과 서버 측 라우팅은 웹 애플리케이션의 사용자 경험과 성능에 중요한 영향을 미치는 두 가지 다른 접근 방식이다. 이 두 방식의 주요 차이점은 페이지의 콘텐츠 로딩 방식과 사용자의 상호작용에 대한 응답 방식에 있다.

1-1-1. 서버 측 라우팅의 특징

1) 전체 페이지 새로고침: 사용자가 링크를 클릭할 때마다 전체 페이지가 새로고침된다. 이는 서버가 각 요청에 대해 새로운 HTML 페이지를 생성하고 전송하기 때문이다. 

2) 서버 부하: 각 페이지 요청은 서버에 새로운 요청을 생성하며, 이는 서버 부하를 증가시킬 수 있다.

3) SEO 최적화: 검색 엔진은 각 URL에 대해 별도의 HTML 페이지를 쉽게 크롤링하고 인덱싱할 수 있어 SEO에 유리하다.

4) 초기 로딩 시간: 전체 페이지를 로드해야 하므로 초기 로딩 시간이 길어질 수 있다.

1-1-2. 클라이언트 측 라우팅의 특징

1) 동적 콘텐츠 로딩: 클라이언트 측 자바스크립트가 브라우저의 URL 변경을 감지하고, 새로운 콘텐츠만을 동적으로 로드하여 페이지를 업데이트한다.

2) 향상된 사용자 경험: 전체 페이지 새로고침 없이 콘텐츠가 업데이트되므로 사용자 경험이 부드럽고 빠르다.

3) 초기 로딩 지연: 애플리케이션이 처음 로드될 때 필요한 모든 자바스크립트와 자원을 다운로드해야 하므로 초기 로딩 시간이 길어질 수 있다.

4) SEO 고려 사항: 클라이언트 측 라우팅은 전통적으로 SEO에 불리했으나, 현대적인 검색 엔진과 서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG) 기술의 발전으로 이 문제가 상당 부분 해결되었다.

1-2. Vue.js의 라우터

Vue.js를 사용하는 싱글 페이지 애플리케이션(SPA) 개발에서 vue-router는 중요한 역할을 한다. 이 라이브러리는 Vue.js에 특화된 공식 라우팅 솔루션으로, 클라이언트 측 라우팅을 구현하기 위해 설계되었다. vue-router를 사용하면 SPA에서 사용자의 탐색을 효율적으로 관리할 수 있다. 

{ 
    "semi": false,
    "bracketSpacing": true,
    "singleQuote": true,
    "useTabs": false,
    "trailingComma": "none",
    "printWidth": 80
}

1-2-1. vue-router의 주요 특징

1) 중첩된 라우트와 뷰: vue-router를 사용하면, 다양한 레벨의 중첩된 경로와 뷰를 쉽게 정의하고 관리할 수 있습니다. 이를 통해 복잡한 애플리케이션 구조를 효율적으로 다룰 수 있다.

2) 모듈식 컴포넌트 기반 라우팅: Vue 컴포넌트를 라우트에 연결하여, 각 URL에 대응하는 특정 컴포넌트를 렌더링할 수 있다.

3) 동적 라우팅: URL 파라미터를 사용하여 동적인 경로를 생성할 수 있으며, 이를 통해 사용자별 또는 상황별로 커스터마이즈된 뷰를 제공할 수 있다.

4) 프로그래매틱한 탐색 지원: 코드 내에서 라우터의 API를 이용해 탐색을 제어할 수 있다. 예를 들어, 사용자가 특정 작업을 완료한 후 자동으로 다른 페이지로 리디렉션하는 것이 가능하다.

5) 히스토리 모드: HTML5 History API를 사용하여 페이지를 새로고침하지 않고도 탐색을 관리할 수 있다. 이를 통해 더 자연스러운 사용자 경험을 제공할 수 있다.

6) 라우트 가드: 특정 경로에 대한 접근을 제어할 수 있는 기능을 제공한다. 예를 들어, 인증되지 않은 사용자가 특정 경로에 접근하는 것을 방지할 수 있다.

1-2-2. 문서와 리소스

vue_router을 사용하기 위해서는 공식 문서를 참조하는 것이 가장 좋습니다. 공식 문서는 다음과 같은 정보를 제공한다.

1) 설치 및 설치 방법

2) 라우트 정의 및 관리 방법

3) 중첩 라우트, 동적 라우트, 네임드 뷰 등의 고급 기능

4) 라우트 가드와 같은 보안 기능

5) 성능 최적화 방법 

공식 문서는 Vue Router 공식 웹사이트에서 확인할 수 있다. Vue 개발자 커뮤니티에서도 추가적인 가이드와 팁을 얻을 수 있으며, 다양한 예제와 튜토리얼을 통해 실제 사용 사례를 학습할 수 있다.

2. 싱글 페이지 컴퍼넌트

Vue의 싱글 파일 컴포넌트(Single-File Components, SFC)는 모던 웹 개발에서 중요한 개념이다. SFC는 .vue 확장자를 가진 파일로, 하나의 파일 안에 HTML, JavaScript, CSS를 모두 포함할 수 있다. 이는 Vue.js에서 컴포넌트 기반 개발을 촉진하고, 개발 효율성과 유지보수성을 크게 향상시킨다.

2-1. SFC의 장점

1) 모듈화된 구조: HTML, JavaScript, CSS가 한 파일 안에 있어서 컴포넌트와 관련된 모든 코드를 쉽게 관리할 수 있다.

2) 사용 목적에 따른 구성: 각 컴포넌트는 독립적인 기능을 수행하며, 관련 로직과 스타일을 함께 묶어 구조화할 수 있다.

3) 컴파일 시간 최적화: Vue 컴파일러는 템플릿과 스크립트를 교차 분석하여 컴파일 시간을 최적화한다. 

4) 향상된 개발 경험: IDE 지원으로 인한 자동 완성 및 유형 검사 기능을 포함하여 개발자 경험을 향상시킨다.

5) HMR 지원: 핫 모듈 교체를 통해 개발 중에 컴포넌트를 실시간으로 업데이트 할 수 있다.

6) 타임 컴파일 비용 제거: SFC는 사전 컴파일되어 런타임에서의 컴파일 비용을 줄인다. 

2-2. SFC 사용의 필요성

SFC를 사용하기 위해선 빌드 시스템이 필요하다. Vue CLI나 Vite 같은 도구는 SFC의 컴파일과 번들링을 자동화하여 개발 과정을 단순화한다. 이는 싱글 페이지 애플리케이션(SPA), 정적 사이트 생성(SSG), 또는 일반적인 프론트엔드 개발에서 큰 장점을 제공한다.

2-3. 관심사 분리

전통적인 웹 개발에서 HTML, CSS, JS의 분리는 관심사의 분리 원칙을 따르는 것으로 여겨졌다. 하지만, SFC는 이를 컴포넌트 수준에서 재정의한다. 각 컴포넌트는 그 자체로 완전한 기능 단위를 형성하며, 관련된 마크업, 로직, 스타일을 함께 묶는 것이 더 응집력 있고 유지보수에 용이하다.

SFC는 Vue 생태계에서 중요한 부분을 차지하며, 모던 웹 개발의 트렌드를 반영하는 강력한 도구다. 그러나 개발자의 선호나 프로젝트 요구에 따라 JavaScript와 CSS를 별도의 파일로 분리할 수도 있다. Vue는 이러한 유연성을 제공하여 다양한 개발 방식을 지원한다.

3. 데이터 바인딩

"Generate Basic Vue Code": { "prefix": "vue-start", 
	"body": [ "<template>\n\t<div></div>\n</template>\n<script>\nexport default {\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\tsampleData: ''\n\t\t}\n\t},\n\tcreated() {},\n\tmounted() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>" ], 
	"description": "Generate Basic Vue Code" }

3-1. Text 바인딩

Vue.js의 템플릿 문법은 선언적으로 데이터와 DOM을 연결하는 강력한 방법을 제공한다. 이 문법은 가독성이 높고, HTML에 기반하여 쉽게 배울 수 있으며, Vue의 반응형 시스템과 함께 동작하여 효율적인 UI 업데이트를 가능하게 한다.

1) 텍스트 보간법

텍스트 보간법은 데이터를 HTML 템플릿에 삽입하는 가장 기본적인 방법이다. 이중 중괄호 {{ }}를 사용하여 Vue 인스턴스의 데이터를 템플릿에 바인딩할 수 있다.

<template>
  <span>메세지: {{ msg }}</span>
</template>

{{ msg }}는 Vue 인스턴스의 msg 속성의 현재 값으로 대체된다. 이 값은 msg 속성이 변경될 때 자동으로 업데이트된다.

2) HTML 출력

기본적으로 이중 중괄호는 값이 HTML이 아닌 일반 텍스트로 처리되도록 합니다. 그러나 때로는 실제 HTML을 출력하고 싶을 수도 있습니다. 이를 위해 v-html 디렉티브를 사용한다.

<template>
  <p>텍스트 보간법 사용: {{ rawHtml }}</p>
  <p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>
</template>

v-html 디렉티브는 지정된 데이터 속성 (rawHtml)의 값을 HTML로 해석하여 DOM에 직접 삽입한다. 이를 통해 다이나믹하게 HTML 콘텐츠를 렌더링할 수 있지만, XSS(cross-site scripting) 공격에 취약할 수 있으므로 신중하게 사용해야한다.

3) 디렉티브

Vue에서 v- 접두사를 가진 속성은 디렉티브이다. 디렉티브는 DOM에 특별한 반응적 동작을 적용할 수 있게 해주며, Vue의 핵심 기능 중 하나다. v-html외에도 v-if, v-for, v-on, v-bind 등 다양한 디렉티브가 있어, 다양한 상황에서 효과적인 데이터 바인딩과 DOM 조작을 가능하게한다.

4) 주의사항

 - 보안 : 

v-html을 사용할 때는 XSS 공격에 주의해야 합니다. 사용자로부터 입력받은 데이터를 v-html로 바인딩하기 전에 항상 적절한 방법으로 필터링 또는 이스케이프 해야 한다.

- 컴포넌트 사용 :

복잡한 UI는 재사용 가능한 컴포넌트를 통해 구성하는 것이 좋다. v-html은 간단한 HTML 콘텐츠를 렌더링하는 데 사용되지만, 복잡한 구조를 구현하는 데에는 적합하지 않는다.

3-2. 속성 바인딩

속성 바인딩은 Vue.js에서 중요한 개념 중 하나로, 엘리먼트의 속성을 Vue 인스턴스의 데이터와 동기화하는 데 사용된다.

1) 기본 v-bind 사용법

v-bind 디렉티브를 사용하여 HTML 속성을 Vue 인스턴스의 데이터에 바인딩할 수 있습니다. 예를 들어, 다음과 같이 div 엘리먼트의 id 속성을 Vue 인스턴스의 dynamicId 속성에 바인딩할 수 있다.

<template>
  <div v-bind:id="dynamicId"></div>
</template>

dynamicId의 값이 변경되면, div의 id 속성도 자동으로 업데이트 된다.

2) 단축 문법

v-bind는 자주 사용되므로 :를 사용하는 단축 문법을 제공한다.

<template>
  <div :id="dynamicId"></div>
</template>

3) 불리언 속성

v-bind는 불리언 속성에도 사용할 수 있습니다. 예를 들어, button 엘리먼트의 disabled 속성을 Vue 인스턴스의 isButtonDisabled 속성에 바인딩할 수 있다.

<template>
  <button :disabled="isButtonDisabled">버튼</button>
</template>

isButtonDisabled가 참값(truthy)이면 disabled 속성이 추가되고, 거짓값(falsy)이면 속성이 제거된다.

4) 여러 속성 동시 바인딩

v-bind를 객체와 함께 사용하여 여러 속성을 한 번에 바인딩할 수 있다.

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

객체를 v-bind와 함께 사용하면 다음과 같이 여러 속성을 한 번에 바인딩할 수 있다.

<template>
  <div v-bind="objectOfAttrs"></div>
</template>

코드를 더 간결하게 만들고, 여러 속성을 한 번에 관리하는 데 유용하다.

3-3. 디렉티브

Vue.js에서 디렉티브는 DOM 엘리먼트의 행동을 지시하는 특수한 토큰으로, v- 접두사로 시작합니다. 이들은 Vue의 반응성 시스템과 결합하여 DOM 업데이트를 자동화하고, 개발자가 DOM 조작을 명시적으로 코딩하지 않아도 되도록 해준다.

1) 주요 빌트인 디렉티브

  v-bind: HTML 속성을 Vue 인스턴스 데이터에 동적으로 바인딩합니다. 단축 문법은 :이다.

<!-- 전체 문법 -->
<a v-bind:href="url">링크</a>

<!-- 단축 문법 -->
<a :href="url">링크</a>

  v-on: DOM 이벤트를 수신하고 메소드를 호출합니다. 단축 문법은 @이다.

<!-- 전체 문법 -->
<button v-on:click="doSomething">클릭</button>

<!-- 단축 문법 -->
<button @click="doSomething">클릭</button>

 v-if, v-else-if, v-else: 조건부 렌더링을 위해 사용된다. 이 디렉티브는 표현식의 값에 따라 엘리먼트를 추가하거나 제거한다. 

<p v-if="seen">보이기</p>

 v-for: 배열이나 객체의 항목에 대해 반복하여 엘리먼트를 렌더링한다.

<li v-for="item in items">{{ item.text }}</li>

v-html: HTML을 엘리먼트에 직접 삽입한다.

<div v-html="rawHtml"></div>

2) 디렉티브의 인자

일부 디렉티브는 콜론(:) 다음에 "인자"를 받아 특정 행동을 지시한다. 예를 들어, v-bind는 엘리먼트의 특정 속성에 값을 바인딩하고, v-on은 특정 이벤트를 수신한다.

3) 디렉티브의 표현식

디렉티브의 값은 대부분 단일 JavaScript 표현식이다. 이 표현식은 Vue의 반응성 시스템에 의해 관찰되며, 데이터가 변경될 때 디렉티브가 적용된 DOM 엘리먼트에 자동으로 반영된다.