믿기지 않겠지만 첫 상품을 올렸으니 웹 저장소에 상호 작용을 추가할 준비가 되었습니다. 애플리케이션에 상호 작용성을 추가한다는 것은 DOM 이벤트를 연결하고, 이를 애플리케이션 코드 내에서 응답하고, 사용자에게 해당 행동에 대한 피드백을 제공하는 것을 의미합니다. Vue는 모든 이벤트와 데이터 바인딩을 생성하고 관리하지만, 애플리케이션에서 어떻게 데이터를 조작하고 어떻게 인터페이스로 사용자 기대를 충족시킬지 결정해야 합니다.

우리가 올린 상품 하나를 사용자가 장바구니에 담는 것으로 시작하겠습니다. 진행하면서 각 작업이 Vue 애플리케이션의 전반적인 그림에 어울리는지도 확인하겠습니다.

그림 3-1은 이 장에서 진행하는 모든 작업이 끝난 최종 애플리케이션 모습입니다.

▲ 그림 3-1 새로운 요소를 사용한 상품 리스트: 장바구니와 <장바구니 담기> 버튼(index.html)