소개
이 프로젝트에서는 사용자가 상점의 영업 상태를 "open"과 "close" 사이에서 전환할 수 있는 간단한 Vue.js 애플리케이션을 구축하는 방법을 배우게 됩니다. 애플리케이션은 상점의 현재 상태와 해당 상태에 따른 이미지를 표시합니다. 사용자는 전환 버튼을 클릭하여 상점의 영업 상태를 토글할 수 있습니다.
👀 미리보기
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다.
- 필요한 폴더 및 파일로 프로젝트 구조를 설정하는 방법
- Vue.js 설정을 생성하고 반응형 상태 및 토글 기능을 정의하는 방법
- 상점의 영업 상태와 전환 버튼을 표시하기 위한 HTML 구조 및 CSS 스타일을 구현하는 방법
- 사용자가 상점의 영업 상태를 전환할 수 있도록 토글 기능을 통합하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- 기본적인 Vue.js 프로젝트 구조 설정
ref함수를 사용하여 반응형 상태 변수 생성- Vue.js 설정에서 사용자 정의 함수 정의 및 사용
- HTML 템플릿에서 데이터 및 이벤트 핸들러 바인딩
- 시각적으로 매력적인 인터페이스를 만들기 위해 CSS 를 사용하여 애플리케이션 스타일 지정
