NUA의 개발공부로그

NavigationDuplicated 에러는 

Vue router를 사용할 때 생길 수 있는 에러이다.

해결법은

router.go(router.currentRoute);

를 통해 해결할 수 있다.

Navigation gaurd

routes: [
    {
        path: "/home",
        component: Home
        beforeEnter: (to, from, next) => {
            if (localStorage.getItem("key") == null) {
                return next({
                    path: "/login",
                    query: { redirect: to.fullPath }
                });
            }
            next();
        };
    }
]

• 위 예시와 같이 네비게이션 가드를 통해 특정 라우팅에 대해 가드를 설정할 수 있다.
• 쉽게 말해, 특정 컴포넌트로 이동하기 전에 조건 처리를 통해 로그인이 되었는지 등 검증 로직을 수행할 수 있는 방법이다.

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/03.html

디렉티브

디렉티브(v- 로 시작하는 것) 는 화면에 뿌려주는 과정을 편하게 하기 위함.

v-bind : 값을 연결할 때

v-on : 이벤트를 연결할 때 

v-if (조건) : false, true로 변경함에 따라 tag의 보이는 유무 제어 (false일 때 element tag에서 아예 제외된다)

v-show : v-if와 같이 화면에 보이는 유무 제어 (다른 점은, v-show는 css의 display 속성이 none으로 바뀌는 것이기 때문에, DOM으로는 남아 있다)

npm

- https://joshua1988.github.io/webpack-guide/build/npm-module-install.html#npm-%EC%84%A4%EC%B9%98-%EB%AA%85%EB%A0%B9%EC%96%B4

- http://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html

npm

- https://www.npmjs.com/package/vue

- 버전 관리를 용이하게 하기 위함

- 버전이 다르다면 가져온 라이브러리가 호환이 안될 수도 있기 때문에, 그것을 해결하기 위해 npm이 필요함

npm i @vue/cli -g로 설치한다 ( === npm install @vue/cli -global)

npm init -y (모든 option을 yes로 처리) -> package.json 생성

package-lock.json : 특정 라이브러리를 설치할 때 또다른 라이브러리를 설치해야 할 수도 있기 때문에 생기는 것

npm i jquery와 같이 라이브러리를 install 하면

"dependencies": {
	    "jquery": "^3.4.1"
}

node_modules 폴더 밑에 jquery 폴더가 생기고, 가져다 쓸 수 있음

ES6 에서는 CDN 방식(script)로 접근하지 않고, import로 라이브러리에 접근한다.

npm i jquery-ui@1.10.5 처럼 @+ (버전) 으로 특정 버전을 설치할 수 있다.

package.json에 필요한 모든 패키지가 명시가 되어 있으므로, node_modules를 제외하고 새로운 폴더로 옮긴 후에, npm i 명령어를 통해 옮긴 후에 node_modules를 생성하는 식으로 프로젝트 위치 변경 용이하다. 따라서 git으로 올릴 때에도 package.json과 package-lock.json을 같이 올리는 것이 좋다.

Vue CLI

CDN은 인터넷 연결이 되지 않으면 사용 불가

setup된 project에서 개발하기 위해 Vue CLI를 쓰는 것임 (명령어로 프로젝트 구성하는 도구)

1. vue create todo-app (프로젝트 생성, 생성 option은 사전 설정 없으면 defalut로 하면 된다)

2. cd todo-app

3. npm run serve (프로젝트 실행)

vue! : vscode에서 .vue 파일로 개발할 때 single file component(html+css+js) 자동 생성 단축키

vue cli가 live server로 열리지 않는 이유 : HTML, CSS, JS는 브라우저가 인식 가능하지만, Vue 파일은 인식할 수 없기 때문이다.

vue cli에서 서버 명칭 : webpack-dev-server

로딩해주는 것 : vue-loader

-> 이러한 잡다한 부분을 vue-cli의 최신 버전들은 @vue-cli 폴더 등에 넣어놓음

eslint error overlay 해제

VS Code에서 eslint 관련 에러를 뜨지 않게 하려면

project에 vue.config.js 파일 생성한 후에 아래와 같이 타이핑하고 저장

module.exports = {
    devServer: {
        overlay: false,
    }
}

