프로젝트 의 JavaScript 스킬 트리

Vue.js 드래그 앤 드롭 쇼핑 카트

초급

이 프로젝트에서는 드래그 앤 드롭 기능을 갖춘 온라인 쇼핑 카트를 구현하는 방법을 배우게 됩니다. 이 프로젝트는 Vue.js 의 개념과 웹 브라우저에서 제공하는 드래그 앤 드롭 API 를 이해하고 적용하는 데 도움을 드립니다.

javascriptweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

이 프로젝트에서는 드래그 앤 드롭 기능을 갖춘 온라인 쇼핑 카트를 구현하는 방법을 배우게 됩니다. 이 프로젝트는 Vue.js 의 개념과 웹 브라우저에서 제공하는 드래그 앤 드롭 API 를 이해하고 적용하는 데 도움을 주기 위해 설계되었습니다.

👀 미리보기

Online shopping cart demo

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

  • 프로젝트를 설정하고 제공된 파일 및 구조에 익숙해지는 방법.
  • 온라인 쇼핑 카트에 대한 드래그 앤 드롭 기능을 구현하여 사용자가 제품을 장바구니에 추가할 수 있도록 하는 방법.
  • 제품 수, 제품 세부 정보 및 총 가격을 포함한 쇼핑 카트 정보를 표시하는 방법.
  • 온라인 쇼핑 카트를 테스트하고 기능이 예상대로 작동하는지 확인하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

  • Vue.js 를 사용하여 웹 애플리케이션을 구축합니다.
  • 웹 브라우저의 내장 API 를 사용하여 드래그 앤 드롭 기능을 구현합니다.
  • 동적 데이터를 표시하고 사용자 상호 작용에 따라 사용자 인터페이스를 업데이트합니다.
  • 애플리케이션을 컴포넌트 (component) 로 구성하여 깨끗하고 유지 관리 가능한 코드를 작성합니다.

강사

labby
Labby
Labby is the LabEx teacher.