[Vue] Vue Axios, AJAX

1. Vue Style Guide

2. AJAX

- 동기와 비동기

3. Axios

4. API실습

1. Vue Style Guide

Priority A - 필수

(1) 컴포넌트 이름에 합성어 사용

- root 컴포넌트인 App과 , 등 Vue에서 제공되는 빌트인 컴포넌트를 제외하고 컴포넌트의 이름은 항상 합성어를 사용

- 모든 HTML 요소의 이름은 한 단어이기 때문에 합성어를 사용하는 것은 기존 그리고 향후 HTML 요소와의 충돌을 방지

 

(2) 컴포넌트 데이터

- 반드시 함수형태로 객체를 반환

 

(3) Props 

- 적어도 타입은 명시되도록 가능한 상세하게 정의. (코드 이해, 가독성 제고)

이와 같이 설명을 자세하게 명시해주는 것이 좋다

 

(4) v-for에 key지정

- 서브트리의 내부 컴포넌트 상태를 유지위해 v-for는 항상 key와 함께 요구된다

- key를 안 쓸 경우 순서대로 가져온다는 보장이 없다. 고유한 key값을 써야 일반적인 순서대로 가져온다

- 만약 고유한 key값이 아니라면, index를 사용하자!

 

(5) v-if와 v-for을 동시에 사용하지 말 것

- 일부 목록 제한하고 싶을 땐 computed사용

- 이거 일 때만 보여라면 v-if를 컨테이너 엘리먼트(=html 태그)로 올려서 작성

 

(6) 컴포넌트 스타일 스코프

- SFC(Single File Component. ex *.vue 파일)은 <template> <script> <style>을 한 파일에 가지는데,

- 해당 컴포넌트에서만 쓰려고 했던 스타일은 <style scoped> 로 해당 컴포넌트에서만 스타일을 쓴다고 지정

- 만약 scoped 없으면 <style> 태그 내 내용들을 모든 컴포넌트에 적용됨

 

(7) Private 속성 이름

- 플러그인, mixin 등에서 커스텀 사용자 private 프로퍼티에는 항상 접두사 $_ 를 사용

 

 

Priority B - 강력한 추천, 필수는 아님!

 

(1) 직접적으로 전역 컴포넌트 쓰지말고, 컴포넌트 파일을 나누어서 작성(*.js파일 or *.vue파일)

(2) SFC이름규칙은 파스칼, 케밥케이스로

(3) 단일 인스턴스 컴포넌트 이름: 활성 인스턴스가 하나만 있어야 하는 구성요소는 The접두사로 시작(ex. 헤더, 사이드바)

 

 

2. AJAX

 

(1) 동기 : 위에서부터 아래로 일을 순차적으로 하겠다. 때로는 비효율적이다. (ex. 치킨 주문 → 대기 → 먹기 → 빨래)

(2) 비동기 : 순차적으로 하는 것 같아보이나, 멀티태스킹 하는 것처럼 보인다. (ex. 치킨 주문해놓고 치킨도착알림(콜백함수)까지 빨래하기). 비순차적으로 함(콜백함수에 따라서)

- 차례대로 넣는다고 하나, 콜백함수에 따라서 뭐가 먼저 끝날지는 알 수가 없다. 콜백함수가 많을 수록 오래걸린다.

- WEB API 에서 끝나면 Task Queue(FIFO)로 가고, Event loop가 보고 있다가 Stack으로 간다.

JavaScript는 Single thread

▪ 이벤트를 처리하는 Call Stack이 하나

▪ 즉시 처리하지 못하는 이벤트들을 (Web API)로 보내서 처리

▪ 처리된 이벤트들은 처리된 순서대로 (Task queue)에 저장

▪ Call Stack이 공백 되면 (Event Loop)가 대기 줄에서 가장 오래된 이벤트를 Call Stack으로 보냄

콜백 지옥 : 콜백함수가 많을수록 깊이가 깊어진다. 

이들을 해결하기 위해 promise가 등장

 

XMLHttpRequest 객체

 

await : 결과가 올 때까지 기다리기 때문에 보다 동기 코드처럼 실행함.

 

 

 

3. Axios

- 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리

- Vue에서 권고하는 HTTP 통신 라이브러리

 

 

4. API 실습

 

주소창에 #붙으면 해시모드/ 아니면 히스토리 모드

vue create vue-api-pjt
cd vue-api-pjt
vue add router
npm i axios
npm run serve

- 스프링부트와 뷰 프로젝트를 동시에 켜서 연동해서 데이터를 주고 받는 프로젝트.

- 그러나 톰캣과 뷰는 같은 8080 포트번호를 사용하므로, 하나는 포트번호를 바꿔줘야 한다. (추후 다음주 실습)

 

index.js : 라우팅 설정, 라우터 매핑

- name 알고 있으면 <router-link> to에 링크 모르더라도 name으로 갈 수 있다

- 절대경로(@는 src와 같다).

 

HomeView.vue

- <srcipt> components에 Helloworld

- <template> 에 <Helloword> <hello-wordl> 모두 가능!

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

msg는 정적 props이다.

 

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
..
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
..
</style>

props가서 msg에서 받았다. 적어도 타입은 명시해준다.

 

 

 

이제는 Search가 아닌 YoutubeView에서 뜬다

 

.env.local : 환경변수에 관련한 설정(app_key 등 무분별한 남용 방지 위해 git에 올리지 않음). 회색파일 -> 비활성화

만약에 api_key가 undefined로 콘솔에 찍히면? 서버에 껐다 켜야 동작한다!

 

emit 이벤트 안 쓰고, vuex 에 데이터를 담아서 보관하여 쓰겠다