소개
이 프로젝트에서는 반응형 제품 목록 레이아웃을 만들고 전환 기능을 구현하는 방법을 배우게 됩니다. 이 기능을 통해 사용자는 제품 항목을 그리드 뷰와 리스트 뷰 사이에서 쉽게 전환할 수 있습니다.
👀 미리보기
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다:
- 프로젝트 구조를 설정하고 각 파일 및 폴더의 목적을 이해하는 방법
- JSON 파일에서 데이터를 가져와 제품 목록을 채우는 방법
- Vue.js 를 사용하여 레이아웃 전환 기능을 구현하는 방법
- 선택한 뷰에 따라 그리드 및 리스트 레이아웃을 조건부로 렌더링하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
- Vue.js 프로젝트를 효과적으로 구성할 수 있습니다.
- Axios 를 사용하여 JSON 파일에서 데이터를 가져올 수 있습니다.
v-if및v-else와 같은 Vue.js 디렉티브를 사용하여 콘텐츠를 조건부로 렌더링할 수 있습니다.- 사용자 상호 작용을 처리하고 UI 를 적절하게 업데이트할 수 있습니다.
