[미션] Search Auto Complete#171
Merged
crongro merged 42 commits intocode-squad:choisohyunfrom Mar 8, 2020
Merged
Conversation
- 아마존 슬라이드 화면을 클론코딩한 파일 업로드 - 슬라이드 클릭 시 화면 이동은 아직 구현하지 않음 - 이미지, 콘텐츠는 dummy 파일 이용함
- 아마존 슬라이드 화면을 클론코딩한 파일 업로드 - 슬라이드 클릭 시 화면 이동은 아직 구현하지 않음 - 이미지, 콘텐츠는 dummy 파일 이용함
- 슬라이드의 양 옆 화살표 버튼 클릭 시 다음 화면이 나오는 기능을 구현함 - 상단의 네비게이션 클릭 시 이동은 아직 구현하지 못함 - 마지막 슬라이드에서 다음 버튼을 누르면 첫 번째 슬라이드가 나옴 - 처음 슬라이드에서 이전 버튼을 누르면 마지막 슬라이드가 나옴
- js 코드를 ES6 Classes로 표현하기 위해 변경함 - 기능 추가는 없음
- 각각의 navigation 버튼을 클릭하면 해당 버튼의 index를 얻어와 이동함 - 슬라이드 애니메이션 기능은 아직 추가하지 않음
data.js - mock data를 임의로 배열로 저장함 mockData.js - mock data를 html 파일로 순서대로 추가될 수 있도록 함
- addDummySlide(function) 부드럽게 넘어가는 무한 슬라이드를 구현하기 위해 생성함 slide의 first, last child를 각각 마지막과 처음에 넣어 줌 추후 파일명, 변수명 등 리팩토링 예정임
- index.js -> main.js, navigationBar.js, carousel.js로 클래스 나눔 - slideSetting.js -> 슬라이드 구현에 필요한 요소를 객체로 따로 저장함 - sprinkleData.js -> mockData.js에 배열로 있는 데이터를 뿌려주는 역할을 함 - navigationBar.js와 carousel.js는 다른 클래스이지만 중복되는 코드가 존재함 => 추후 리팩토링 필요
화살표 버튼의 위치가 어색해 width를 100% -> 800px로 변경함
- server와 client를 나눔 - server에는 app.js와 routes가 있음 => 라우터 : express로 index.html과 mockData.json 파일을 띄우고 보내는 역할을 하는 index.js, users.js가 있음 - 애니메이션에 버그가 있음 => 추후 해결 예정
변경 사항 1. server 단에 있던 html 코드 => client로 이동 2. 독립적인 두 서버를 연결해 json file fetch받을 수 있도록 처리 3. fetchData.js에 있던 코드 => main.js로 이동 - fetch된 데이터 templating 완료 이후에 애니메이션이 적용되야 하기 때문에 main으로 이동함 4. navigationBar.js & carousel.js => carouselMovement.js, eventHandler.js로 클래스 역할 변경 - navigationBar와 carousel 클래스 간에 중복되는 동작 메소드가 많아서 이를 줄이기 위해 carousel을 움직이는 메소드가 있는 클래스인 carouselMovement와 버튼 클릭 시 이벤트를 추가해 주는 eventHandler로 변경함 5. css 변경 중복 코드를 util.js로 묶어서 새로 만듦 6. 버그 미해결 부분 있음 - 클래스를 두 개로 나눴을 때 currentIndex가 동기화되지 않아서 다른 영역을 번갈아 클릭했을 때 이벤트가 제대로 동작하지 않음 7. templateData.js => template literal 방법 적용 필요
- git 로그 관리 중 머지를 진행했는데, 이전 작업 파일이 생겨 이를 삭제함
- carouselMovement & eventHandler => carousel로 클래스 합침 - 동기화되지 않던 슬라이드 인덱스로 인한 버그 사라짐
- html을 mock Data로 그려줄 때 template literal 방식 사용함 - 자연스러운 애니메이션을 위한 dummySlide 추가 부분은 DOM API 사용함
- localStorage에 서버가 연결되어 있을 동안 캐시되도록 설정함
- cssTransition과 cssTransform => setTransition, setTransform - css라는 이름이 적절하지 않은 것 같아 변경함
- util에서 변경한 이름 동일하게 변경함
- run 함수는 한 번만 실행되기 위한 함수이기 때문에 익명즉시실행함수로 변경함
- 검색창 html, css 코드 작성 - 참고 : https://codepen.io/huange/pen/rbqsD, https://www.amazon.com/ - 자동완성 리스트 나오는 부분은 다음 커밋에 올릴 예정
- html은 뼈대만 남김 - templateData.js에서 searchBox와 AutoList를 추가해 준다. - addAutoList에서 li 태그 부분은 하드코딩으로 수정이 필요하다. - 상위 10개까지만 검색되게 하기 위해 처음부터 리스트를 10개로 시작했다.
- 폴더 구조 변경
- 폴더 구조 변경2
- 검색창 클릭 시 클래스 이름 추가되고, 하이라이트되는 이벤트 발생함
- 검색 키워드 입력 시 화면 처리하는 기능 추가 - 자동완성 리스트는 autoComplete에서 처리한 것을 기반으로 될 것임 - autoComplete는 다음 커밋으로 할 예정
- controller를 통해 검색할 키워드가 autoComplete로 전해져서 검색하게 됨. - controller는 다음 커밋에 올릴 예정
- 입력값을 300ms의 지연 시간을 두고 저장해, searchBox와 autoComplete에 전달해 실행할 수 있도록 함 - 하드코딩한 부분은 추후 수정할 예정임
- 자동완성 결과를 방향키로 이동하기 기능 추가 - enter 입력 시 해당 위치 결과가 표시되게 하는 기능 추가
- 목데이터를 가져와 보내주는 서버 - express/heroku 사용해 호스팅 할 예정임.. (firebase 실패함..)
- 현재 표시되고 있는 부분을 Navigation의 scale이 변화하면서 강조시킴
- visibility, scale 변환 부분에 중복 코드를 줄이기 위해 함수로 따로 저장함
- 캐러셀 슬라이드 중복부분 수정
- 자동완성 중복부분 따로 메소드 빼는 식으로 수정
crongro
approved these changes
Mar 8, 2020
| let resultStr = element.slice(value.length, element.length); | ||
|
|
||
| if (value.toLowerCase() === inputStr.toLowerCase()) { | ||
| if (resultCount === 10) return; |
| @@ -0,0 +1,33 @@ | |||
| import { SearchBox } from "./searchBox.js"; | |||
Contributor
There was a problem hiding this comment.
controller는 이름도 좋고, 실제 역할도 fetch부터 관련 view초기화까지 담고 있네요.
역할이 아주 좋아요. 👍
| this.init(); | ||
| } | ||
|
|
||
| SearchBox.prototype = { |
Contributor
There was a problem hiding this comment.
prototype를 재정의했기 때문에 없어진 constructor 속성도 추가해줘야 겠죠.
그래야 현재의 prototype의 주인이 누구인지 알 수 있어요.
| }, | ||
|
|
||
| searchClickEventListener() { | ||
| window.addEventListener("click", () => { |
Contributor
There was a problem hiding this comment.
window에 이벤트를 등록한 이유가??
어디가 클릭 되던지 searchContet의 className이 변경될거 같은데요?
| }, | ||
|
|
||
| inputEventListener(searchKeyword) { | ||
| window.addEventListener("click", () => { |
Contributor
There was a problem hiding this comment.
여기도 이상..window에 이벤트가 걸려있음.
이벤트 위임코드도 아니고..이상해요.
| @@ -0,0 +1,54 @@ | |||
| class TemplateData { | |||
Contributor
There was a problem hiding this comment.
TemplateData는 생성자에서 인자로 받는 값도 없고,
메서들끼리 서로 통신하거나 호출하는 과정도 없죠.
그래서 templateData.js 안에 클래스 형태를 객체리터럴이나 함수들로 구성된 형태로 표현해도 되긴하겠네요.
Contributor
네 다 처음쓰는 것들이 많죠. 당장 필요하지 않을수 있어서 , 앞으로 이벤트를 다루면서 제대로 깨닫게 될거에요. |
Contributor
괜찮던데요. 컨트롤러 역할이 무엇이냐 정의하기 나름이라.. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Git Page
https://choisohyun.github.io/javascript-amazon-anim/client/html/index.html
구현 사항
Search Auto Complete
controller: 데이터를 fetch받아 비동기로 실행하도록 하고, 입력값이 들어올 때 검색UI와 검색자동완성노출UI에 값을 전달해 줘 연결하는 역할을 한다.searchBox(검색UI): 검색창에서 키보드, 클릭 이벤트가 일어날 때의 이벤트 처리 메소드들이 있다.autoComplete(검색자동완성노출UI): searchBox에서 입력값이 발생하면 controller를 통해 전달받아 일치하는 값을 상위 10개 검색한다. 10개 미만이면 개수만큼만 보이게 한다.어려웠던 부분
아직 못 한 부분