개발자

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

callback 함수란? : callback 함수를 이해하려면 동기적,비동기적으로 실행되는 함수를 이해해야 한다. 프로그램 또는 함수가 동기적으로 실행된다는 의미는 A함수가 호출되고, A작업이 완료될 때까지 기다렸다가, A함수가 출력값을 반환한 이후에, B함수를 실행하겠다는 것을 의미한다. A함수를 동기적으로 선언했을 경우, 프로그램은 로직의 흐름에 따라 A함수를 호출하기만 하고, B함수를 즉시 실행하게 된다. 이때, A 함수의 작업을 Main Thread가 아닌 별도의 Thread에서 처리하게 되고, 해당 작업은 완료된 이후에, Main Thread를 Call하게 된다. 호출된 비동기 A함수에서 작업을 완료한 이후에, 반대로 call을 하기 때문에 비동기 함수의 작업 완료시, 호출되는 함수를 Callb..

vue 인스턴스란? Vue 인스턴스는 생성된 Vue 오브젝트 하나의 오브젝트 이다. Vue 를 시작하기 위해 필수적이며, 앱의 진입점이 된다.간단한 템플릿 렌더링부터 데이터 바인딩, 컴포넌트 등 많은 동작 수행 된다. 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 데이터가 변경되어 DOM을 업데이트하는 경우가 있다고 가정 하면, 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클의 훅 도 호출 된다. 예를 들어, 인스턴스가 생성된 이후 created 가 호출 된다. vue 인스턴스 라이프 사이클 참고블로그 https://velog.io/@ducks1077/Vue.js-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4%EB%9E%80 Vue.js 인스턴스란? 인스턴스..

첫번째 최종 구현 화면 1) 사용자 이름을 입력하여 추가할 수 있다. 2) 테이블의 짝수 번째 row에는 배경 색상이 주어진다. 3) 테이블의 하단에 입력 데이터를 하나의 String 으로 표현되도록 한다. 구현 코드 빨간색 박스를 살펴보자. v-model로 "empName"이름으로 데이터를 입력받고 empName을 인스턴스화 시킨다.(data에 입력) 테이블의 행추가를 해주어야 해서 배열로 만들어 행추가해주는 방법으로 진행했다. empArray를 만들어 배열을 만들어주고, 입력받은 empName의 vue내부 인스턴스로 초기화해주었기에 this.empName을 사용하여 클릭이벤트 메소드 addEmp 안에서 empArray배열에 넣어준다.(배열도 인스턴스 초기화 탬플릿에서 사용해야 하니까) 그 다음 테이블..

v-on v-on 디렉티브를 이용하여 이벤트 핸들링, dom 이벤트를 듣고, 트리거 될 때 javascript를 실행 [종류] @click="event": 클릭했을 때 실행 @change="event": 요소가 변경될 때 실행 @dbclick="event": 더블 클릭했을 때 실행 @mouseover="event": 마우스의 포인트가 요소 위로 올라왔을 때 실행 @submit="event": form이 제출될 때 실행 @reset="event": form이 재설정될 때 실행 @select="event": select 값이 선택되었을 때 실행 @focus="event": 태그에 포커스가 있을 때 실행 @keyup="event": 키보드의 키를 놓았을 때 실행 @keydown="event": 키보드의 키를 ..