Page 8 -

⑤ 셀프체크 ⑥ 도전 과제
스스로 코드를 짜 보면서 배운 내용 확인 프로그램의 완성도를 높일 수 있도록 도전 과제 제시

셀프체크 정답 노트 p.558
도전 과제
다음 요구 사항과 구성 요소 등을 참고해 상품 목록 페이지와 상세 페이지를 구현해 보세요.
6장에서는 할 일 관리 앱을 만들었습니다. 여기서 더 나아가 도전 과제를 수행한다면 더욱더 완
힌트
성도 있는 자신만의 프로그램을 만들 수 있습니다. 다음과 같이 도전할 만한 몇 가지 과제를 추
예제 코드 05/practice 폴더를 참고하세요. 천합니다.
요구 사항 1 수정 기능: 등록한 할 일을 수정할 수 있는 기능을 만들어 보세요. 수정 아이콘을 추가하고,
1 상품 목록 페이지에서는 여러 상품의 정보 중 제목과 가격만 노출합니다. 그에 따른 이벤트를 등록하면 수정 기능을 만들 수 있습니다. 삭제 기능과 비슷하니 삭제 기
능을 참고로 고민해 보세요.
2 상품 상세 페이지에서는 선택 상품의 정보 중 제목, 가격, 재고를 노출합니다.
5장 컴포넌트 다루기
2 저장 기능: 지금까지 만든 할 일 관리 앱은 웹 브라우저를 새로고침하면 작성한 목록이 사라
⑦ 마무리 ⑧ 웹북과 동영상
구성 요소
집니다. 웹 브라우저를 새로고침해도 데이터가 유지되게 하려면 할 일 목록을 별도로 저장
1 App.vue: 루트 컴포넌트로 상품 데이터가 정의되어 있습니다. 할 수 있어야 합니다. 가장 쉽게 사용할 만한 방법은 window 객체의 localStorage 속성을
장마다 핵심 내용을 요약 정리 웹북과 동영상으로 자유롭게 학습
2 ProductList.vue: 상품 목록을 표시하는 컴포넌트입니다. 사용하는 것입니다. localStorage 속성은 웹 브라우저의 저장소에 접근하는 여러 메서드를
제공하니 이를 활용해 할 일 목록을 저장해 보세요.
3 ProductDetail.vue: 상품 상세 정보를 표시하는 컴포넌트입니다.
이 외에도 여러분만의 독창적인 아이디어가 있다면 주저하지 말고 코드로 작성해 보세요. 아주
마무리
구현 단계
작은 기능이라도 책에서 나온 것만 따라 한 사람과 직접 기능을 추가한 사람의 차이는 뒤로 갈
1 App 컴포넌트에 정의된 상품 데이터로 상품 목록을 표시합니다.
수록 크게 날 것입니다.
2 ProductList 컴포넌트에서는 App 컴포넌트에서 전달받은 상품 정보로 상품 목록을 표시합
니다.
1. 컴포지션 API
3 ProductList 컴포넌트의 목록을 클릭하면 ProductDetail 컴포넌트를 표시해 전달받은 상
① 컴포지션 API는 Vue 3에서 새로 추가된 새로운 기능으로, 컴포넌트의 로직을 더 유연
품의 상세 정보를 표시합니다.
하고 조직적으로 관리하는 방법을 제공합니다. 함수 기반 접근 방식을 취해서 개발자가
웹북 thebook.io
관련된 기능별로 코드를 구성할 수 있게 해줍니다.
예외 사항
동영상 www.youtube.com/@sucoding
② 컴포지션 API는 setup() 훅 또는 <script setup> 태그에 작성합니다.
목록의 표현 방식은 자유입니다. 디자인을 적용해도 되고 단순히 텍스트만 나열해도 됩니다.
2. 컴포지션 API의 기본 구성 요소
① 컴포지션 API에서 반응형 데이터는 ref() 함수와 reactive() 함수로 정의합니다.
② ref()로 정의한 데이터를 HTML 태그의 ref 속성의 값으로 지정하면, 해당 태그의
DOM 객체를 참조할 수 있습니다.
예제 파일 구성
③ 컴포지션 API에서 계산된 속성은 computed() 함수로 정의합니다.
예제 파일은 깃허브(https://github.com/gilbutITbook/080384) 또는 길벗
251
288
④ 컴포지션 API에서 함수는 함수 표현식 또는 화살표 함수 방식으로 정의합니다. 01
홈페이지(https://www.gilbut.co.kr)의 자료실에서 다운로드할 수 있습니다. 03
⑤ 컴포지션 API에서 감시자 속성은 watch(), watchEffect(), watchPostEffect() 함수
02
다운로드한 예제 파일의 압축을 풀면 장 → 절 → 중 단계별로 폴더가 있습니 04
로 정의합니다. 각 함수의 의미는 다음과 같습니다.
. . .
설명
함수명
다. 11장 폴더에는 html과 vue, vue_f 폴더가 있습니다. html 폴더에는 참고 . . .
watch() 감시자 속성을 설정하는 가장 단순한 방법입니다. html
용 코드가, vue_f 폴더에는 완성된 프로젝트 코드가 들어 있습니다. vue 폴 11
감시자 속성을 생성하고 콜백 함수 내부에서 참조하는 모든 반응형 데이터를 감시
watchEffect()
합니다.
더는 직접 프로젝트를 만들 수 있는 빈 폴더입니다. 12 vue
watchPostEffect()
watchEffect() 함수와 flush: 'post' 옵션의 기능을 결합한 감시자 속성을 생
성합니다.
vue_f
3. 컴포지션 API에서 달라진 컴포넌트 구성 요소
① 컴포지션 API에서 라이프사이클 훅은 옵션 API와 비교해 다음과 같은 점이 다릅니다. 009
338