< Vue 정리 2 >

728x90

Module

프로그램을

기능별

로 여러개의 파일로 나누는 형태

Module System

CommonJS(NodeJS) - 웹 브라우저 밖에서도 동작될 수 있는 모듈 규칙 설립

AMD(Asynchronous Module Definition) - 비동기적 모듈 로딩

ESM(ECMAScript Module, ECMA215, ES6)

- 자바스크립트 자체 모듈

Module 정의 및 사용

가져오기 : import

import Module_Name from Module_place

내보내기 : export

export →

export default

예시 Code

파일명 - calc.js
export const title = '계산기 모듈'
export function add(i,j){
		return i+j;
}
export function sub(i,j){
		return i-j;
}

import  from '경로/calc.js';

Vue Component

참고 링크: https://kr.vuejs.org/v2/guide/components-registration.html

Vue의 가장 강력한 기능 중 하나

HTML Elemnet를 확장. 재사용 가능한 코드를 캡슐화하여 하나의 객체로 사용

Vue Componetn는 Vue Instance이기도하므로 모든 옵션 객체 사용

LifeCycle Hook 사용 가능

전역 컴포넌트와 지역 컴포넌트로 나뉘어있다

표기법

케밥 표기법

( 추천 )

ex) myGlobal → my-global

파스칼 표기법

ex) my-global → myGlobal

전역등록

Vue.component(''my-component-name", { // options })의 형태

어떤 루트 Vue 인스턴스(new Vue)에서도 사용 가능

예시 Code

// 등록
Vue.component('my-component', {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
})

// 루트 인스턴스 생성
new Vue({
  el: '#example'
})

<div id="example">
  <my-component></my-component>
</div>

지역등록

컴포넌트를

components 키워드

로 인스턴스의 옵션으로 등록.

예시 Code

var Child = {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 는 상위 템플릿에서만 사용할 수 있습니다.
    'my-component': Child
  }
})

<ul>,<ol>,<table>과<select>와 같은 일부 엘리먼트는 아래와 같이 사용

<table>
  <tr is="my-row"></tr>
</table>

data는 반드시 return 가능한 함수!

예시 Code

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 데이터는 기술적으로 함수이므로 Vue는 따지지 않지만
  // 각 컴포넌트 인스턴스에 대해 같은 객체 참조를 반환합니다.
  data: function () {
    return {
			counter: 0
	  }
  }
})

new Vue({
  el: '#example-2'
})

template

실제 화면에 나타나는 부분을 구현

적용방법1 template 간접구현 - 명시적으로 보이는 권장되는 방법.

<template id="ChildComp">
	  <div>
	    <h2>SSAFY {}지역 4기 {}</h2>
	  </div>
</template>

Vue.component('child-comp', {
		  props: ['area', 'message'],
		  template: '#ChildComp',
});

적용방법2 template 컴포넌트 안에 직접 구현

Vue.component('child-comp', {
		  props: ['area', 'message'],
		  template: `
					 <div>
					    <h2>SSAFY {}지역 4기 {}</h2>
				   </div>
					`,
});

props

부모가 자식컴포넌트에게 어떠한 데이터를 받을 때 사용

props와 vue instance와의 bind

<child-comp area="광주" :message="msg[parseInt(Math.random() * 4)]"></child-comp>
:message -> v-bind:message
message가 props
msg가 vue의 instance

컴포넌트간 통신

상위(부모) - 하위(자식) 컴포넌트 간의 data전달 방법

부모에서 자식 - props 속성 이용

자식에서 부모 - event로만 전달가능

하위 컴포넌트에서 상위 컴포넌트에 직접 참조하면 안된다!

예시 Code 1

Vue.component('child', {
  // props 정의
  props: ['message'],
  // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며
  // vm의 this.message로 사용할 수 있습니다.
  template: '<span>{{ message }}</span>'
})

<child message="안녕하세요!"></child>

예시 Code 2

<div id="app">
  <child-component :propsdata="message"> </child-component>
</div>
<script>
  Vue.component('child-component', {
    props: ['propsdata'],
    template: '<h2>{{ propsdata }}</h2>',
  });
  new Vue({
    el: '#app',
    data() {
      return {
        message: 'hello ssafy!!',
      };
    },
  });
</script>

예시 Code2의 props를 이용한 렌더링 과정

new Vue()로 상위 컴포넌트인 인스턴스 생성

Vue.component(tagName, options)를 이용해 하위 컴포넌트 (child-component) 생성

<div id="app"> 내부에 <child-component>로 하위 컴포넌트가 됨. 인스턴스 객체가 #app 요소로 부모.

하위 컴포넌트에 props 속성 정의 [propsdata]

html에 컴포넌트 태그(child-component)추가

하위 컴포넌트에 v-bind 속성 사용. 상위 컴포넌트의 data의 key에 접근 가능(message)

