JavaScript, Vue

Introduction of Vue

Disciple428 2024. 4. 25. 22:39

프론트엔드 ⇒ Client-side frameworks

 

  • Frontend Development

웹 사이트와 웹 애플리케이션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 만들고 디자인하는 것

HTML, CSS, 자바 스크립트 등을 활용하여 사용자가 직접 상호작용 하는 부분을 개발한다.

 

  • Client-side frameworks

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

자바 스크립트는 본래 브라우저 내부에서 동적 기능을 지원하는 역할에 지나지 않았으나 노드가 출시되면서 브라우저 외부에서도 쓰이게 됨.

웹에서 단순히 문서를 읽는 것을 넘어서 많은 일을 하게 되면서 중요성이 커졌다.

웹 페이지 → 웹 애플리케이션

ex) Vue, React, Angular

 

  • Single Page Application (=SPA)

단일 페이지로 구성된 애플리케이션

아래로 무한 스크롤이 가능하고 페이지가 새로고침되거나 이동하지 않고 하나의 페이지를 계속 사용하는 앱

하나의 HTML 파일로 시작하여, 사용자가 상호작용할 때마다 페이지 전체를 새로 로드하지 않고 화면의 필요한 부분만 동적으로 갱신한다.

대부분 자바 스크립트 프레임워크를 사용하여 클라이언트 측에서 UI와 랜더링을 관리한다.

CSR 방식을 사용한다.

 

  • Client-side Rendering (CSR)

클라이언트에서 화면을 렌더링 하는 방식

서버에서는 재료만 받고 화면은 클라이언트 측에서 그린다.

클라이언트의 최초 요청 시에만 HTML 페이지를 주고 그 이후부터는 필요한 JSON 파일만을 준다.

 

  • CSR 장점
  1. 빠른 페이지 전환 : 페이지가 처음 로드된 후에는 필요한 데이터만 가져오면 되고 자바 스크립트는 전체 페이지를 새로 고칠 필요 없이 페이지의 일부를 다시 렌더링할 수 있기 때문이다. 서버로 전송되는 데이터의 양을 최소화하고 서버 부하를 방지한다.
  2. 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공한다.
  3. 프론트엔드와 백엔드의 명확한 분리 : 프론트엔드는 UI 렌더링 및 사용자 상호 작용 처리를 담당 백엔드는 데이터 및 API 제공을 담당 대규모 애플리케이션을 더 쉽게 개발하고 유지 관리가 가능하다.

 

  • CSR 단점
  1. 초기 로드 속도는 느리다. 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있다. 자바 스크립트가 다운로드, 구문 분석 및 실행될 때까지 페이지가 완전히 렌더링 되지 않기 때문이다.
  2. 검색 엔진 최적화 문제 페이지를 나중에 그려 나가는 것이기 때문에 검색에 잘 노출되지 않을 수 있다. 검색 엔진 입장에서는 HTML를 읽어서 분석해야 하는데, 아직 콘텐츠가 모두 존재하지 않을 수 있기 때문이다.

 

  • SPA vs MPA / CSR vs SSR

Multi Page Application (MPA)

→ 여러 개의 HTML 파일이 서버로부터 각각 로드되고 사용자가 다른 페이지로 이동할 때마다 새로운 HTML 파일이 로드된다.

 

Server-side Rendering (SSR)

→ 서버에서 화면을 렌더링 하는 방식

→ 모든 데이터가 담긴 HTML를 서버에서 완성 후 클라이언트에게 전달한다.

 

  • Vue.js

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

 

  • Vue의 2가지 핵심 기능

 

1. 선언적 렌더링

표준 HTML을 확장하는 템플릿 구문을 사용하여 자바 스크립트 상태(데이터)를 기반으로 화면에 출력될 HTML을 선언적으로 작성한다.

 

2. 반응성

자바 스크립트 상태나 데이터 변경을 추적하고, 변경사항이 발생하면 자동으로 DOM을 업데이트

 

  • ref( )

반응형 상태(데이터)를 선언하는 함수 ⇒ 반응형을 가지는 참조 변수를 만든다.

.value 속성이 있는 ref 객체로 래핑하여 반환한다.

ref 로 선언된 변수의 값이 변경되면, 해당 값을 사용하는 템플릿에서 자동으로 업데이트 한다.

인자로 어떠한 타입이든 가능하다.

템플릿의 참조에 접근하려면 setup 함수에서 선언 및 반환이 필요하다.

템플릿에서 ref 를 사용할 때는 자동으로 언래핑이 이루어지기 때문에 .value 작성을 하지 않아도 된다. ⇒ 다만 템플릿에서의 unwrap 은 ref 가 최상위 속성인 경우에만 적용 가능하다. 따라서 unwrap 을 정상적으로 하고 싶으면 대상을 최상위 속성으로 분해하여 반환하거나 템플릿에서 참조할 때 해당 속성까지 직접 접근하여 참조해야 한다. (ex : object.id)

 

  • Vue 기본 구조

createApp( ) 에 전달되는 객체 = Vue 컴포넌트

컴포넌트의 상태는 setup( ) 함수 내에서 선언되어야 하며 객체로 반환해야 한다.

⇒ 반환된 객체의 속성은 템플릿에서 사용할 수 있고 { { } } 를 사용하여 메시지 값을 기반으로 동적 텍스트를 렌더링 한다. 콘텐츠는 식별자나 경로에만 국한되지 않으며, 유효한 자바 스크립트 표현식 사용도 가능하다.

 

  • Event Listeners in Vue

‘v-on’ directive 를 사용하여 DOM 이벤트를 수신할 수 있다.

함수 내에서 반응형 변수를 변경하여 구성 요소 상태를 업데이트한다.