Vue 예약어(?) - 이해하고 외우자

Vue에 대해서 간단한 화면이나 data관련 예약어 정도는 알아야 한다.

 

상위 컴포넌트

 

① import axios from 'axios' : Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

    → 자동으로 JSON데이터 형식으로 변환 ( 그래서 npm install 이었구나 )

   

    ※ Promise : 비동기 처리를 위한 패턴으로 ES6에서 도입되었다. 프로미스의 등장으로 전통적인 콜백 패턴의

                         단점을 보완할 수 있게 되었다. 

                         → Promise는 비동기 처리 결과(resolve, reject)와 진행 상태(pending, fulfilled, rejected) 정보를

                              갖는다.

                              비동기 처리 결과(resolve, reject)와 진행 상태(pending, fulfiied, rejected) 정보를 갖는다.

                               resolve -> fulfiled, reject -> rejected

 

                        

 

② import { reactive } from 'vue' : 함수는 객체를 반응형으로 만들어주며, 이는 해당 객체의 속성이 변경될 때 자동으로 UI를 업데이트하는 기능을 포함한다.

③ import Card from '@/components/Card' : Card.Vue를 자식 컴포넌트로서 임포트하는 것이다.

④ export default : 다른 컴포넌트로 인가되기 위해서 세팅하는 것이라고 생각하면 된다.

⑤ const state = reactive.... : state라는 값을 반응형으로 저장하겠다.

⑥ axios.get("/api/items").then.... : /api/items Url에서 data를 받으면 state.items에 data를 받겠다.

 

상위 컴포넌트

 

① props : { items. String }