Introduction of Vue

Front-End Development

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

Client-side Frameworks

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

Client-side Frameworks가 필요한 이유1

"웹에서 하는 일이 많아졌다"
단순히 무언가를 읽는 곳 -> 무언가를 하는 곳

• 사용자는 이제 웹에서 문서만을 읽는 것이 아닌 음악을 스트리밍하고, 영화를 보고, 원거리에 있는 사람들과 텍스트 및 영상 채팅을 통해 즉시 통신을 하고 있음
• 이처럼 현대적이고 복잡한 대화형 웹 사이트를 "웹 어플리케이션(Web Application)"이라 부름
• JavaScript 기반의 Client-side frameworks 출현으로 매우 동적인 대화형 어플리케이션을 훨씬 더 쉽게 구축할 수 있게 됨.

Client-side Frameworks가 필요한 이유2

"웹에서 하는 일이 많아졌다" -> "다루는 데이터가 많아졌다"

• 만약 친구가 이름을 변경했다면?
• 친구 목록, 타임라인, 스토리 등 친구 이름이 출력되는 모든 곳이 함께 변경되어야함
• 어플리케이션의 기본 데이터를 안정적으로 추적하고, 업데이트(렌더링, 추가, 삭제 등)하는 도구가 필요
• 어플리케이션의 상태를 변경할 때마다 일치하도록 UI를 업데이트해야 한다는 것

Single Page Application(SPA)

• 페이지 한 개로 구성된 웹 어플리케이션
• 서버로부터 필요한 모든 정적 HTML을 처음에 한번 가져옴
• 브라우저가 페이지를 로드하면 Vue 프레임워크는 각 HTML 요소에 적절한 JavaScript 코드를 실행(이벤트 응답, 데이터 요청 후 UI 업데이트 등)
• ex) 페이지 간 이동시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지 일부 갱신
• (Google Maps, Instagram 등의 서비스에서 갱신 시 새로 고침이 없는 이유)

CSR(Client Side Rendering) 방식

웹 어플리케이션 초기 로딩 후 새로운 페이지 요청 없이 동적으로 화면을 갱신하며 사용자와 상호작용하는 웹 어플리케이션

클라이언트에서 화면을 렌더링 하는 방식
1. 브라우저는 페이지에 필요한 최소한의 HTML 페이지와 JavaScript를 다운로드
2. JavaScript를 사용하여 DOM을 업데이트하고 페이지를 렌더링
웹 어플리케이션 초기 로딩 후 새로운 페이지 요청 없이 동적으로 화면을 갱신하여 사용자와 상호작용하는 웹 어플리케이션

Client-side Rendering (CSR) 장점

• 1. 빠른속도
  • 페이지의 일부를 다시 렌더링 할 수 있으므로 동일한 웹 사이트의 다른 페이지로 이동하는 것이 일반적으로 더 빠름.
  • 서버로 전송되는 데이터의 양을 최소화
• 2. 사용자 경험
  • 새로 고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공
• 3. Front-end와 Back-end의 명확한 분리
  • Front-end는 UI 렌더링 및 사용자 상호 작용 처리를 담당
  • Back-end는 데이터 및 API 제공을 담당
  • 대규모 어플리케이션을 더 쉽게 개발하고 유지 관리 가능

Client-side Rendering (CSR) 단점

• 1. 초기 구동속도가 느림
  • 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있음
    (JavaScript가 다운로드, 구문 분석 및 실행될 때까지 페이지가 완전히 렌더링 되지 않기 때문)
• 2. SEO(검색 엔진 최적화) 문제
  • 페이지를 나중에 그려 나가는 것이기 때문에 검색에 잘 노출되지 않을 수 있음

Vue

사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크

1. 쉬운 학습 곡선 및 간편한 문법

• 새로운 개발자들도 빠르게 학습할 수 있음

2. 반응성 시스템

• 데이터 변경에 따라 자동으로 화면이 업데이트 되는 기능을 제공

3. 모듈화 및 유연한 구조

• 어플리케이션을 컴포넌트 조각으로 나눌 수 있음
• 코드의 재사용성을 높이고 유지보수를 용이하게함

Vue의 2가지 핵심기능

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

• HTML을 확장하는 템플릿 구문을 사용하여 HTML이 JavaScript 데이터를 기반으로 어떻게 보이는지 설명할 수 있음

2. 반응형(Reactivity)

• JavaScript 상태 변경사항을 자동으로 추적하고 변경사항이 발생할 때 DOM을 효율적으로 업데이트

ref 함수

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

• 인자를 받아 .value 속성이 있는 ref 객체로 래핑(=집을 만들어준다, wrapping)하여 반환
• ref로 선언된 변수의 값이 변경되면, 해당 값을 사용하는 템플릿에서 자동으로 업데이트
• 인자는 어떠한 타입도 가능

setup 함수

• 템플릿의 참조에 접근하려면 setup 함수에서 선언 및 반환 필요
• 템플릿에서 ref를 사용할 때는 .value를 작성할 필요 없음(automatically unwrapped)