Vue란?
- 사용자 인터페이스를 구축하기 위한 JavaScript Framework
- 컴포넌트 기반 프로그래밍 모델 제공
- 양방향 데이터 바인딩 지원 (Component <-> Model)
- 컴포넌트 간의 통신은 React와 같이 단방향 데이터 흐름 (Parent -> Child) 사용
- Angular, React 등 다른 Framework 보다 상대적으로 가볍고 빠름
- Virtual DOM 지원
- SFC(Single File Component, HTML/CSS/JS가 하나에 다 들어있다) 지원
Vue의 2가지 핵심 기능
1. 선언적 렌더링(Declarative Rendering)
: 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태를 기반으로 HTML을 선언적(declaratively)으로 작성할 수 있다.
2. 반응성(Reactivity)
: JavaScript 상태 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행
MVVM 패턴
- 서버와 연계되는 데이터(Model)와 UI 코드 및 UI 동작(View) 간의 분리와 데이터 연계를 위한 중간 매개체로의 역할(ViewModel)을 담당하는 패턴
Vue Components
I. 전역 컴포넌트
Vue.component(tagName, options)
II. 지역 컴포넌트
=============================================================================
Axios 란? javascript Application에서 서버 통신을 하기 위한 HTTP 통신 라이브러리이다.
- GET(서버 데이터 요청)/POST(서버 데이터 수정)/PUT(서버 데이터 입력)/DELETE(서버 데이터 삭제) 로 데이터 처리 가능.
- Promise 기반의 javascript 비동기 처리 방식을 사용함.
- 처리 순서를 지정하지 않으면 request 요청 후 response로 응답을 받기 전에 다음 구문을 수행하기 때문에 원하는 결과를 받아오지 못한다.
=> async/await 를 활용하여 처리 순서 지정해주어야 함.
비동기 처리 (async/await)
- 오류 디버깅을 위해 try/catch 구문 사용해야 함.
{{ ... }} : 텍스트 바인딩, Mustache(이중 중괄호)로 해당 컴포넌트 인스턴스의 속성값을 활용할 수 있음, 변경 시 자동 업데이트.
ex)
``` <template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: "left's start",
}
},
}
</script>```
위의 코드처럼 template에는 script에 있는 data명을 {{}}로 감싼다.
데이터를 HTML이 아닌 일반 텍스트로 해석함. <-> 실제 HTML을 출력하려면 v-html 디렉티브 활용.
ex) <span v-html="rawHtml"></span>
디렉티브 : ' v- ' 접두사 사용, 렌더링된 DOM에 반응적 동작을 적용 -> 이 Element 내부의 HTML을 항상 최신 상태로 유지.
- v-bind 디렉티브 : Element의 id 속성과 dynamicId 속성을 동기화한 상태로 유지
ex)<div v-bind:id="dynamicId"></div>
바인딩된 값이 null or undefined 이면 Element 속성이 제거된 상태로 렌더링 됨.
' : ' 로 단축하여 사용할 수 있음(최종 렌더링된 마크업에는 표시되지 않음).
ex)<div :id="dynamicId"></div> - v-on 디렉티브 : DOM 이벤트를 수신, ' @ '로 단축하여 사용할 수 있음.
ex)<a v-on:click="doSomething"></a> or <a @click="doSomething"></a>
click의 인자는 수신할 이벤트 이름. - v-for 디렉티브 : 반복 렌더링, v-bind:key 값과 같이 작성해주어야 함.
ex)<li v-for="바인딩명 in 데이터" v-bind:key="바인딩키">{{ 바인딩키 }}</li> - v-model 디렉티브 : vue의 데이터와 동기화 해서 반응형 구현
- 동적인 인자 : 디렉티브의 인자를 []로 감싸서 JavaScript 표현식으로 사용 가능.
ex)<a v-bind:[attributeName]="url"></a>
attributeName 이 "href" 인 경우 v-bind:href 와 같음.
인자는 null or 문자열이어야 함. null 인 경우 바인딩을 명시적으로 제거, 문자열이 아닌 경우 Error를 Trigger
