#devspace

문제 상황

Vue는 template 단에서 html 요소와 component 요소가 혼동되지 않도록 component 이름을 복합어로 권장한다.

해결 방법

하단의 속성을 프로젝트 package.json의 rules에 추가

공식 Reference

vue/multi-word-component-names

문제 상황

VS Code에서 프로젝트의 ESLint 설정 파일을 인식하는 부분에서 에러 발생

해결 방법

하단의 코드를 VS Code의 settings.json에 추가

Reactivity

• 객체의 동작을 재정의함
• 데이터의 변경이 화면에 바로 반영됨

<div id="app"></div>

<script>
var div = document.querySelector("#app");
var viewModel = {};

// Object.defineProperty(대상 객체, 객체의 속성, {
// 정의할 내용
// });

// 즉시 실행 함수
(function () {
    function init() {
        Object.defineProperty(viewModel, "str", {
            get: function () {
                console.log("접근");
            },
            set: function (newValue) {
                console.log("할당", newValue);
                render(newValue);
            },
    });
}

    function render(value) {
        div.innerHTML = value;
    }

    init();
})();
</script>

인스턴스

속성

new Vue({
    el: ,
    template: ,
    data: ,
    methods: ,
    created: ,
    watch: ,
});

컴포넌트

• 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능
• 재사용성이 향상되어 화면을 빠르게 제작 가능

전역 컴포넌트

// Vue.component('컴포넌트 이름', 컴포넌트 내용);
// 전역 컴포넌트 - 거의 안씀
Vue.component("app-header", {
    template: "<h1>Header</h1>",
});

Vue.component("app-content", {
    template: "<div>content</div>",
});

지역 컴포넌트

new Vue({
    el: "#app",
    // 지역 컴포넌트 등록 방식
    components: {
        // '컴포넌트 이름': 컴포넌트 내용
        "app-footer": {
            template: "<footer>footer</footer>",
        },
    },
});

컴포넌트와 인스턴스의 관계

• 전역 컴포넌트는 인스턴스를 새로 생성하고 components에 넣어주지 않더라도 반영이 되지만 (이미 등록이 되어 있음)
• 지역 컴포넌트는 인스턴스를 새로 생성하고 components에 넣어주어야 반영이 됨

컴포넌트 통신 방식

• props 전달

• event emit

뷰 라우터

• SPA를 구현할 때 사용하는 라이브러리

사용 방법

• CDN 순서 주의! (vue -> vue router 순)
• npm으로 설치할 수도 있음

<script src="[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)"></script>
<script src="[https://unpkg.com/vue-router@3/dist/vue-router.js](https://unpkg.com/vue-router@3/dist/vue-router.js)"></script>

옵션

• routes : 라우팅 할 URL와 컴포넌트 값 지정
• mode : URL의 해쉬 값 제거 속성 (mode: history)

router-view

• Vue의 싱글 페이지
• URL이 변경되면 해당 컴포넌트가 화면에 뿌려지는 지점을 정함

router-link

• html의 a href 같은 기능
• 페이지 이동

axios

• Vue에서 권고하는 Promise 기반의 HTTP 통신 라이브러리
• 문서화 잘 되어 있고, API가 다양함

설치

• CDN

<script src="[https://unpkg.com/axios/dist/axios.min.js](https://unpkg.com/axios/dist/axios.min.js)"></script>

• NPM

npm install axios

사용방법

<div id="app">
  <button v-on:click="fetchData">get data</button>
</div>

new Vue({
  el: '#app',
  methods: {
    fetchData: function() {
      axios.get('https://jsonplaceholder.typicode.com/users/')
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
})

get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드
실행하면 사용자 정보가 콘솔에 출력됨

템플릿

데이터 바인딩

뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법

<div>{{ message }}</div>

new Vue({
  data: {
    message: 'Hello Vue.js'
  }
})

디렉티브 (v-)

뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법

• 자주 사용되는 디렉티브
  • v-if
  • v-for
  • v-bind
  • v-on
  • v-model (2-way 데이터 바인딩)

watch

특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행하는 속성
값을 계속 추적, 이전 값과 바뀐 값을 받을 수 있음, 데이터 요청

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message: function(value, oldValue) {
      console.log(value);
    }
  }
})

message의 데이터가 변할 때마다 watch 속성에 정의한 message 함수가 실행되면서 콘솔에 변한 데이터 출력

computed

