[2024.04.25] Vue - Introduction

Frontend Development

• Frontend Development: 웹사이트와 웹 애플리케이션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 만들고 디자인하는 것 => HTML, CSS, JavaScript 등을 활용하여 사용자가 직접 상호작용하는 부분을 개발

Client-side frameworks

• Client-side frameworks: 클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는 JavaScript 기반 프레임워크

• 필요한 이유?
  1) 웹은 단순히 무언가를 읽는 곳 -> 무언가를 하는 곳
  2) 웹에서 다루는 데이터가 많아졌다
  => Vanilla JS만으로는 이러한 일이 쉽지 않음

SPA

• SPA(Single Page Application)
  : 단일 페이지로 구성된 애플리케이션
  : 하나의 HTML 파일로 시작하여, 사용자가 상호작용할 때마다 페이지 전체를 새로 로드하지 않고 화면의 필요한 부분만 동적으로 갱신
  : 대부분 JavaScript 프레임워크를 사용하여 클라이언트 측에서 UI와 렌더링을 관리
  : CSR 방식 사용

• CSR(Client-Side Rendering): 클라이언트에서 화면을 렌더링 하는 방식
  
  
  

Vue

What is Vue

• Vue(Vue.js): 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크

• Vue의 2가지 핵심 기능

1. 선언적 렌더링
   : 표준 HTML을 확장하는 템플릿 구문을 사용하여 JavaScript 상태(데이터)를 기반으로 화면에 출력될 HTML을 선언적으로 작성

2. 반응성
   : JavaScript 상태 변경을 추적하고, 변경사항이 발생하면 자동으로 DOM을 업데이트

Vue Tutorial

• ref(): 반응형 상태(데이터)를 선언하는 함수 (Declaring Reactive State)
  => 반응형을 가지는 참조 변수를 만드는 것 (ref === reactive reference)
  
  

• Vue 기본 구조
  
  
  

• 반응형 변수 vs. 일반 변수