열심히 일한 당신 떠나라 열심히 일한 당신 떠나라

7장 컴포지션 API 다루기7.1 컴포지션 API란ㅇ 등장배경: 옵션스 API는 데이터, 계산된 속성, 메서드, 라이프사이클 훅 등을 포함한 객체 기반 옵션 속성으로 구성. 직관적이고 단순하며, 뷰의 진입 장벽을 낮추는 역할을 하나 작은 규모 프로젝트에 어울리고 컴포넌트가 복잡해지고 상호 간의 로직을 공유해야 할 때에 코드 재사용성과 유지보수성이 저하되는 문제점 발생.ㅇ 컴포지션 API의 장점: 함수 친화적이고 필요한 로직을 별도의 자바스크립트 파일에 작성하면 로직을 쉽게 공유 가능ㅇ 옵션스 API 와 컴포지션 API 비교// OptionsAPI.vue Count: {{ count }} Double Count: {{ doubleCount }} 증가a// CompositionAPI.vue ..

6장 실습: 할 일 관리 앱 만들기o 할 일 관리 앱의 ui 구성HTML 코드 작성, css 코드 작성, 컴포넌트 분리o 할 일 관리 앱의 기능 구현- 할 일 목록 입력받기데이터 정의, v-model 디렉티브로 입력창과 양방향 데이터 바인딩버튼 클릭이나 엔터를 통해 사용자가 어떤 값을 입력했는지 확인 이벤트 등록입력한 값을 부모 컴포넌트로 전달- 할 일 목록 필터링하기할 일 목록을 '전체'와 '완료'로 필터링current 데이터를 초기값으로 'all' updateTab을 이용해서 이벤트 발신filter를 통해서 completed라면 속성 값이 true인 것만 보여줌. - 할 일 목록 출력하기computedTodo 데이터를 props 옵션 속성으로 받는다.배열이므로 v-for 데릭티브로 할 일 목록을 반복..

5장 컴포넌트 다루기5.5 컴포넌트의 데이터 효율적으로 다루기컴포넌트의 데이터 공유하기(provide, inject)// App.vue // FirstChild.vue 컴포넌트 내가 만든 첫 번째 컴포넌트 {{ message }}컴포넌트의 데이터 참조하기($refs, $parent)5.6 컴포넌트 슬롯 사용하기이름이 없는 슬롯// CustomButton.vue //App.vue 더블클릭이름이 있는 슬롯// 형식 슬롯에 기본값 적용하기 제출

5장 컴포넌트 다루기5.1 컴포넌트란웹 애플리케이션의 복잡도 증가로 페이지 단위 개발 방식은 매우 비효율적이어서 컴포넌트 기반 아키텍처를 사용컴포넌트는 특정 기능이나 작업을 독립적으로 수행하기 위한, 논리적으로 구분된 코드 단위컴포넌트의 장점재사용성: 같은 기능이나 작업이 필요한 곳에서 재사용 가능독립성: 다른 컴포넌트에 영향을 주지 않고 특정 컴포넌트만 수정하거나 교체할 수 있음모듈성: 웹 애플리케이션을 개별 단위로 구분하기때문에 복잡성이 줄어듬.확장성: 컴포넌트에서 구성 요소를 추가하거나 수정해 새로운 동작이나 기능을 제공캡슐화: 내부의 복잡성을 숨기고, 단순하게 기능만 사용할 수 있는 인터페이스 제공5.2 컴포넌트 정의하기싱글 파일 컴포넌트(컴포넌트): 확장자 vue로 끝나는 파일 UserP..

유아왓유잇에서 나온 비건 순대입니다. 와이프가 순대 없는 순대볶음을 해줘서 잘 먹었는데 신세계에서 비건을 위한 순대볶음이 나왔네요. 이번주는 비건순대볶음을 먹어보도록 하겠습니다.https://item.gmarket.co.kr/Item?goodscode=3576990408 G마켓-YWE 유아왓유잇 순대볶음 2개 세트 (...23,600원item.gmarket.co.kr

vue.js를 공부한 다음 인공지능 chatGPT 4o를 사용해서 만들어보았다. 역시 공부하기 전에는 기본 구조부터 프로그램의 돌아가는 원리를 잘 이해하지 못해 gpt를 사용해도 만들지 못했을 것이다. 공부한 후에는 구조와 원리를 파악한 후 수정할 부분을 파악할 수 있었고 익스플로어나 크롬에 있는 개발자 도구를 사용해 버그도 찾아낼 수 있었다. 우선 재사용 가능한 컴포넌트를 만드는데 집중하였고, 그 컴포넌트를 여기저기 쓸 수 있게 되었다. 스케쥴 등록, 수정, 삭제가능한 컴포넌트를 만들었고 그 다음 캘린더 컴포넌트를 붙이고 emit 명령어를 사용하여 연결하였다. 이 과정에서 개발자 도구를 사용하여 에러를 찾아서 수정하였다. 특별히 데이터베이스를 사용하지 않고 로컬 저장소를 사용하여 아주 간단한 로직을 구..

4장 실습: 계산기 만들기4.1 실습 내용 소개  사용자 인터페이스에 표시된 숫자를 클릭하면 간단한 사칙연산을 하는 계신기 어플리케이션4.2 뷰 애플리케이션의 기본 구조 설정하기4.3 계산기의 UI 구성하기html 코드의 body 부분은 부분으로css 코드는 부분으로4.4 데이터 바인딩하고 이벤트 연결하기4가지 데이터 정의output(출력칸에 표시되어 사용자에게 노출되는 값),prev(이전에 입력된 값 또는 연산 결과),cur(현재 입력된 값),operator(연산자)export default { data() { return { output: null, // 출력칸에 표시되어 사용자에게 노출되는 값 prev: null, // 이전에 입력된 값 또는 연산 결과 ..

3장 뷰 기본 문법 익히기3.6 계산된 속성과 감시자 속성계산된 속성(computed)은 컴포넌트에서 자주 사용하는 데이터를 캐시해 애플리케이션 성능을 향상시킨다. {{ firstName }} {{ lastName }} {{ fullName }} {{ fullName }} 감시된 속성(watch)은 데이터의 변경을 감시하고, 변경이 감지될 때마다 특정 동작을 수행할 수 있게 한다.3.7 스타일 다루기style 속성, v-bind 디렉티브, 내부 스타일, 외부 스타일 style v-bind Style internal h2 Style external h3 Style