Vue 활용 기초(1)

Vue

Vue.js

Frontend

• 프론트엔드(Front-end)는 웹 개발에서 사용자가 직접 상호작용하는 부분을 의미하며, 웹사이트나 앱의 사용자 인터페이스(UI)와 사용자 경험(UX)을 담당하는 부분이다.
• 사용자와의 상호작용에는 사용자가 보고, 클릭하고, 입력하는 등 모든 것이 포함된다.
• HTML, CSS, JavaScript 같은 기술을 사용하며, 최근에는 Vue.js, React, Angular와 같은 프론트엔드 프레임워크를 사용하여 구현한다.

 

 

 

 

 

CSR

• CSR(Client-Side Rendering)는 사용자의 브라우저에서 전체 페이지를 동적으로 렌더링하는 방식이다.
• 서버에서는 초기 페이지 로딩 시 HTML, CSS, JavaScript 파일만 전송하고, 이후의 모든 렌더링 작업은 클라이언트 측에서 JavaScript를 통해 수행된다.
• 장점
  • 사용자 경험 향상: 페이지 전환 없이 필요한 데이터만 비동기적으로 불러와 업데이트하여 사용자 경험이 향상된다.
  • 초기 서버 로드 감소: 서버는 단순히 정적 파일만 제공하면 되므로, 서버 부담이 감소한다.
• 단점
  • 초기 로딩 시간: 처음에 모든 자바스크립트 파일을 다운로드 받아야 하므로 초기 로딩 시간이 길어질 수 있다.
  • SEO 문제: 검색 엔진 크롤러가 자바스크립트를 실행시켜 내용을 인덱싱하는 과정에서 문제가 발생할 수 있다.

 

 

 

 

SSR

• SSR(Server-Side Rendering)는 서버에서 HTML을 동적으로 생성하여 사용자의 요청에 따라 완성된 페이지 형태로 전송하는 방식이다.
• 사용자는 서버로부터 렌더링된 페이지를 받아 볼 수 있으며, 추가적인 JavaScript 실행 없이도 페이지의 내용을 볼 수 있다.
• 장점
  • SEO 최적화: 페이지의 내용이 서버에서 미리 렌더링되기 때문에, 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있다.
  • 빠른 첫 페이지 로딩: 초기 로딩 시간이 줄어들어 사용자가 바로 콘텐츠를 볼 수 있다.
• 단점:
  • 서버 부하 증가: 모든 페이지 요청마다 서버에서 HTML을 새로 생성해야 하므로 서버 부하가 증가할 수 있다.
  • 인터랙티브한 기능 제한: 페이지 내에서 동적인 변화를 주기 위해서는 클라이언트 측 JavaScript가 추가로 필요하다.

 

SPA

• SPA(single-page application)는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.
• 즉, CSR을 활용한 방식

 

 

 

---

 

 

 

 

 

npm

• npm(Node Package Manager)은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다.
• python에서의 pip

 

 

 

 

Vite

• 프론트엔드 개발을 위한 빌드 툴 및 개발 서버 환경을 제공하는 웹 개발 도구이다.
• Vue, React등의 framework의 개발용 서버, 배포를 위한 번들링 등을 도와준다.

 

 

 

 

---

 

 

 

[Vue 개발 환경 구축]

• node 설치
• vite를 사용하여 시작

$ npm create vite@latest .

√ Project name: ... vite-project
√ Select a framework: » Vue
√ Select a variant: » JavaScript

 

 

 

• 모듈 다운로드

$ npm install

• node의 경우 library를 install하면 node_modules 폴더가 생기며, python의 venv에 해당한다. 단, 가상환경을 활성화할 필요는 없다.
• package-lock.json, package.json이 requirements.txt에 해당한다.

 

 

• 추가 모듈 다운

$ npm i sass

• 중첩된 css를 다루기 위한 library

 

 

• 서버 시작

$ npm run dev

 

 

 

• extension 설치
  • Vue - Official

 

 

 

 

 

SFC

• SFC(Single-File Components)는 컴포넌트의 템플릿, 로직 및 스타일을 하나의 파일로 묶어낸 파일 형식이다.
• vue에서는 .vue 확장자를 가지고 script, template, style의 세가지 부분으로 구분되어 있으며 각각
  • script : JavaScript
  • template : HTML
  • style : css 에 해당한다.
• vbase를 활용하여 template을 손쉽게 생성할 수 있다.
  • vbase-3-setup을 활용할 예정
  • style 태그의 scoped : 스타일을 해당 component에만 적용한다.

 

 

 

 

• src/App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="<https://vitejs.dev>" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="<https://vuejs.org/>" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>