Vue.js 공식문서 1. Introduction

곰개구리·2024년 3월 11일

Vue.js 공식문서

목록 보기

1/4

Vue.js 공식문서를 공부하면서 이해가 안 되는 부분만 작성해보려 한다.

1. Introduction

링크: https://v3-docs.vuejs-korea.org/guide/introduction.html

2. 선언적? 명령적?

원문

선언적 렌더링(Declarative Rendering): 
Vue는 표준 HTML을 템플릿 문법으로 확장하여 
JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 
선언적(declaratively)으로 작성할 수 있습니다.

2.1 명령적 프로그래밍

명령적 프로그래밍은 어떻게(How) 작업을 수행할 것인지를 구체적으로 지시하는 방식
알고리즘의 각 단계와 절차를 명확하게 명시
컴퓨터가 수행해야 할 명령을 순서대로 나열
특징
- 작업을 수행하기 위한 단계적인 절차와 명령을 개발자가 직접 작성
- 명시적인 상태 관리
  - 프로그램의 상태는 변수에 의해 추적되고, 상태 변경을 위해 변수에 명시적으로 값을 할당
    
    예: 전통적인 for 루프를 사용하여 배열의 모든 요소에 대해 특정 작업을 수행하는 경우, 각 단계(초기화, 조건 검사, 카운터 증가)를 명시적으로 지정
코드 예시

let sum = 0;
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i]; // 명령을 통해 sum의 상태를 직접 변경
}

2.2 선언적 프로그래밍

선언적 프로그래밍은 무엇(What) 을 할 것인지에 초점을 맞춤
개발자는 결과를 얻기 위한 목표만을 선언
그 과정(어떻게 도달할 것인지)에 대해서는 신경 쓰지 않음
프로그램이 최종적으로 달성하고자 하는 결과를 기술하는 데 집중
함수형 프로그래밍이 좋은 예시인 듯...
특징:
- 프로그램의 로직보다는 원하는 결과에 더 집중
- 고수준 추상화
  - 내부적으로 복잡한 로직이나 상태 관리를 프레임워크나 라이브러리가 처리
    
    예: SQL 쿼리는 선언적 프로그래밍의 좋은 예입니다. 데이터를 어떻게 가져올지 구체적인 절차를 쓰지 않고, 무엇을 가져오고 싶은지를 "선언"합니다.
코드 예시

// reduce 메서드로 배열의 값을 순회하며 축적하는 연산을 수행한다는 "선언"
// reduce 함수를 통해 "무엇을" 하고 싶은지를 선언
// "어떻게" 그 연산이 내부적으로 수행되는지는 중요하지 않음
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

2.3 명령적 렌더링

명령적 렌더링은 개발자가 단계별로 어떻게(UI를 어떻게 변경할 것인지)와 같은 과정을 자세히 지정해야 하는 방식
특정 조건이나 이벤트 발생 시 DOM을 직접 조작하여 UI를 업데이트하는 과정을 개발자가 모두 명시해야 함
예시

let count = 0; // 상태 초기화

document.getElementById('button').addEventListener('click', function() {
  count++; // 상태 업데이트
  document.getElementById('counter').innerText = count; // UI 업데이트
});

2.4 선언적 렌더링

선언적 렌더링은 "무엇(What)"을 할 것인지에 초점
UI의 최종 상태를 선언하고, 데이터 상태의 변화에 따라 프레임워크가 자동으로 UI를 해당 상태로 만듦
개발자는 UI가 어떤 조건에서 어떻게 보여져야 하는지를 선언
상태 변화 시 UI 업데이트 과정은 Vue.js 같은 프레임워크가 알아서 처리
예시
- 개발자는 "버튼을 클릭했을 때 화면에 표시되는 숫자를 증가시킨다"는 최종 상태만 선언

import { createApp } from 'vue'

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

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

3. Vue의 사용처

원문

Vue를 다양한 방식으로 사용
- 빌드 과정 없이 정적 HTML에 적용
- 모든 페이지에 웹 컴포넌트로 추가
- 싱글 페이지 어플리케이션 (SPA: Single-Page Application)
- Fullstack / 서버 사이드 렌더링 (SSR: Server-Side-Rendering)
- Jamstack / 정적 사이트 생성 (SSG: Static-Site-Generation)
- 데스크톱, 모바일, WebGL 또는 터미널을 대상으로 하는 경우

3.1 SPA(Single-Page Application)

SPA의 핵심 특징

단일 웹 페이지로 구성됨.
사용자 상호작용에 따라 콘텐츠를 동적으로 업데이트함.
전체 페이지 리로드 없이 필요한 데이터만 서버로부터 불러옴.
프론트엔드 라우팅을 통해 다중 페이지 탐색 효과 제공.

SPA의 장점

부드럽고 빠른 사용자 경험 제공.
초기 로딩 이후 향상된 애플리케이션 성능.
프론트엔드와 백엔드 분리로 개발 용이성 증가.
현대 프론트엔드 프레임워크(Vue.js, React, Angular 등)로 구현 가능.

SPA의 단점

