📃 요약

Vue 는 Html 페이지로 웹 사이트를 개발하는 라이브러리입니다.
SPA(Single Page Application)이라고 합니다.,
Html 첫페이지에서 변경되는 부분만 .js 소스(컴포넌트)로 불여서 개발하는 방식이 흡사 레고블럭을 연결해서 하나의 완성본을 만드는 것과 같다고 해서 컴포넌트 개발이라고도 합니다.
과거 코딩방식보다 일부 변경된 부분만 바꾸어 끼우는 방식이라서 성능이 비약적으로 증가합니다.
현대 프론트 코딩방식은 SPA 개발로 바뀌고 있으며 비슷한 계열로 React / Angular 가 있습니다.

요소 기술 :

– Basic : Vue ( 공식 홈페이지 : https://vuejs.org )

📃 기술 구현

스펙 :

- vscode
- js (es6)
- vue

📃 Vue

- 컴포넌트 프로그래밍 : 페이지를 컴포넌트로 분리해서 레고 블럭처럼 조립해서 코딩하는 방식을 채택함, Vue, React 등이 적용하고 있음
- Vue 프레임워크라고 하고, 필수 라이브러리들이 대체로 설치되어 있고 제어문/반복문이 쉬워 초보자가 접근하기 쉬움
- 리액트는 라이브러리라고 하며 필수 라이브러리들을 추가적으로 설치해야 하고 제어문/반복문이 모던js 를 기반으로 다양하게 사용되기때문에
배워야 하는 기술이 많아 초보자가 접근하기에는 어려운 측면이 있음

1) json 데이터/파일 :

- 현대 웹 개발은 프론트/벡엔드 사이에 데이터 전송 형식으로 JSON(Javascript Object Notation) 데이터 또는 파일을 사용함
- 현대 웹 코딩 언어들은 거의 대부분 JSON 데이터 또는 파일 형식을 지원하고 있음
- 과거에는 html 태그를 확장한 xml 로 데이터 전송을 했으나, 복잡한 환경설정 및 성능 저하로 인해 요즘은 JSON 데이터/파일을 사용함

2) 웹 통신 함수 :

- 프론트와 벡엔드가 데이터 전송 시 사용하는 함수는 상황에 따라 호출하는 방식이 다름
- post 방식    : 벡엔드 추가(Create) 요청시 사용하는 방식
- get 방식     : 벡엔드 조회(Read) 요청시 사용하는 방식
- put 방식     : 벡엔드 수정(Update) 요청시 사용하는 방식
- delete 방식  : 벡엔드 삭제(Delete) 요청시 사용하는 방식

2) axios 라이브러리 :

- 프론트 및 벡엔드 프로그램은 JSON 데이터 전송으로 프로그램을 동작시키는데 JSON 데이터를 쉽게 전송하고 받을 수 있게 여러가지 기본 함수들을 제공하는 라이브러리임
- 과거에는 jquery 의 ajax 함수를 사용했으나, 요즘을 사용하기 쉬운 axios 라이브러리가 전세게적으로 사용되고 있음
- 웹 기본 방식 4가지에 따라 각각 호출되는 함수가 있음
  1) post 방식    : post(/url, 추가데이터)
  2) get 방식     : get(/url)
  3) put 방식     : put(/url, 수정데이터)
  4) delete 방식  : delete(/url)

axios 라이브러리 설치

- 뷰/리액트에서는 외부 라이브러리(다른 개발자가 제작한)는 추가 설치를 통해 사용함
- 확인 
package.json 파일 내에서 확인 : dependencies 속성에서 찾을 수 있음

- 설치
npm install axios

- 삭제
npm uninstall axios

📃 dept 예제 :

– 결과 화면

– 아래 소스는 벡엔드를 제외한 전형적인 SPA 프론트 프로그램임 단, 벡엔드에서 JSON 데이터가 전송되었다고 가정하고 실행됨

– vue 프로젝트 디렉토리 구조