상위 컴포넌트의 message 속성 값인 String 값이 하위 컴포넌트의 propsdata로 전달

하위 컴포넌트의 template 속성에 정의된 <span>{}</span>에 전달

이벤트 처리할때

이벤트 이름

컴포넌트 및 props와는 달리, 이벤트는 자동 대소문자 변환을 제공하지 않음

대소문자를 혼용. 대신 emit할 정확한 이벤트 이름 작성 권장

v-on 이벤트 리스너는 항상 자동으로 소문자 변환.

v-on:myEvent → v-on:myevent

이벤트 이름은 kebab-case 권장

이벤트 호출 : emit

이벤트 호출 코드

vm.$emit('이벤트명',[파라미터]);

this.$emit('sendMsg', '안녕하세요 여러분');

이벤트 설정 : on

this.$on('sendMsg', → onsendMsg라는 이벤트 설정

(msg)⇒ { } == callback함수

이벤트 수신 코드

vm.$on('이벤트명',callback_function(){});

creadted(){ // 라이프사이클 생성시
	this.$on('sendMsg', (msg) => { // onsendMsg라는 이벤트라고 생각하자
		alert(msg);
		this.message = msg;
	});
}

이벤트 버스를 이용

const bus = new Vue();

bus.$emit('updateLog', this.count);

bus.$on('updateLog', this.updateLog);

권장하는 방법은 아니다

키 눌림 이벤트

@keyup="sendId" // 키가 눌릴때마다 호출

@keyup.13="sendId" // 13은 'enter' 키

@keyup.enter="sendId" // 조금 더 직관적으로 볼 수 있게 enter명시

<button @click="sendId"> // 버튼 클릭 시 호출

Axios

Vue에서 권고하는 HTTP 통신 라이브러리. REST와 AJAX와 비슷.

Promise 기반의 HTTP 통신 라이브러리. 깔끔한 문서화 다양한 API.

Promise : 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 라이브러리. 자바스크립트는 단일 스레드로 코드를 처리. 특정 로직의 처리가 끝날때까지 기다려주지 않음. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실핼해야만 할 때 Promise 활용.

참고 : https://github.com/axios/axios

설치 방법

CDN 방식

Code

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

NPM 방식

Code
```
npm install axios
```

API 유형

axios.get('URL주소').then().catch()

URL주소에대해 HTTP GET요청을 보냄. 성공이면 then으로 오류면 catch

예시 Code

// GET request for remote image in node.js
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

axios.post('URL주소').then().catch()

URL주소에대해 HTTP POST요청을 보냄. 성공이면 then으로 오류면 catch

예시 Code

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios()

HTTP요청에 대한 자세한 속성 직접 정의

예시 Code

<script>
  const addr = 'http://localhost:9999/vue/api/board';

  new Vue({
    el: '#app',
    data: {
      articles: [],
    },
    created() {
      axios
        .get(addr)
        .then((response) => {
          this.articles = response.data;
        })
        .catch((error) => {
          console.dir(error);
        });
    },
  });
</script>

Promise - 상세

promise - 함수형태

ES6부터 제공

형식 : new Promise(Executor)

Executor : 콜백함수

객체가 생성되면 대기(Pending) 상태 → 이행 / 거부 되지않은 초기 상태

생성 예시 Code

new Promise(() => {
  console.log('callback 실행');
}); // 대기 상태 (Pending)

Executor : function(resolve, reject){

resolve, reject 둘 다 함수이다

resolve : 이행(fullfilled): 연산이 성공적으로 완료함

resolve함수 호출 시 내부적으로 then 호출

reject : 거부(rejected) : 연산이 실패함

reject 함수 호출 시 내부적으로 catch 호출

}

Executor resolve 예시 Code

new Promise((resolve, reject) => {
console.log('callback 실행');
/*
// ajax와 함께 이런식으로 사용
$.ajax({
   url: 'aaa',
   success: () => {
       resolve();
      },
      error: () => {
          reject();
      },
  });
*/
resolve(); // 이행 상태 (fulfilled)
//reject(); // 거부 상태 (rejected)
}); // 대기 상태 (Pending)

/* 
function Promise(callback) {
  function success() {}
  function fail() {}
  callback(success, fail);
}
*/

Executor reject 예시 Code

new Promise((resolve, reject) => {
  console.log('callback 실행');
  setTimeout(() => {
      /*
      console.log('결과성공');
      resolve();
      */
      console.log('결과실패');
      reject();
  }, 2000);
});

Executor then catch 예시 Code

const promise = new Promise((resolve, reject) => {
console.log('callback 실행 start');
setTimeout(() => {
  resolve(); // 내부적으로 then 호출
  //reject(); // 내부적으로 catch 호출
}, 2000);
console.log('callback 실행 end');
});

// then(callback function)
// catch(callback function)
promise
.then(() => {
  console.log('결과 성공');
})
.catch(() => {
  console.log('결과 실패');
});

Executor resolve, reject에서 데이터 보내기 예시 Code

const promise = new Promise((resolve, reject) => {
  console.log('callback 실행 start');
  setTimeout(() => {
      resolve({ msg: 'success', data: [1, 2, 3, 4, 5] }); // then 호출
  }, 2000);
  console.log('callback 실행 end');
});

// then(callback function)
// catch(callback function)
promise
  .then((result) => {
      console.log('결과 성공');
      console.log(result);
      console.log(result.msg);
      console.log(result.data);
  })
  .catch(() => {
      console.log('결과 실패');
  })
  .finally(() => {
      console.log('마지막에 항상 실행!');
  });

axios에 Promise 객체를 넘기며 적용해는 Code

function axios() {
  return new Promise((resolve, reject) => {
      console.log('callback 실행 start');
      setTimeout(() => {
          resolve({ msg: 'success', data: [1, 2, 3, 4, 5] }); // then 호출
      }, 2000);
      console.log('callback 실행 end');
  });
}

// then(callback function)
// catch(callback function)
axios()
  .then((result) => {
      console.log('결과 성공');
      console.log(result);
      console.log(result.msg);
      console.log(result.data);
  })
  .catch(() => {
      console.log('결과 실패');
  })
  .finally(() => {
      console.log('마지막에 항상 실행!');
  });

axios에서 특정 url 호출해서 데이터 넘기는 Code

function axios(url, options) {
  return new Promise((resolve, reject) => {
      console.log('callback 실행 start');
      console.log(`$ 호출하여 데이터 저장하기`);
      setTimeout(() => {
          resolve({ msg: 'success', data: [1, 2, 3, 4, 5] }); // then 호출
          // reject // catch 호출
      }, 2000);
      console.log('callback 실행 end');
  });
}

// then(callback function)
// catch(callback function)
axios('http://localhost:8888/board', {
  method: 'POST',
  data: { wirter: 'hong', title: 'promise test' },
})
  .then((result) => {
      console.log('결과 성공');
      console.log(result);
      console.log(result.msg);
      console.log(result.data);
  })
  .catch(() => {
      console.log('결과 실패');
  })
  .finally(() => {
      console.log('마지막에 항상 실행!');
  });

ajax 콜백헬

callback 함수를 무자비하게 부르는 것. 1번 성공 → 2번 호출 → 성공 → 3번 호출 → 성공 → 4번호출 ——— 이와 같은 것을 콜백헬이라고 부른다.

Promise를 이용하면 이를 해결할 수 있다.

$.ajax({
  // 1번 작업하기
  url: '1번 작업',
  success: () => {
      $.ajax({
          // 2번 작업하기
          url: '2번 작업',
          success: () => {
              $.ajax({
                  // 3번 작업하기
                  url: '3번 작업',
                  success: () => {
                      $.ajax({
                          // 4번 작업하기
                          url: '4번 작업',
                          success: () => {
                              console.log('성공');
                          },
                      });
                  },
              });
          },
      });
  },
});

axios 콜백헬 해결 Code

function axios(url, options) {
  return new Promise((resolve, reject) => {
      console.log('callback 실행 start');
      console.log(`$ 호출하여 데이터 저장하기`);
      setTimeout(() => {
          resolve({ msg: 'success', data: [1, 2, 3, 4, 5] }); // then 호출
          // reject // catch 호출
      }, 2000);
      console.log('callback 실행 end');
  });
}

// 콜백헬 해결.
axios('1번 작업 호출', { method: 'POST' })
  .then((result) => {
      console.log('1번 작업 결과 성공');
      return axios('2번 작업 호출', { method: 'POST' });
  })
  .then((result) => {
      console.log('2번 작업 결과 성공');
      return axios('3번 작업 호출', { method: 'POST' });
  })
  .then((result) => {
      console.log('3번 작업 결과 성공');
      return axios('4번 작업 호출', { method: 'POST' });
  })
  .then((result) => {
      console.log('4번 작업 결과 성공');
  })
  .catch(() => {
      console.log('결과 실패');
  })
  .finally(() => {
      console.log('마지막에 항상 실행!');
  });

async-await 키워드

async는 항상 Promise 객체를 반환

await가 없다면

항상 동기적 실행

만 한다.

예시 Code

async function func01() {
  return 1;
}

console.log('func01 call');
console.log(func01());

// asnyc 키워드를 사용하지 않으면 아래와 같은 모양
function func02() {
  return new Promise((resolve) => {
      resolve(1);
  });
}

console.log('func02 call');
console.log(func02());

await 사용 방법

await 키워드 뒤에는 Promise 객체가 와야한다.

항상 ! async 함수와 함께 사용한다!

예시 Code

function axios(url) {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          resolve('결과 처리 성공');
      }, 2000);
  });
}

