가벼운 마음으로
Vanilla Javascript에 대한 어느정도의 이해를 하고 있다고 생각했고, Javascript 30 Course도 열심히 따라가고 있어 호기심 반으로 프로그래머스의 Dev-Matching 2020을 신청했다.
이번 Javascript 과제 테스트를 통과하면 34개의 기업 중 본인이 선택한 최대 5개의 기업에 이력서를 보낼 기회가 생긴다. (이력서 전달하기도 참 힘든 세상이다) 사실 아직 대학을 졸업하기 1년이 넘게 남고 취업에 대한 절박함은 크지 않아서 부담없이 즐기는 마음으로 이번 시험을 치뤘다.
문제에 대해서
내가 작성한 코드(어차피 틀렸겠지만)를 공개하고 싶지만 아직은 문제가 공개되지 않아 문제소지가 있을 것 같아서 나중에 공식적인 리뷰가 나온다면 다시 포스팅하겠다.
시험 시간은 3시간이었고, 토이 프로젝트 개념의 과제 하나만 완성하면 되었다. 검색 관련 문제였는데, 처음에 보고 Javascript 30의 Day 6 - Type Ahead와 정말 비슷했고 그 전에 열심히 정리한 것이 많은 도움이 됐다.
문제의 큰 틀은 input에서 무언가가 입력될 때 제시된 주소의 파라미터로 데이터를 가져와서 추천 검색어 기능 구현, 이미지 검색 구현(이미지 Fetch 관련된 코드는 제시해주었다)이었는데 부수적인 조건이 많았다.
우선 제시된 주소에서 가끔 데이터를 보내지 않고 에러를 보내는데, 그 부분에 대한 모든 에러 핸들링이 필요했다. 이는 Promise 문법에서 catch를 통해 쉽게 해결되었다. 서버 에러 말고 정말 데이터가 없어서 빈 데이터가 들어오는 경우는 if (data.length > 0) ~ else ~를 사용해서 핸들링했다.
그리고 추천 검색어를 나타낼 때 디바운싱을 사용하는 조건이 있었는데, 얼마 전 디바운싱과 쓰로틀링에 대해 포스팅한 것이 도움이 됐다. (이 쯤 되면 운이 좋은건가)
추가적인 사항으로 Keyboard Event에 대한 여러가지 조건들이 많았는데, 크게 esc, enter, 방향키(상/하) 3가지였다. key 값을 받아오는 것은 event 객체의 key 값을 검사하면 쉬웠지만, 가장 애를 먹었던 것은 상하 방향키로 추천 검색어의 포커스를 이동하고 엔터를 치면 검색이 되게 해야하는 것이었다. 나는 cur라는 현재 포커싱된 객체에만 selected라는 class를 추가하여 enter키를 입력받으면 selected class가 있는 li 객체의 innerHTML를 가져와서 검색 처리하였다.
다른 조건들도 많았는데, 핵심적인 파트는 ‘검색기’인 말 그대로 검색 기능을 필수 조건대로 성실히 구현하면 되는 문제였다. (물론 능력자분들이 많을 것이기에 추가 조건도 모두 구현해야겠지만)
좋은 경험이었고, 더 열심히 해야겠다는 생각밖에 안든다.