Javascript 모듈화

(function(){
...
})(); 

즉시 실행함수 : function 전체를 ()로 감싸고 끝날 때 ()를 붙여준다.

Component

component는 components 폴더 안에 작성할 것으로 권고됨

app.vue에서 component를 들고 오기 위해

app.vue에서

import TodoHeader from "./components/TodoHeader.vue";

(vim + tab으로 자동완성 쉽게 가능) 

export default {
  components: {
    "todo-header": TodoHeader
  }
};

이렇게 컴포넌트 등록할 수 있음 

component가 data를 참조하지 않게 하기 위해

//data : {} 객체로 만들면 에러가 난다.
    //컴포넌트에 data를 선언할 때는 function 형태여야 한다.
    data() {
        return {
            inputText: '',
        };
    },

v-model

v-model : 양방향 데이터 바인딩

<input type="text" v-model="inputText" />
<button v-on:click="addItem">add</button>

addItem: function() {
            var value = this.inputText;
            localStorage.setItem(value, value);
            this.clearInput();
        },

localStorage.setItem(‘1’, ‘item 1’) 

: 껐다가 다시 켜도 local storage에 저장되어 있음

v-for

<li v-for="(item, index) in todoItems" :key="index">
                {{ item }}
</li>

v-for를 돌 때에 key값은 idx 혹은 id로 구별한다.

created (in 라이프사이클)

component가 생성되자마자 호출된다.

Container presentational component

- https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/02.html

<event>

Addeventlistener -> dom이 많아졌을 때, 길어져서 관리하기 힘들다

-> vue에서는 v-on

<button id="btn" v-on:click="logText">click me</button>

ㄴ 버튼의 역할에 대해서 바로 알 수 있다.

Object가 변경되었을 때 vue가 알아서 처리

<카멜케이스와 파스칼케이스>

카멜 케이스 – appleBananaPineapple

파스칼케이스 – AppleBanananPineapple 

<Vue Instance>

인스턴스 -> object를 생성자(new~)로 만든 것

Vue 3버전 -> proxy 로 object 관리

    <script>
    	var vm = new Vue({
        	el: '#app'      
        })    
    </script>

https://vuejs.org/v2/api/#el

<뷰 컴포넌트>

- 디버깅이 쉽고, 재사용률 높아짐

- 컴포넌트 이름 : { 컴포넌트 내용} -> <body>의 <div id=’app’> 태그에 컴포넌트 표시

- 전역 컴포넌트 -> 어떤 컴포넌트 있는지 보기 힘듬 -> 지역 컴포넌트로 선언 대다수

일반적으로는 컴포넌트의 template을 사용해서 tag를 정의하지만

중복되는 경우에 HOC (high order component)를 사용 (with render function & jsx)

https://kr.vuejs.org/v2/guide/render-function.html?

vuejs에서 권고되는 방법은 mixins 이나 scoped slot(data 중복시) 사용

react 에서는 함수 => 함수 => 이런 식으로 사용

vue 파일에서 

<template> - html

<script> - js

<style> - css

<Vue Component 간 통신>

React 는 data를 아래서 위로 올릴 수 없다

Vue는 아래서 위, 위에서 아래 둘다 가능

ㄴ 상위 -> 하위 (props 전달)  ::: flux 구조 (MVC pattern이 아님)

ㄴ 하위 -> 상위 (이벤트 발생)

Props (상위에서 하위로 data 보내기) : v-bind

Appheader.title -> vue는 이런 식으로 참조 불가능!! 하기 떄문에 props 사용

<app-header v-bind:프롭스 속성이름 ="상위 컴포넌트의 데이터 이름"></app-header>
<app-header v-bind:propsdata ="title"></app-header>

components : {        
	// '컴포넌트 이름' : '컴포넌트 내용' 
    'app-header' : {   
    	template : '<h1> {{propsdata}} </h1>',    
        props: ['propsdata']           
        } 
}

https://vuejs.org/v2/guide/components-props.html#Prop-Validation

Event (하위에서 상위로 data 보내기) : v-on

