axios Vue에서 권고하는 Promise(js 비동기처리 패턴) 기반의 HTTP 라이브러리 입니다. Promise를 사용하면 비동기식 처리 상에서 데이터가 넘어오지 않으면 다음 코드가 실행되지 않도록, 즉 데이터가 넘어왔을 때만 다음 코드가 실행되도록 하는 콜백 처리를 해줄 수 있습니다. js 비동기처리 패턴 callback promise promise + generator async & await 대표적인 Promise 인스턴스 메서드에는 then()과 catch(), finally() 이 있어 요청이 성공/실패/보류됐을 때 처리해줄 수 있습니다. 비동기를 이해하기 위해선 자바스크립트의 동작원리: 엔진, 런타임, 호출 스택을 아는 것이 중요합니다. 자바스크립트는 싱글 스레드 기반이기 때문입니다. 싱..

Router 라우터는 페이지를 이동할 때 사용하는 Vue 공식 라이브러리 입니다. 라우터를 cdn으로 다운로드 받고, vue src 아래에 추가해줍니다. 아래는 Vue 객체 내 라우터를 설정한 코드입니다. 라우터 객체에는 path와 component가 key:value로 작성되어야 합니다. /login이나 /main페이지로 이동했을 때 등록한 컴포넌트 LoginComponent, MainComponent가 안에 주입됩니다.

같은 레벨 컴포넌트의 통신 컴포넌트는 재사용이 쉽게 객체를 모듈화해서 사용할 수 있는 Vue의 기능이며 상위 컴포넌트, 하위 컴포넌트로 관계성을 지닙니다. 이 둘의 통신은 상위->하위일 땐 props 방식, 하위->상위은 event emit 방식을 사용해 가능합니다. 그렇지만 같은 레벨 하위->하위의 경우엔 통신은 직접 이루어지지 않고 상위 컴포넌트를 통해 통신합니다. 참고자료: 인프런 - 캡틴판교 Vue.js 시작하기

컴포넌트 통신 컴포넌트는 재사용이 편한 기능으로 모듈화 시켜 사용할 수 있는 Vue의 핵심 기능입니다. 컴포넌트는 상위, 하위라는 속성을 통해 관계를 가지기 때문에 규칙이 존재합니다. 상위 컴포넌트가 데이터가 담긴 props를 내려주면 하위 컴포넌트는 event를 올려줍니다. 출처: 캡틴판교님 Cracking Vue.js props를 적용시키면 상위 컴포넌트의 속성을 하위 컴포넌트로 내려줄 수 있습니다. v-bind로 상위 컴포넌트의 데이터 이름을 하위 컴포넌트의 props 속성 이름에 바인딩 시켜줍니다. appHeader는 코드를 깔끔히 하려고 컴포넌트 데이터를 변수로 생성했습니다. Vue의 reactivity(반응성) 특성을 이용해 상위 컴포넌트 변수가 변화할 때마다 하위 컴포넌트에서 변경을 감지해 ..

Component 재사용 할 수 있도록 도와주는 컴포넌트는 아래와 같이 등록할 수 있습니다. new Vue({ el: '#app' }); 이 경우 root로 등록됩니다. live server 플러그인으로 브라우저를 실행시켜 F12를 입력해 Vue 크롬 익스텐션을 통해 root로 등록된 것을 확인할 수 있습니다. 또다른 컴포넌트 등록방식은 Vue.component를 사용하는 것입니다. 이 방법을 전역 컴포넌트 방식이라고 합니다. 하지만 실무에서는 전역 컴포넌트를 잘 사용하진 않습니다. 대신 지역 컴포넌트를 사용합니다. Vue.component('app-header', { template: 'Header' }); Vue.component('app-conten..

Vue 인스턴스와 생성자 함수 Vue 인스턴스는 아래코드처럼 변수에 담을 수 있습니다. var vm = new Vue({ el: '.app', data: { message: 'nah nevermind' } }); el은 element의 약자로 Vue로 DOM(Document Object Model)을 사용하기 위해 반드시 설정이 필요합니다. Java 객체 생성자와 동일한 생성자 함수가 있습니다 function Person(name, job) { this.name = name; this.job = job; } var p = new Person('baekho', 'backend-engineer'); console.log(p); 생성자 함수를 사용하는 이유는 함수 재사용을 하기 위해서 입니다. 제가 Vue 라..