Amazon Main Page Clone Project

🛒 아마존 메인 페이지의 캐러셀 슬라이더 UI과 검색 자동 완성 기능을 순수 자바스크립트로 구현하기

Overview

• 데모 링크

  • 검색 자동 완성 기능 테스트시 b, i, j로 시작하는 문자를 입력해주세요. 임의로 데이터를 만들었습니다. (ex. bicycle, iphone, javascript ... )

• 사용된 언어 및 프레임 워크: html, css, javascript, node.js, express

• 서버 배포: heroku

---

1. 캐러셀 슬라이더 UI

1-1. 기능

• 메인 기능

  • 페이지네이션(Pagination)과 좌-우 버튼으로 캐러셀 컨텐츠 변경
  • 무한 루프로 동작

• 세부 기능

  • 데이터 비동기 요청 후, template을 동적으로 생성. 데이터의 갯수가 변하더라도 동일한 UI
  • 사용자가 마우스를 빠르게 클릭하더라도 정상적으로 동작

1-2. 설계 및 구현

• 각 역할별로 클래스(모듈) 분리

  

• Carousel: Controller에게 받은 데이터로 초기화. 사용자가 좌-우 버튼을 클릭하면 Controller에게 알림

• Pagination: Controller에게 받은 데이터로 초기화. 사용자가 페이지네이션을 클릭하면 Controller에게 알림

• Controller: Carousel에서 보여줄 컨텐츠와 Pagination에서 scale up 할 인덱스를 동기화 시키기 위한 모든 정보(속성, 함수) 관리

  • Carousel과 Pagination에게 새로운 사용자 입력이 발생했다는 알림을 받으면 Controller는 다시 두 클래스에게 업데이트된 정보 전달
  

1-3. 구현시 가장 고민했던 부분

• Caroseul와 Pagination의 의존 관계를 낮추기 위한 방법

  • 두 클래스는 자신의 변경되면 항상 상대 클래스의 상태 변경을 필요로 한다. 초기 설계시에는 서로의 의존성을 주입하여 구현 하였는데 변경 사항에 대한 유연함과 확장성이 떨어진다고 생각했다.

  • 따라서 1-2. 에서 설명한 것 처럼 두 클래스의 상태를 관리하는 Controller 클래스를 생성하였고, Carousel과 Pagination은 Controller에게 전달 받은 상태 정보에 의해서만 렌더링 되도록 재설계 하였다.

---

2. 검색 자동 완성 기능

2-1. 기능

• 메인 기능

  • express로 서버 환경 구성 및 검색 자동 완성 API 설계
  • 사용자 입력 발생시 자동 완성 데이터 가 보여지며, enter키 누르면 선택된 검색어가 입력창으로 이동
  • 입력창에 검색어가 있을 시에 검색 버튼을 클릭하면 최근 검색어 로 저장

• 세부 기능

  • 디바운스(debounce) 기능으로 1.2초 동안 사용자 입력이 없을 시에만 API 요청

2-2. 설계 및 구현

• 각 역할별로 클래스(모듈) 분리

• SearchView: 사용자 입력을 받으면 Controller에게 알림. autoCompleView 또는 recentSearchView에서 선택한 검색어를 입력창에서 보여줌

• AutoCompleteView: searchView에서 입력 받은 검색어에 해당하는 자동 완성 데이터가 있을 시 보여줌

• RecentSearchView: searchView에서 검색 버튼을 클릭했을 시에 저장되는 최근 검색어 데이터 관리. searchView를 클릭했을 때 보여짐

• ModalView: autoCompleteView와 ModalView의 공통 로직을 정의하여, 두 클래스가 상속 받아 사용하도록 함

• Controller: 여러 가지 이벤트(focus, blur, enter, click...)가 발생했을 때, 각 View가 알맞은 상태를 가지도록 하는 모든 정보(속성, 함수) 관리

2-3. 구현시 가장 고민했던 부분

• 이벤트에 따른 상태를 관리하는 방법

  • 검색 자동 완성 기능은 사용자의 입력에 따라 여러가지 이벤트가 발생한다. 하나의 이벤트가 발생하면, 관련된 모든 View 클래스에 영향을 주기 때문에 Controller에서 적절히 처리해주어야 했다.

  이벤트 발생	이벤트 발생 상황	currentMode
  enter	입력창에 글자 입력	entering
  click	입력창에 글자 입력 완료 후 검색 버튼 클릭	completing
  focus	입력창을 클릭	focusing
  blur	입력창을 클릭한 후 다른 곳을 클릭	blured
  x	x (아무 이벤트가 발생하지 않을 시)	pending

• 특정 이벤트가 발생하면 임의로 정한 currentMode를 설정하고, currentMode가 변경될 때마다 연관된 View들에 알림을 주도록 설계하였다.

---

3. 느낀점

• 순수 자바스크립트로 웹 사이트를 만들어 보는 값진 경험

  • 프로젝트의 구조를 잡는 방법, javascript 폴더를 UI 컴포넌트별로 분리하고 그 안에서 클래스를 설계하는 방법, entry point가 가지는 중요성 등 처음부터 모든 과정을 고민하면서 구현하는 과정의 만족감은 정말 컸다.

  • DOM을 제어하는 함수, this 바인딩, ES6의 문법을 익숙하게 다룰 수 있게 된 것은 큰 수확이다. 이론적으로 느껴졌던 것들을 직접 구현해보면서 사용법을 익히고 느낄 수 있었다.

• 리액트를 시작한 후 이 프로젝트의 경험이 주는 장점들

  • Controller가 View들의 상태를 관리하는 설계 방식이 리액트에서 상위 컴포넌트가 하위 컴포넌트의 상태를 관리하는 것과 유사하다고 느꼈다. 따라서 상위 컴포넌트의 상태가 변경될 때마다 하위 컴포넌트가 렌더링 되는 맥락을 쉽게 이해할 수 있었다.

  • UI를 기준으로 클래스를 직접 분리하고 설계 해보는 과정이 후에 리액트에서 컴포넌트를 쪼개는데 도움을 받고 있다.