이름 | 버전 |
---|---|
node | ^18.7.0 |
npm | ^9.8.1 |
react | ^18.2.0 |
server repository
npm install
npm start
- 인자로 받은 callback 함수를 DEBOUNCE_DELAY_TIME 만큼 딜레이 후에 실행하는 함수를 return 하는 useDebounce custom hook 선언
- input의 onChange event listener에 위에 말한 return된 함수 넣기
- 검색어 상태를 변경하는 함수를 callback 함수로 넣어주기
![Screenshot 2023-09-17 at 15 38 20](https://private-user-images.githubusercontent.com/55657931/268486770-cebc3256-fa05-4cc8-aef3-de3e72b652a6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MDkyMDAsIm5iZiI6MTcyNDYwODkwMCwicGF0aCI6Ii81NTY1NzkzMS8yNjg0ODY3NzAtY2ViYzMyNTYtZmEwNS00Y2M4LWFlZjMtZGUzZTcyYjY1MmE2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE4MDE0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ1YjRjZWRjZjZiNjM5MzIxYjcxYjhiMjU5YTlkMmRlMjg3ODc3MmZlZWI3N2FiY2FiMGIxMmIxZTVkMzNkNzAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.l02GCNKFFcnfDgmUBHUcW2mxSUdMTfeDxk8Plti5EHo)
- SearchKeywordList: 최근 검색어
- childrenElementCount: 모달에 몇개의 최근 검색어가 있는지
![Screenshot 2023-09-17 at 16 28 19](https://private-user-images.githubusercontent.com/55657931/268488706-9d295009-fc73-41fc-8b6f-65753962d0d4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MDkyMDAsIm5iZiI6MTcyNDYwODkwMCwicGF0aCI6Ii81NTY1NzkzMS8yNjg0ODg3MDYtOWQyOTUwMDktZmM3My00MWZjLThiNmYtNjU3NTM5NjJkMGQ0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE4MDE0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRmYzM1YzQwODVlZjZhYjJiOGE4MzM0NTMzY2E2ZDE3NmYyNzZlYzFhNDQ2NzdjMTYwNTBjNGFkMTM1MzIxYmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.TB7YZl6z9CgWxpM99BEOBGxUGr-pYHsqh3PN2G6SbNQ)
- 최근 검색어가 있으면
- key down
- 최근 검색어 리스트의 끝 지점 도달 T/F
- T : 최근 검색어 index 0 으로 초기화
- F : childrenIndex + 1
- 최근 검색어 리스트의 끝 지점 도달 T/F
- key up
- 최근 검색어 리스트의 처음 지점 도달 T/F
- T : 최근 검색어 리스트 끝으로 이동
- F : childrenIndex - 1
- 최근 검색어 리스트의 처음 지점 도달 T/F
- key down
Commit Type | Format |
---|---|
feat | 새로운 기능 추가 |
bug | 버그 수정 |
design | 사용자 UI 디자인 변경(CSS 등) |
refactor | 코드 리팩토링 |
rename | 파일 혹은 폴더명을 수정만 한 경우 |
remove | 파일을 삭제만 한 경우 |
docs | 문서수정 |
chore | 빌드 업무 수정, 패키지 매니저 수정(gitignore수정 등) |