동적 컴포넌팅을 위해선 태그를 사용한다. comp라는 변수명을 이용해 특정 컴포넌트들을 집어넣으면 동적으로 렌더링 시킨다. 매번 특정 컴포넌트를 전환할떄는 Destory 소멸되고 새로 생성된다. 하지만 컴포넌트를 전환할 때 컴포넌트의 상태를 유지하거나 성능상의 이유로 다시 렌더링되는걸 방지해야 할때가 있다. 이때 사용하는게 이다. 태그를 태그로 감싸면 컴포넌트가 전환될때도 Destroy 소멸하지 않고 계속 남아있다. keep-alive keep-alive는 컴포넌트의 상태를 보존할때 사용한다. include 속성을 사용해 전활될때 소멸하지 않고 남길 컴포넌트를 지정할 수 있다. 아래와 같이 test1 이라는 컴포넌트는 재 렌더링이 되지 않고 캐시된 데이터를 다시 불러온다. 컴포넌트 전환 할때마다 페이지의..

Blob(Binary Large Object) JavaScrpt에서 Blob(Binary Large Object)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다. 보통 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용한다. Blob 생성 const newBlob = new Blob(array, options); ​ * array Blob 생성자의 첫번째 인수로 ArrayBuffer, ArrayBufferView, Blob(file), DomString 객체 또는 이러한 객체가 혼합된 Array를 사용할 수 있습니다. ​ * options 옵션으로는 type 과 endings 를 설정할 수 있다. type ..

Document(문서) Object(객체) Model(모델) - 문서객체모델 문서객체란 , 와 같은 html 문서의 태그들을 JavaScript가 이해하고 이용할 수 있는 객체(Object)로 만들면 그것을 문서 객체라고 합니다. Model 은 문서 객체를 '인식하는 방식'이라고 해석할수 있다. ​ 쉽게 말해서, DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 더 쉽게 말하면 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 결론은 DOM은 자바스크립트와 HTML을 이어주는 공간으로 내가 작성한 HTML 을 자바스크립트가 이해할 수 있도록 객체(Object)로 변환하는 것이다. 여기서 DOM은 Tree 형태의 노드 구조이다. ​위 내용을 보면 HTML 코드로 트리구조를..

Promise 프로미스는 자바스크립트 비동기 처리에 사용되는 객체 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 어플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 사용 ​ Promise를 사용하지 않고 일반 ajax 코드 function getData(callbackFunc){ $.get('url 주소', function(response){ callbackFunc(response); }) } ​ getData(function(tableData){ console.log(tableData); }); 위 내용을 Promise 로 사용 function getData(callback){ return new Promise(function(resolve, rej..

Vue 라이프사이클이란 Vue 인스턴스가 생성된 후 화면에 보여지고 사라지기까지의 단계 ​ - 종류 1. beforeCreate 2. created 3. beforeMount 4. mounted 5. beforeUpdate 6. updated 7. beforeDestroy 8. destroyed ​ * beforeCreate : 가장먼저 실행되는 beforeCreate, Vue 인스턴스가 초기화 된 직후에 발생한다. : 컴포넌트가 DOM에 추가되기도 전이어서 this.$el에 접근할 수 없다. : data, event, watcher에도 접근하기 전이라 data(), method: {} 에도 접근할 수 없다. ​ ex) ​ * created : data를 반응형으로 추적가능, computed, metho..

Actions : Mutations에는 동기적, 순차적 로직들만 선언하고 Actions에는 비동기 로직들을 선언 ​ - Actions 등록 Vuex에 Actions를 등록하는 방법은 다른 속성과 유사하다. // src/store/store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ​ export const store = new Vuex.Store({ mutations: { addCounter: function(state, payload){ return state.counter++; } }, ​ actions: { addCounter: function(context) { // commit은 mutations 를 호출할때 사용하는 키워드..