Vue.js 상점 상태 전환기 제작

소개

이 프로젝트에서는 사용자가 상점의 영업 상태를 "open"과 "close" 사이에서 전환할 수 있는 간단한 Vue.js 애플리케이션을 구축하는 방법을 배우게 됩니다. 애플리케이션은 상점의 현재 상태와 해당 상태에 따른 이미지를 표시합니다. 사용자는 전환 버튼을 클릭하여 상점의 영업 상태를 토글할 수 있습니다.

👀 미리보기

🎯 과제

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

• 필요한 폴더 및 파일로 프로젝트 구조를 설정하는 방법
• Vue.js 설정을 생성하고 반응형 상태 및 토글 기능을 정의하는 방법
• 상점의 영업 상태와 전환 버튼을 표시하기 위한 HTML 구조 및 CSS 스타일을 구현하는 방법
• 사용자가 상점의 영업 상태를 전환할 수 있도록 토글 기능을 통합하는 방법

🏆 성과

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

• 기본적인 Vue.js 프로젝트 구조 설정
• ref 함수를 사용하여 반응형 상태 변수 생성
• Vue.js 설정에서 사용자 정의 함수 정의 및 사용
• HTML 템플릿에서 데이터 및 이벤트 핸들러 바인딩
• 시각적으로 매력적인 인터페이스를 만들기 위해 CSS 를 사용하여 애플리케이션 스타일 지정

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── css
├── images
├── lib
└── index.html

그 중:

• css는 프로젝트 스타일이 저장되는 폴더입니다.
• images는 프로젝트 이미지가 저장되는 폴더입니다.
• lib는 프로젝트 JS 종속성이 저장되는 폴더입니다.
• index.html은 메인 페이지입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

토글 기능 구현

이 단계에서는 상점의 영업 상태를 전환하는 토글 기능을 구현합니다.

1. index.html 파일을 엽니다.

2. useToggle 함수에서 // TODO 주석을 다음 코드로 바꿉니다.

   function useToggle(state) {
     // TODO
     const toggledState = ref(state);
   
     function toggle() {
       toggledState.value = !toggledState.value;
     }
     return [toggledState, toggle];
   }
   

   이 구현은 Vue.js 의 ref 함수를 사용하여 반응형 상태 변수 toggledState와 상태를 업데이트하는 toggle 함수를 생성합니다.

3. 전환 버튼을 클릭하여 애플리케이션을 테스트합니다. 상점의 영업 상태가 "open"과 "close" 사이에서 토글되어야 하며, 해당 이미지가 그에 따라 변경되어야 합니다.

축하합니다! Vue.js 를 사용하여 Switch Business Status 애플리케이션의 구현을 완료했습니다. 완료 후 효과는 다음과 같습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.