Vue.component('app-contents', {    
		template : `      
        	<main>             
        		전역 컴포넌트        
            	<button v-on:click="sendEvent">변경</button>       
            </main>`,          
        method : {             
            sendEvent: function() {      
                this.$emit('change'); //아래서 위로 올릴 때 $emit 사용            
            }          
        }        
})

<app-contents v-on:하위 컴포넌트의 이벤트이름="상위 컴포넌트의 메서드 이름"></app-contents>

<VSCODE prettier 설정>

Prettier -> setting -> prettier 검색

Format on save 체크

Vue.component("sibling-component", {  
	props: ["propsdata"], 
    template: `    
    	<div>     
        	{{ propsdata }}      
            <button> click me </button>   
            </div>`
});

//vue component에는 최상위에 하나의 tag만 있어야함(<div>) 
//이러한 문제로 프론트가 컴포넌트 설계하고, html,css 퍼블리셔에게 요청

케밥 표기법 (change-message) (changeMessage)가 아님!

->  이렇게 안쓸거면 change:message

->  v-on:change:message === @change:message

<Vue와 React 비교>

[Vue.js]

-       화면 렌더링 라이브러리 (vue.js 코어 라이브러리)

-       페이지 전환 라이브러리 Vue Router

-       여러 컴포넌트의 데이터 관리 라이브러리 Vuex

-       프로젝트 생성 도구 Vue CLI

-       테스팅 도구 Vue Test Utils

-       (X) HTTP 통신 라이브러리 Vue Resource -> 원래 프로젝트에서 붙이기 쉽게 하기

         -> jQuery ajax / axios / request 등 다양하게 씀

[React]

-       화면 렌더링 라이브러리 (코어)

-       여러 컴포넌트의 데이터 관리 라이브러리 1 Redux

-       여러 컴포넌트의 데이터 관리 라이브러리 2 Mobx

-       React Router

-       React CLI (Create React App)

<Axios>

Axios -> promise based

new Vue({    
	el: "#app",     
    data: {          
    	users: []   
    },      
    methods: {    
    	getData: function() { 
        	var vm = this;      
            axios             
              .get("https://jsonplaceholder.typicode.com/users/") //test api   
              .then(function(response) {     
              	console.log(response.data);       
                vm.users = response.data;        
              });         
        }       
    }      
});

fetchData : function(){ //http protocol 요청 method 4개     
				axios.get()    
                axios.post()       
                axios.put()     
                axios.delete()        
            }

Callback 함수안의 this-> var vm=this 처럼 선언하지 않으면 this가 window(브라우저)를 가리킨다.

<비동기>

var data = axios.get(url);

이렇게 쓸수없다!!!!

Single thread -> 비동기 처리를 받아오기 위해서 다른 작업을 못하는 것

VuePress를 사용하여 gh-pages에 블로그를 deployment 하는 과정에서 

3개의 검정색 정사각형이 나타나며, VuePress의 기본 template이 깨지는 현상이 있었다.

sidebar-button을 가리키는 div tag에 생긴 에러였다. 

이게 local에서 vuepress dev로 localhost 포트를 열어서 확인할 때는 괜찮은데, 

github에 deploy했을 때 깨지는 것이어서 구글링하며

뭐가 잘못됐는지 확인하려고 쓸데없이 엄청 커밋을 많이 했다.

해결법은 .vuepress 폴더 아래의 config.js에 아래 그림과 같이

 해당 프로젝트의 github에 저장소에 해당하는 이름을

base : '/<repository>/'

이렇게 추가해주면 해결된다. 

Custom elements in iteration require 'v-bind:key' directives. 

라는 에러에 대한 해결법입니다. 

vuejs로 Todo list 만드는 강의 보면서 코드 작성하다가

eslint-plugin-vue로 자꾸 v-for 디렉티브에는 v-bind:key 추가하라는 error에 걸려서 

계속 구글링하다가 답을 찾아서 메모합니다 :)

2.2.0 이상에서 v-for 는 key가 필수입니다.

v-for를 돌 때에 key값은 index 혹은 별도의 id로 구별합니다.

<li v-for="(item, index) in todoItems" :key="index">
                {{ item }}
</li>

vue.js 공식문서에서 답을 찾았습니다

: https://kr.vuejs.org/v2/guide/list.html#v-for-%EC%99%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8