1. Intro
3주차 과제는 자동 검색 기능이 포함된 검색기를 구현하는 것이었다.
필수 구현 사항
- 검색을 할 수 있는 input 컴포넌트 구현
- keyup 이벤트 사용해 키보드 입력시 자동으로 검색되도록 구현
- fetch API 사용
- 검색 결과를 보여줄 수 있는 results 컴포넌트 구현
추가 구현사항
- debounce 사용해 keyup 이벤트 최적화
- 검색어 히스토리 컴포넌트 만들기
- 검색어 히스토리 클릭해서 검색 가능하도록 구현
이번 과제는 데이터를 fetching 해오는 과정도 포함되어 있어서 이전까지 브라우저에서 로컬스토리지를 사용해 데이터를 저장하고 불러오는 것보다 신경써줘야할 부분이 많았다.
과제를 진행하면서
- api 요청을 할때에 에러 처리를 어떻게 해야할지
- api 요청을 어떻게 최적화할지
와 같은 고민들을 깊게 할 수 있는 시간이었다.
2. 라이브 세션
callbackpromiseasync awaitajax
3주차 과제의 필수 사항을 구현하기 위해서 다음 네가지의 개념을 이해해야했다.
충분히 개념을 알고 있다고 생각했었는데, 라이브세션을 들으면서 해당 개념들에 대해서 얕게 이해하고 있었던 부분들을 짚을 수 있었기 때문에 후에 해당 개념들에 대해서 학습을 진행하려고 한다.
3주차 미션을 진행하며 아무래도 어렵게 느껴질 수 있었던 부분은 비동기 작업을 처리하는 것과 디바운싱을 통한 keyup 이벤트에서 발생하는 api 호출을 최적화하는 것이었다.
로토님의 라이브코딩을 보면서 앞으로 어떠한 방식으로 접근하며 코드를 만들어가야할지 가닥을 잡을 수 있었단 시간이었다.
3. Outro
어느덧, 스터디가 막바지에 다 다르고 있다.
대망의 마지막 과제는 서버와 통신하는 투두리스트를 만드는 것이다.
부가적으로 트렐로를 구현하는것과 API 통신할때의 인터랙션 처리를 하는 것이 까다로울 것 같다는 생각이 들었다.
아무튼 마지막 과제도 잘 마무리하면서 부족한 부분들을 채울 수 있는 시간이 되었으면 좋겠다.
精進 정진