SEO 최적화에 어려움이 있을 수 있음.
애플리케이션의 JavaScript 파일 전체를 처음에 로드해야 하므로 초기 로딩 시간이 길어질 수 있음.

결론

현대 웹 개발에서 사용자 경험을 중시하는 애플리케이션에 적합함.
데스크탑 애플리케이션과 유사한 경험 제공을 목표로 함.
SEO 최적화와 초기 로딩 속도는 프로젝트 요구 사항과 목표에 따라 고려해야 함.

3.2 SSR(Server-Side-Rendering)

SSR의 핵심 특징

서버에서 초기 페이지 렌더링을 수행함.
클라이언트에 전송되기 전에 HTML이 완성됨.
사용자 요청에 따라 각 페이지를 서버에서 실시간으로 생성함.
초기 페이지 로드 시 필요한 HTML, CSS, JavaScript를 함께 전송함.

SSR의 장점

향상된 SEO: 검색 엔진이 콘텐츠를 더 쉽게 인덱싱할 수 있음.
빠른 초기 페이지 로딩: 사용자에게 초기 콘텐츠를 빠르게 제공함.
사용자 체감 성능 개선: 사용자가 첫 화면을 빠르게 볼 수 있음.

SSR의 단점

서버 부하 증가: 모든 페이지 요청에 대해 서버에서 렌더링 수행 필요.
개발 복잡성 증가: 클라이언트와 서버 코드를 동기화해야 함.
캐싱 전략 필요: 효율적인 리소스 관리를 위해 캐싱 전략이 필요함.

결론

SSR은 SEO와 초기 로딩 성능을 중시하는 애플리케이션에 적합함.
사용자에게 빠른 콘텐츠 제공을 목표로 함.
서버 부하와 개발 복잡성을 고려하여 적절한 사용 사례에 적용해야 함.

3.3 SSG(Static-Site-Generation)

SSG의 핵심 특징

빌드 타임에 사이트의 모든 페이지를 HTML로 미리 생성함.
서버는 사전에 생성된 정적 파일을 직접 제공함.
동적 서버 사이드 프로세스 없이 정적 파일만으로 구성됨.
데이터 변경 시 새로운 빌드를 통해 사이트를 재생성해야 함.

SSG의 장점

빠른 로딩 속도: 서버에서 처리할 동적 콘텐츠가 없어 빠르게 로드됨.
보안 강화: 서버 사이드 코드 실행 없이 정적 파일만 제공되므로 보안성이 높음.
호스팅 용이성: 정적 파일을 제공하므로 간단한 서버 구성 또는 CDN 사용 가능.
SEO 최적화: 검색 엔진이 정적 HTML 페이지를 쉽게 크롤링하고 인덱싱함.

SSG의 단점

동적 기능 제한: 사전에 생성된 정적 페이지로 동적 인터랙션이 제한됨.
빌드 시간: 사이트가 커질수록 빌드 시간이 길어질 수 있음.
콘텐츠 업데이트 지연: 콘텐츠 변경 시 전체 사이트 재빌드 필요.

결론

SSG는 보안성이 높고, 로딩 속도가 빠른 정적 웹사이트에 적합함.
블로그, 마케팅 사이트, 문서화 프로젝트 등 변하지 않는 콘텐츠를 다루는 사이트에 이상적임.
동적 기능이 필요한 경우, 클라이언트 사이드 JavaScript 또는 서버리스 함수와 결합하여 사용해야 함.

4. 참조

명령형 프로그래밍
- https://ko.wikipedia.org/wiki/%EB%AA%85%EB%A0%B9%ED%98%95_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D
선언형 프로그래밍
- https://ko.wikipedia.org/wiki/%EC%84%A0%EC%96%B8%ED%98%95_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D
선언형 프로그래밍으로 이해하기 쉬운 코드 작성하기
- https://yozm.wishket.com/magazine/detail/2083/
[프로그래밍 언어론] 명령형(Imperative)프로그래밍과 선언형(Declarative)프로그래밍
- https://code-lab1.tistory.com/244

Naver D2: 어서 와, SSR은 처음이지?
- https://d2.naver.com/helloworld/7804182
SSR 시작하기 전 알아야 할 것들 (feat. CSR)
- https://yozm.wishket.com/magazine/detail/2330/
(번역)도대체 SSG가 뭘까요? Next.js로 설명하는 정적 사이트 생성
- https://velog.io/@lky5697/what-the-heck-is-ssg-static-site-generation-explained-with-nextjs
정적 사이트 생성자란?
- https://www.cloudflare.com/ko-kr/learning/performance/static-site-generator/

곰개구리

개굴개굴 곰개굴

다음 포스트

Vue.js 공식문서 1. Introduction

Vue.js 공식문서

1. Introduction

2. 선언적? 명령적?

2.1 명령적 프로그래밍

2.2 선언적 프로그래밍

2.3 명령적 렌더링

2.4 선언적 렌더링

3. Vue의 사용처

3.1 SPA(Single-Page Application)

3.2 SSR(Server-Side-Rendering)

3.3 SSG(Static-Site-Generation)

4. 참조

CSR? SSR? SSG?

0개의 댓글