jindonyy / SearchBar-MVVM

🔍 Search Bar - MVVM

• 검색 창을 MVVM 아키텍처를 적용하여 구현해본 프로젝트
• 기간: 2022.03.14 ~ 2022.04.01

🛠 Skills

✨ Feature

• localStorage를 사용하여 최근 검색 내역 구현
• 검색어 입력 시, 자동 완성 추천 창이 뜨고 위아래 키를 이용하여 선택할 수 있도록 구현
• MVVM 아키텍처를 사용하여 View와 비지니스 로직을 분리하고, observer 패턴을 사용하여 View와 Model간의 의존성을 없애고자 함.

🖥 Demo

2022-03-23.7.56.34.mov

📂 Directory

📂 static
├── index.html
├── 📂 resources
│   ├── 📂 css
│   │   └── style.css
│   └── 📂 scss
│       ├── 📂 components
│       │   └── 📂 header
│       │       └── search.scss
│       ├── style.scss
│       └── 📂 utils
│           ├── common.scss
│           ├── function.scss
│           ├── reset.scss
│           └── variables.scss
└── 📂 src
    ├── main.js
    ├── 📂 stores
    │   ├── fetchStore_GET.js
    │   └── localstorage.js
    ├── 📂 utils
    │   └── util.js
    ├── 📂 viewModels
    │   └── 📂 header
    │       └── 📂 search
    │           ├── AutomaticCompletionViewModel.js
    │           └── RecentSearchKeywordsViewModel.js
    └── 📂 views
        ├── 📂 components
        │   └── 📂 header
        │       ├── Header.js
        │       └── 📂 search
        │           ├── AutomaticCompletion.js
        │           ├── RecentSearchKeywords.js
        │           ├── SearchBar.js
        │           ├── SearchCategories.js
        │           └── SearchCategoriesButton.js
        └── render.js