바뀐 값에 대해서 모름, 빠름, 캐시 같은 느낌, validation이나 간단한 연산 가능, 가독성 향상

computed: {
  reverseMessage() {
    return this.message.split('').reverse().join('');
  }
}

<div>{{ reverseMessage }}</div>

• watch보다 computed 쓰는 것을 추천함

싱글 파일 컴포넌트

• vue-cli로 프로젝트 생성후 App.vue
• .vue 파일을 모두 싱글 파일 컴포넌트라고 함

<!-- .vue 파일 구조 -->
<template>
  <!-- html (뷰 컴포넌트의 표현단, 템플릿 문법) -->
</template>

<script>
  // 자바스크립트 (뷰 컴포넌트 내용)
</script>

<style>
  /* CSS (뷰 템플릿의 스타일링) */
</style>

동작 원리

• 싱글 파일 컴포넌트는 뷰 로더에 의해 HTML, CSS, JS와 같은 웹 자원으로 분리되어 실행됨
• 뷰 로더는 웹팩의 로더 종류 중 하나이고 뷰 CLI로 프로젝트를 생성하면 기본적으로 설정되어 있음

개발환경

• macbook pro (2019)
• macOS Monterey 12.6.2
• node 18.14.0 (LTS)
• IDE : vscode

node.js 설치

• node 공식 다운로드 (LTS 설치)

vscode 플러그인 설치

• Vetur (vue 2.x)

• Volar (vue 3.x)

chrome 플러그인 설치

• Vue.js devtools
  크롬 개발자 도구에서 Vue 코드를 더 잘 파악할 수 있게 도와줌

vue-cli

뷰로 빠르게 프로젝트를 구성하고 프로토 타이핑 하고 싶을 때 사용하는 CLI 도구

✅ 공식문서

https://cli.vuejs.org/guide/installation.html

설치

• npm(node package manager)을 사용하기 위해 기본적으로 node.js가 설치되어 있어야 함

sudo npm install -g @vue/cli

# 버전 확인
vue --version

프로젝트 생성

vue create [프로젝트명]

❗️ 진행 시 주의할 점
vuetify 추천 버전을 사용하기 위해서는 vue2를 설치해야 한다.

설치 완료라고 예쁘게 뜬 메시지를 확인할 수 있다.

설치 확인

npm run serve

• http://localhost:8080 접속

vuetify

• vue 기반의 UI 프레임워크
• bootstrap의 경우 css 위주이지만 vuetify는 js가 많이 포함되어 동적인 요소가 많음

적용

• vue-cli가 설치된 프로젝트에 추가해야 함

vue add vuetify

• recommended 설치

❗️ 진행 시 주의할 점
vuetify3는 프리뷰 버전이기 때문에, 추천 버전인 vuetify2를 사용하기 위해서는 vue2를 설치해야 함!

vue3를 설치한 경우 아래와 같은 에러가 발생한다.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.

아래와 같은 메시지가 출력되면 잘 설치된 것이다!

설치 확인

npm run serve

• http://localhost:8080 접속

Reference

https://velog.io/@doobyeol/Vue-프로젝트-매니저-Vuetify-설치

Vue.js

프론트엔드 개발을 쉽게 하기 위한 자바스크립트 프레임워크

MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리

• View(html DOM) : 사용자에게 보이는 화면
• View Model : View와 Model의 중간 영역으로 DOM Listener와 Data Binding을 제공하는 영역
• Model(JS) : 서버에서 가져온 데이터를 자바스크립트 객체로 저장

• DOM : HTML 요소를 담고 있는 데이터 트리
• DOM Listener : DOM 변경에 즉각적으로 반응하여 특정 로직을 수행
• Data Binding : View에 표시되는 내용과 모델의 데이터를 동기화

장점

• 러닝커브가 낮음
• React, Angular에 비해 가볍고 성능이 빠름
• React(Virtual DOM), Angular(데이터 바인딩)의 장점을 취함
• 컴포넌트 기반 프레임워크로 뷰 구성, 코드 재사용이 쉬움

💡 Virtual DOM

화면에 변화가 있을 때 변경사항을 실시간으로 수정하지 않고, Virtual DOM을 이용해 메모리에서 처리하고 DOM을 한번만 수정한다. 결과적으로 브라우저는 렌더링을 한번만 하게 되기 때문에 렌더링 성능을 높인다.

Reference

https://happy-jjang-a.tistory.com/114