λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
⭐ Personal_Study/Vue

Vue Intro

by ν¬μŠ€νŠΈμ‰μ΄ν¬ 2022. 11. 6.

Vue Intro

Front-end Framework

βœ” Front-end(FE) κ°œλ°œμ΄λž€?

  • μ‚¬μš©μžμ—κ²Œ λ³΄μ—¬μ£ΌλŠ” ν™”λ©΄ λ§Œλ“€κΈ°

βœ” Web App(SPA)을 λ§Œλ“€ λ•Œ μ‚¬μš©ν•˜λŠ” 도ꡬ

  • SPA: Single Page Application

Web Appμ΄λž€?

βœ” μ›Ή λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰λ˜λŠ” μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μ†Œν”„νŠΈμ›¨μ–΄
βœ” μ›Ή νŽ˜μ΄μ§€κ°€ κ·ΈλŒ€λ‘œ λ³΄μ΄λŠ” 것이 μ•„λ‹Œ λ””λ°”μ΄μŠ€μ— μ„€μΉ˜λœ App처럼 λ³΄μ΄λŠ” 것

SPA (Single Page Application)

βœ” μ„œλ²„μ—μ„œ 졜초 1μž₯의 HTML만 전달 λ°›μ•„ λͺ¨λ“  μš”μ²­μ— λŒ€μ‘ν•˜λŠ” 방식
βœ” CSR(Client Side Rendering) λ°©μ‹μœΌλ‘œ μš”μ²­ 처리

[μ°Έκ³ ] SSR (Server Side Rendering)

βœ” Serverκ°€ μ‚¬μš©μžμ˜ μš”μ²­μ— μ ν•©ν•œ HTML을 λ Œλ”λ§ν•˜μ—¬ μ œκ³΅ν•˜λŠ” 방식
βœ” κ³„μ†ν•΄μ„œ μƒˆλ‘œκ³ μΉ¨μ„ ν•΄μ•Όν•œλ‹€λŠ” 단점 쑴재

CSR (Client Side Rendering)

βœ” 각 μš”μ²­μ— λŒ€ν•œ λŒ€μ‘μ„ JavaScript을 μ‚¬μš©ν•˜μ—¬ ν•„μš”ν•œ λΆ€λΆ„λ§Œ λ‹€μ‹œ λ Œλ”λ§

  1. ν•„μš”ν•œ νŽ˜μ΄μ§€λ₯Ό μ„œλ²„μ— AJAX둜 μš”μ²­
  2. μ„œλ²„λŠ” 화면을 그리기 μœ„ν•΄ ν•„μš”ν•œ 데이터λ₯Ό JSON λ°©μ‹μœΌλ‘œ 전달
  3. JSON 데이터λ₯Ό JavaScript둜 처리, DOMνŠΈλ¦¬μ— 반영(λ Œλ”λ§)

μ™œ CSR을 μ‚¬μš©ν• κΉŒ

  1. λͺ¨λ“  HTML νŽ˜μ΄μ§€λ₯Ό μ„œλ²„λ‘œλΆ€ν„° λ°›μ•„μ„œ ν‘œμ‹œ ν•˜μ§€ μ•Šμ•„λ„ λœλ‹€.
    - νŠΈλž˜ν”½ κ°μ†Œ -> 응닡속도 ν–₯상
  2. 맀번 μƒˆ λ¬Έμ„œλ₯Ό λ°›μ•„ μƒˆλ‘œκ³ μΉ¨ν•˜λŠ” κ±°μ‹± μ•„λ‹ˆλΌ ν•„μš”ν•œ λΆ€λΆ„λ§Œ κ³ μ³λ‚˜κ°€λ―€λ‘œ 각 μš”μ²­μ΄ λŠκΉ€μ—†μ΄ 진행
    - μ‚¬μš©μž κ²½ν—˜(UX) ν–₯상
  3. BE와 FE의 μž‘μ—… μ˜μ—½ λͺ…ν™•νžˆ 뢄리
    - ν˜‘μ—… 용이

κ·Έλ ‡λ‹€λ©΄ CSR은 만λŠ₯일까?