console.log('1');
axios('http://localhost:9999/board').then((result) => {
  console.log(result);
});
console.log('2');

let result = await axios('http://localhost:9999/board');
console.log('await 동기처럼 실행한다... 근데 에러가 발생한다!!?');

await는 성공한 경우에만

받을 수 있다.

reject인 경우에는 에러 처리기능이 없기때문에

반드시 에러 처리

를 해줘야한다.

예시 Code

function axios(url) {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          resolve('결과 처리 성공');
      }, 2000);
  });
}

async function callAxios() {
  console.log('1');
  axios('http://localhost:9999/board').then((result) => {
      console.log(result);
  });
  console.log('2');

  // 아래 await 키워드부터 axios 끝날때까지 멈춤.
  try {
      let result = await axios('http://localhost:9999/board');
      console.log('processing axios start');
      console.log('await: ', result);
      console.log('processing axios end');
  } catch {
      console.log('reject인 경우!');
  }
}

console.log('callAxios before');
callAxios();
console.log('callAxios after');

Router

라우팅 : 웹 페이지 간의 이동방법

Vue.js의 공식 라우터

라이터는 컴포넌트와 매핑!

SPA(Single Page Application)를 제작할 때 유용

URL에 따라 컴포넌트 연결!

화면 전환 없이 출력

