개발자

구현 화면 3개의 컴포넌트로 구성해서 만들었는데 살펴도보록 하자 작성 컴포넌트 v-model로 받은 데이터들을(v-model="입력한값"은 data에 선언해주면 사용 가능) emit으로 표현 컴포넌트로 보낸다 표현 컴포넌트 빨간박스 부분이 수정 부분이다. 수정은 아래 컴포넌트를 보고 난뒤 다시 와서 이어보기를 바란다. 먼저 inputArea에서 @submit이벤트를 받는 submitList메소드에서 받은 날짜와 할일 데이터를 todoList에 넣어준다 삭제는 클릭시 deleteList 메소드에서 list를 삭제해주면 끝이다. 파라미터로 클릭했을 때의 해당 행 index를 넘겨주고 this.todoList.splice(index,1) 로 지운다. 해당 index을 넣어주고 1개의 배열을 지운다는 뜻 수정은..

단일 슬록(slot) 부모 컴포넌트에서 자식 컴포넌트로 HTML 마크업을 전달할 수 있게 해준다. 자식 컴포넌트 태그 내에 지정한 컨텐츠를 전달한다. 부모 컴포넌트 클릭하기23 자식 컴포넌트인 FancyButton 을 import 해주고, 컴포넌트 태그안에 보내고자 하는 컨텐츠 입력 버튼 클래스인 fancy-btn도 자식 컴포넌트에 설정해준 클래스이다. button빼고 text만 입력후, 자식 컴포넌트에 button입력하고 안에 slot해서 text만 보낼수도있다 자식 컴포넌트 결과물 이름이 있는 slot (named slot) 슬롯에 이름을 부여하여 여러 개의 슬롯으로 작성한다. 부모 컴포넌트에서 지정한 컨텐츠가 해당 이름의 슬롯으로 전달된다. 컴포넌트 header 슬롯 main 슬롯 test 슬롯 d..

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

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배열에 넣어준다.(배열도 인스턴스 초기화 탬플릿에서 사용해야 하니까) 그 다음 테이블..