– App.vue

  - vue 에서 제일 처음에 실행되는 컴포넌트
  - 모든 컴포넌트의 최고 부모 컴포넌트
  - <router-view/> : router/index.js 에서 정의된 컴포넌트가 이 영역에서 화면에 표시됨

<template>
  <!-- 머리말  -->
    <HeaderCom />

    <div class="container">
      <!-- 라우터에 정의된 컴포넌트가 표시됨 -->
        <router-view/>
    </div>

</template>

<script>
import HeaderCom from "@/components/HeaderCom.vue";

export default {
    components : {
        HeaderCom
    }
}
</script>

<style>
</style>

HeaderCom.vue

• 머리말 컴포넌트
• 공통 모듈임

<template>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
  <a class="navbar-brand" href="#">Navbar</a>
  <button
    class="navbar-toggler"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="/">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a
          class="nav-link dropdown-toggle"
          href="#"
          role="button"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          Basic 메뉴
        </a>
        <ul class="dropdown-menu">
          <li>
            <router-link to="/dept" class="dropdown-item">
              Dept
            </router-link>
          </li>
          <li>
            <router-link to="/customer" class="dropdown-item">
              Customer(연습)
            </router-link>
          </li>
          <li>
            <router-link to="/books" class="dropdown-item">
              Books(연습)
            </router-link>
          </li>
          <li>
            <router-link to="/webtoons" class="dropdown-item">
              Webtoons(연습)
            </router-link>
          </li>
          <li>
            <router-link to="/watcher" class="dropdown-item">
              Watcher
            </router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</nav>
</template>
<script>
export default {};
</script>
<style></style>

HttpCommon.js

• 벡엔드와 JSON 데이터를 주고 받을 기본 주소
• js 공통 모듈임

```js

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:8080",
  headers: {
    "Content-type": "application/json"
  }
});

– DeptService.js

• 벡엔드와 JSON 데이터를 주고 받을 때 사용할 함수들 정의, 주로 CRUD 함수 정의
• axios 라이브러리의 get/post/put/delete 함수 이용
• js 공통 모듈임

import http from '../utils/HttpCommon'

// springboot 연결하기 위한 메소드 정의
class DeptService {
    // 모든 회원 조회
    getAll() {
        return http.get("/dept.json");
    }
}

export default new DeptService()

– router/index.js

• 메뉴 정의 js
• url 과 보여줄 컴포넌트 연결
• js 공통 모듈임

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    alias: '/dept',
    name: 'dept',
    component: () => import('@/views/DeptList')
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

– DeptList.js

• JSON 데이터를 전송받아 화면에 반복문으로 보여주는 컴포넌트(페이지)
• 페이지 컴포넌트

<template>
  <div>
    <table class="table">
      <thead>
      <tr>
        <th scope="col">dno</th>
        <th scope="col">dname</th>
        <th scope="col">loc</th>
      </tr>
      </thead>
<!--      조회 데이터 생성 부분-->
      <tbody v-for="(data, index) in dept"
             :key="index"
        >
      <tr>
        <td>{{ data.dno }}</td>
        <td>{{ data.dname }}</td>
        <td>{{ data.loc }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import DeptService from "@/services/DeptService";

/* eslint-disable */
export default {
  data() {
    return {
      dept: []
    }
  },
  methods: {
    // 모든 회원 조회 서비스 호출
    retrieveDepts() {
      // axios로 spring에 모든 회원 조회 요청
      DeptService.getAll()
          //  성공하면 then으로 서버(spring) 데이터(response.data)가 들어옴
          .then(response => {
              console.log(response.data);
            this.dept = response.data.dept;
          })
    //  실패하면 catch로 에러메세지가 들어옴
          .catch( e => {
            alert(e);
          })
    }
  },
  //화면이 뜨자마자 실행되는 이벤트(모든 회원조회가 실행됨)
  mounted() {
    this.retrieveDepts();
  }
}
</script>