βœ” 첫 ꡬ동 μ‹œ ν•„μš”ν•œ 데이터가 많으면 λ§Žμ„μˆ˜λ‘ 졜초 μž‘λ™ μ‹œμž‘κΉŒμ§€ 였랜 μ‹œκ°„μ΄ μ†Œμš”
βœ” 검색 엔진 μ΅œμ ν™”(SEO: Search Enginge Optimazation)이 어렀움

  • μ„œλ²„κ°€ μ œκ³΅ν•˜λŠ” 것은 빈 HTML

βœ” HTML에 μž‘μ„±λœ λ‚΄μš©μ„ 기반으둜 ν•œ 검색 엔진에 빈 HTML을 κ³΅μœ ν•˜λŠ” SPA μ„œλΉ„μŠ€κ°€ λ…ΈμΆœλ˜κΈ° μ–΄λ ΅λ‹€

CSR vs SSR

βœ” μ„œλΉ„μŠ€μ— μ ν•©ν•œ λ Œλ”λ§ 방식을 μ μ ˆν•˜κ²Œ ν™œμš©ν•΄μ•Ό ν•œλ‹€.
βœ” SPA μ„œλΉ„μŠ€μ—μ„œλ„ SSR을 μ§€μ›ν•˜λŠ” Framework도 λ°œμ „!

  • Vue: Nuxt.js
  • React: Next.js
  • Angular Universal

FE ν”„λ ˆμž„μ›Œν¬

βœ” React, Angular, Vue

ν”„λ ˆμž„μ›Œν¬λ₯Ό κΌ­ 써야 ν• κΉŒ?

βœ” 생산성과 ν˜‘μ—…μ„ μœ„ν•΄ μ‚¬μš©!

Why Vue

μ‰¬μš΄ λ‚œμ΄λ„

<template>
  <!-- HTML -->
  <div>
    <p>Hello :)</p>
  </div>
</template>

<script>
  // JavaScript
</script>

<style>
  /* CSS */
  p {
    color: black;
  }
</style>

βœ” 직관적인 ꡬ쑰
βœ” λΉ λ₯΄κ³  μ‰½κ²Œ ν•™μŠ΅ & ν™œμš© κ°€λŠ₯

Vue CDN κ°€μ Έμ˜€κΈ°

Vue2 κ³΅μ‹λ¬Έμ„œ

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>

Vue둜 μ½”λ“œ μž‘μ„±ν•˜κΈ°

βœ” μž…λ ₯ 받은 값을 name 뒀에 좜λ ₯ν•˜κΈ°

 

  1. Vue μ½”λ“œ μž‘μ„±
<body>
  <div id="app">
    <!-- 선언적 λ Œλ”λ§ -->
    <p id="name">name : {{ message }}</p>
    <input id="inputName" type="text" />
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>
  <script>
    // Vue instance 생성
    const app = new Vue({
      // el, data μ„€μ • - data에 관리할 속성 μ •μ˜
      el: "#app",
      data: {
        message: "",
      },
    });
  </script>
</body>
  1. Vue devtoolsμ—μ„œ dataλ₯Ό λ³€κ²½ν•  수 μžˆλ‹€.
  2. input tag에 v-model μž‘μ„±
<body>
  <div id="app">
    <p id="name">name : {{ message }}</p>
    <input id="inputName" type="text" v-model="message" />
  </div>
</body>

Vue의 μž₯점

βœ” Vanilla JS둜 데이터λ₯Ό μ‘°μž‘ν•˜λ©΄ λ³€μˆ˜λͺ…이 λ°”λ€Œλ©΄ 일일이 λ°”κΏ”μ€˜μ•Ό ν•œλ‹€.
βœ” Vueλ₯Ό μ΄μš©ν•˜λ©΄ ν•˜λ‚˜μ˜ Data둜 관리해 λ³€κ²½ 사항을 ν•œ λ²ˆμ— λ°˜μ˜ν•  수 있음

'⭐ Personal_Study > Vue' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

SFC (Single File Component)  (0) 2022.11.11
Vue_CLI  (0) 2022.11.09
Vue: advanced attributes  (0) 2022.11.07
Vue: Basic Syntax  (0) 2022.11.07
Vue Instance  (0) 2022.11.06

λŒ“κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”