이 가능.

개발자의 편의를 위해 경로이동식으로 보여준다.

예시 Code 1

모두 각각의 파일로 빼낼 수 있으며, 목표이다.

// a태그의 href대신에 사용한다.
<router-link to="경로">TEST</router-link>

// 현재 라우터에 맞는 컴포넌트가 렌더링 된다.
<router-view></router-view>

<script>
		// 각각의 컴포넌트. js파일이라 생각
		const Main = { 
        template: `<div>메인페이지입니다</div>`,
    };

	 // 경로와 컴포넌트의 연결
		const router = new VueRouter({
        routes: [
          {
            path: '/',
            component: Main,
          }]
		});

		// vue 인스턴스에 router 키워드로 주입
		new Vue({
        el: '#app',
        router,
    });
</script>

예시 Code 2

이름으로 링크를 걸때는 : 로 바인딩

<p>
  <router-link :to="">HOME</router-link>
  <router-link :to="">게시판</router-link>
  <router-link :to="">QnA</router-link>
  <router-link :to="">갤러리</router-link>
</p>

mode 설정과 name 설정. 라우트 안에 자식관계(

중첩라우팅

)도 설정이 가능하다.

mode: 'history',
routes: [
  {
    path: '/board',
    name: 'board',
    component: Board,
    redirect: '/board/list',
    children: [
      {
        path: 'list',
        name: 'boardlist',
        component: BoardList,
      },
      {
        path: 'write',
        name: 'boardwrite',
        component: BoardWrite,
      },
      {
        path: 'detail/:no',
        name: 'boardview',
        component: BoardView,
      },
      {
        path: 'update/:no',
        name: 'boardupdate',
        component: BoardUpdate,
      },
    ],
  },
]

예시 Code 3

a 태그와 href 태그를 이용해 프로그래밍 방식 라우터를 구성할 수 있다.

<p>
  <a href="#main" @click="$router.push('/')">HOME</a>
  <a href="#board" @click="$router.push('/board')">게시판</a>
  <a href="#qna" @click="$router.push()">QnA</a>
  <a href="#gallery" @click="$router.push()">갤러리</a>
</p>

CDN

CDN Code

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

참고 : https://router.vuejs.org/kr/

Uploaded by Notion2Tistory v1.1.0

'Vue > Vue 정리' 카테고리의 다른 글

< Vuex > (0)	2021.01.06
< Vue / Cli > (0)	2021.01.06
< ES6 - Destructuring / LocalStorage > (0)	2021.01.06
< Vue 정리 > (0)	2021.01.06

하루하루 성장하자!!

< Vue 정리 2 >

Module

Module 정의 및 사용

Vue Component

data는 반드시 return 가능한 함수!

template

props

컴포넌트간 통신

예시 Code2의 props를 이용한 렌더링 과정

이벤트 처리할때

키 눌림 이벤트

Axios

API 유형

Promise - 상세

async-await 키워드

Router

CDN

'Vue > Vue 정리' 카테고리의 다른 글

티스토리툴바

< Vue 정리 2 >

Module

Module 정의 및 사용

Vue Component

data는 반드시 return 가능한 함수!

template

props

컴포넌트간 통신

예시 Code2의 props를 이용한 렌더링 과정

이벤트 처리할때

키 눌림 이벤트

Axios

API 유형

Promise - 상세

async-await 키워드

Router

CDN

'Vue > Vue 정리' 카테고리의 다른 글

관련글

티스토리툴바