🛶 목표

• 영문/한글, 브랜드명/제품명을 고려하여 사용자가 원하는 영양제를 보다 쉽게 찾을 수 있도록 설계한다.
• 검색 성능을 최적화한다.

구현 후기

⛳ debounce 사용

이번 과제를 하며 debounce를 적용해보았다. 검색창에 입력을 하면 입력하는 글자마다(한글은 초성, 중성, 종성 모두) 렌더링이 발생하는데 debounce나 throttle을 쓰면 이러한 현상을 상당히 줄일 수 있다.

보통 throttle은 지도에서의 드래그나 무한 스크롤 등 순식간에 엄청나게 많이 발생하는 이벤트에 사용되고,
debounce는 일정 동작이 끝나면 맨 마지막 동작 하나만 실행해주는 방식으로 주로 검색 입력에 많이 쓰인다고 한다.
=> 그런데 채용 면접에서 둘을 꼭 구분하지 않아도 된다는 이야기를 들었다. 상황에 맞게 더 적절한 것을 사용하면 될 것 같다.

💎 검색 자동완성 기능 구현

몇 달 전에 블로그의 검색 자동완성 코드를 따라했던 적이 있었다. 따라 친 코드여서 어떻게든 동작은 되었지만, 그 때는 값이 함수를 왔다갔다 하는 과정이 도저히 이해가 안 됐었다. 이번 원티드 과제를 통해서 검색 자동완성 기능을 다시 구현해보니 드디어 내 것으로 만들 수 있게 되었다. 🤸‍♀️
사실 코드는 몇 줄 안 되는데 내게는 너무 어려웠던 기능이었지만, 스스로 해볼 수 있게 되어 숙제 하나가 해결된 느낌이다.

🎪 구글 Lighthouse로 Performance 최적화

처음에 Lighthouse를 돌렸을 때는 Performance가 79점이 나왔다. 원인을 진단해주는 diagnostics를 확인해보니 용량이 큰 로컬 폰트 파일을 다운로드하는 과정에서 첫 로딩에 지연이 발생한 것을 알 수 있었다.

웹 폰트를 사용하면 로딩 시간이 길어진다고 알고 있어서 그동안 쭉 로컬로 다운받은 폰트만 써왔는데, 이 방법이 반드시 빠르기만 한 건 아니라는 걸 알게 되었다. 😨

2주 전 개발 지식 공유 스터디에서 폰트 관련 발표가 있어서 해당 글과 함께 구글에서 이것저것 검색한 자료를 참고한 뒤, 쓰지 않는 한글 조합을 제외한 '서브셋 폰트'라는 게 있다는 것을 알게 되었다.

그래서 위의 Performance 문제는 기존의 original 폰트를 서브셋 폰트로 대체하여 해결할 수 있었다. 문제를 해결한 뒤 Performance 지수는 79점에서 96점으로 수직 상승하였다. 앞으로 한글 폰트를 쓸 때는 original 폰트가 아닌 서브셋 폰트를 써야겠다는 생각이 들었다.

🌠 리팩토링 후기

이번 과제에서는 며칠 전 보았던 토스 진유림 님의 클린코드 영상 내용을 리팩토링을 하며 익혀보는 과정을 거쳤다. 영상에 나왔던 커스텀 훅은 따로 작성하지 않았지만, 새로 익힌 내용을 프로젝트에 실제로 적용해본다는 데 의의를 두고 진행했다.

영상의 핵심은 '컴포넌트에 최대한 핵심 데이터만 남기고, 코드 파악에 중요하지 않은 세부 데이터는 분리하라' 였다.

프로젝트에 리팩토링을 진행한 내용은 다음과 같다.

• 기능 로직과 상관없는 문자열 정보들은 모두 상수(constant)화 해서 utils 폴더에 분리했다.
• API 관련 코드인 axios 코드를 hooks 폴더에 분리했다.
• import * as S ~ 구문을 활용하여 styled-components 코드를 컴포넌트 파일에서 분리했다.

미리미리 리팩토링을 해가며 개발을 진행하니 나중에 뭔가를 더 해야 한다는 부담감이 줄어들었다. 그리고 나중에 코드를 다시 살펴볼 때 코드가 전반적으로 가벼워진 느낌이 들어서 읽기가 편해졌다는 것이 느껴졌다.