Vue.js_00 Intro

Vue.js란?

Front-End Development

• 프론트엔드 개발은 HTML, CSS 그리고 JavaScript를 활용해서 데이터를 볼 수 있게 만들어 줌

  • 이 작업을 통해 사용자는 데이터를 눈으로 볼 수 있고 데이터와 상호작용 할 수 있음

• 대표적인 프론트엔드 프레임워크

  • Vue.js, React, Angular

 

What is Vue.js

• 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크
• 현대적인 tool과 다양한 라이브러리를 통해 SPA(Single Page Aplication)를 완벽하게 지원

 

SPA

• 단일 페이지 애플리케이션 (Single Page Aplication)

• 현재 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션

• 단일 페이지로 구성되며 서버로부터 처음에만 페이지를 받아오고 이후에는 동적으로 DOM을 구성

  • 처음 페이지를 받은 이후에는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재 페이지를 동적으로 다시 작성
  • 연속되는 페이지 간의 사용자 경험(UX)을 향상
  • 모바일 사용이 증가하고 있는 현재, 트래픽의 감소와 속도, 사용성 반응성의 향상은 매우 중요한 이슈이기 때문

• 동작 원리의 일부가 CSR의 구조를 따름

 

CSR

Client Side Rendering

• 최초 요청시 서버에서 빈 문서를 응답하고 이후 클라이언트에서 데이터를 요청해 데이터를 받아 DOM을 렌더링하는 방식
• SSR보다 초기 전송되는 페이지의 속도는 빠르지만, 서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전체적인 페이지 완료 시점은 SSR보다 느림
• SPA가 사용하는 렌더링 방식

• CSR의 장점

  • 서버와 클라이언트 간의 트래픽 감소

    • 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드

  • 사용자 경험 향상

    • 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신

• CSR의 단점

  • SEO(검색엔진 최적화) 문제가 발생할 수 있음

SSR

Server Side Rendering

• 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식
• 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR보다 페이지를 구성하는 속도는 늦지만 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라짐

• SSR의 장점

  • 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있음
  • SEO(검색엔진 최적화)가 가능

• SSR의 단점

  • 모든 요청에 새로고침이 되기 때문에 사용자 경험이 떨어짐

    • 상대적으로 요청 횟수가 많아져 서버 부담이 커짐

SEO

Search Engine Optimization (검색 엔진 최적화)

• 웹 페이지 검색엔진이 자료를 수집하고 순위를 메기는 방식에 맞게 웹페이지를 구성해서 검색 결과의 상위에 노출될 수 있도록 하는 작업

• 인터넷 마케팅 방법 중 하나

• 구글 등장 이후 검색엔진들이 컨텐츠의 신뢰도를 파악하는 기초 지표로 사용됨

  • 다른 웹 사이트에서 얼마나 인용되었나를 반영
  • 결국 타 사이트에 인용되는 횟수를 늘리는 방향으로 최적화

 

SEO 문제 대응

• Vue.js 또는 React 등의 SPA 프레임워크는 SSR을 지원하는 SEO 대응 기술이 이미 존재

  • SEO 대응이 필요한 페이지에 대해서는 선별적 SEO 대응 가능

• 혹은 추가적으로 프레임워크를 사용하기도 함

  • Nuxt.js

    • Vue.js 응용 프로그램을 만들기 위한 Framework
    • SSR을 지원

  • Next.js

    • React 응용 프로그램을 만들기 위한 Framework
    • SSR을 지원

SPA with SSR

• CSR과 SSR을 적절히 사용

  • 예를 들어, Django에서 Axios를 활용한 좋아요/팔로우 로직의 경우 대부분 Server에서 완성된 HTML을 제공하는 구조 (SSR)
  • 다만, 특정 요소(좋아요/팔로우)만 AJAX를 활용한 비동기요청으로 필요한 데이터를 Client에서 서버로 직접 요청을 보내 받아오고 JS를 활용해 DOM을 조작 (CSR)

Vue.js를 사용하는 이유

• 현대 웹 페이지는 페이지 규모가 계속해서 커지고 있으며 그만큼 사용하는 데이터도 늘어나고 사용자와의 상호작용도 많이 이루어짐

• 결국 Vanilla JS만으로는 관리하기 어려움

  • 예시) 페이스북의 친구가 이름을 변경했을 경우 변경되어야 하는 것들

    • 타임라인의 이름, 페이스북 메세지 상의 이름, 내 주소록에서의 친구 이름 등
    • 그래서 페이스북이 React를 개발

• Vanilla JS로 작성한 경우

  • 한 유저가 100만개의 게시글을 작성했다고 가정
  • 이 유저가 닉네임을 변경하면, 100만개의 게시글의 작성자 이름이 모두 수정되어야 함
  • '모든 요소'를 선택해서 '이벤트'를 등록하고 값을 변경해야 함

• Vue.js로 작성한 경우

  • DOM과 Data가 연결되어 있으면
  • Data를 변경하면 이에 연결된 DOM은 알아서 변경
  • 즉, 우리가 신경 써야 할 것은 오로지 Data에 대한 관리뿐