Conversation
아니요~ 캐로셀 슬라이더 코드도 같이 두시면 됩니다. 오히려 js코드가 증가하면서 관리를 하는법을 깨닫는 연습이 필요해요. |
crongro
left a comment
There was a problem hiding this comment.
search 클래스 하나로 잘 구현했습니다.
메서드가 좀 큰 녀석들이 있는데 작게 분해할 필요가 있어보여요.
DOM API를 많이 쓰셨는데 학습차원에서 좋은 시도고요.
문자열 조작방식이 좀더 편리하기때문에, template literal 방식으로 렌더링데이터를 생성하는 것을 학습하시면 좋겠어요.
jquery로 추정되는 문법들이 보입니다. 어떻게 동작되는지 데모를 못봤지만 맞다면 수정해주세요~
| this.handleKeyDown(); | ||
| this.closeAllList() | ||
| } | ||
| handleInputChange () { |
There was a problem hiding this comment.
handleInputChange 함수 전체를 훑어보면, 들여쓰기가 5단계까지 보입니다.
이 깊이를 줄이는 방법은 무엇인지 생각해보시죠.
함수를 나누는 것도 좋은 방법 중 하나고요.
| } | ||
| handleInputChange () { | ||
| this.input.addEventListener('input',(e)=>{ | ||
| const value = this.input.value; |
There was a problem hiding this comment.
value와 같은 대명서 이름은 쓰지말고, 구체적인 의미로 이름을 지어보세요.
예를들어 inputValue나 searchQueryString 등으로 바꿀 수 있겠죠.
| const contentDiv = document.createElement('div'); | ||
| contentDiv.innerHTML=`<strong>${dataValue.substring(0,value.length)}</strong>${dataValue.substring(value.length)}<input type='hidden' value='${dataValue}'>` | ||
| this.autoCompleteItems.appendChild(contentDiv); | ||
| contentDiv.addEventListener('click',(e)=>{ |
There was a problem hiding this comment.
반복문 안에서 이벤트 등록을 하지 말고,
event delegation 방식을 여기에 적용해볼수 있을거 같은데요.
| } | ||
| handleKeyDown () { | ||
| this.input.addEventListener('keydown',(e)=>{ | ||
| if (e.which === 40) { |
There was a problem hiding this comment.
which ?? 이건 jquery 에서 제공되는 속성인거 같은데 맞나요? 표준인가...??
| if (checkOutOfListIndex) this.currentTargetIndex=0; | ||
| Array.from(this.autoCompleteItems.children).forEach((item)=>{ | ||
| item.classList.remove('autocomplete-active')}); | ||
| let choosedTarget =this.autoCompleteItems.children[this.currentTargetIndex]; |
There was a problem hiding this comment.
this.autoCompleteItems.children 과 같이 반복되는 속성값은 변수로 캐시해서 사용하는 게 어떨까요.
const child = this.autoCompleteItems.children;
let choosedTarget = child[this.currentTargetIndex]
| } else if (e.which === 13) { | ||
| e.preventDefault(); | ||
| if (this.currentTargetIndex > -1) { | ||
| this.autoCompleteItems.children[this.currentTargetIndex].click(); |
구현한 것
-인풋 변한 후 300ms후에 결과 노출
-키보드로 리스트 이동시 해당 아이템 색깔 다르게 함
-값 일치하는 아이템 모두 보여줌
-데이터는 255개 나라를 로컬 저장소에 두고 불러옴
궁금한 것
자동완성 관련된 파일만 올리고 싶었다면 캐러셀 슬라이더 관련된 파일은 로컬에서 삭제 후 다시 푸시해서
자동완성 관련된 것만 올리는 게 나은 걸까요? 깃관련해서 많이 헤매는 지라 여쭤봅니다~