슬러시에서 내 삽질기록 확인 하기!
우리는 늘 삽질을 합니다. 사소한 실수 하나에도 우리 코드들은 런타임 에러들을 뱉어냅니다.
(저는 default 값 처리를 안해서, 오류 뿜뿜을 시킨적도 있어요😭)이전글
개인적으로 삽질에 삽질을 더하면 한장의 소스코드가 완성되는 느낌이에요. 그만큼 삽질은 중요한 의미가 있습니다. 그 과정들을 블로깅하는 개발자분들도 엄청 많구요!
그래서 이번에 삽질을 계속해서 시도하는 이들을 응원하고자, 자신의 블로그 기록을 아카이빙하는 아티클 기능(글 구독+삽질 보드)을 추가했습니다.
삽질의 기록이니까, 삽질의 결과인 모래를 쌓는다는 개념에 빗대어 봤습니다. 🤭
Github에 잔디 심기가 있다면, 슬러시에는 삽질 모래 쌓기가 있습니다!
이제 신설된 아티클 탭에서 나의 삽질 기록 대시보드를 보실 수 있어요.
1회의 삽질(=블로깅)마다 1개의 모래 블록이 쌓여요 😄
아티클 기능?
- 본인 블로그 주소를 등록하시면 자동으로 슬러시에도 글이 올라갑니다!
- Github 잔디처럼 이제 내 블로그의 삽질 기록을 대시 보드로 확인할 수 있어요.
- RSS를 활용하기 때문에, 해당 방식을 제공하는 서비스 3개만 현재 가능합니다.
- tistory.com / velog.io / medium.com
슬러시의 최근 삽질기
N주 전에 가끔씩 검색 결과가 적절하게 나오지 않는 버그를 발견했습니다 🤔
하지만 검색 필터가 꽤 많은데다가, 실시간 처리를 하다보니 코드가 복잡합니다.
(리팩토링은 아직 진행하지 않아서...)
계속해서 왜 검색 오류가 나는지 알길이 없었는데요, 버그가 발생하는 환경을 재현하기가 까다로웠어요.
알고 보니 허무하게도 '빠르게 입력하는 환경'에서 나타나는 오류더라구요.
검색 결과가 꼬이는 걸 막고자, 한번 검색 api가 끝나기 전까지 서버에 검색 api를 다시 못 보내게 막아 놓은게 화근이었어요.
예를 들어 “김” 이라는 키워드를 입력하려고 하면
ㄱ → 기 → 김 3번의 검색 api를 불러오게되는데 빠르게 입력할 시 ㄱ의 검색 결과를 불러오기 전에 “김”이라는 키워드를 완성해서 ㄱ 의 검색 결과를 보여주는 문제가 있었습니다. 그렇게 되면 "김" 입력이 막힙니다.
이를 막기 위해 debounce 기법을 사용했습니다.
const debounceFunction = (callback, delay) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => callback(...args), delay);
};
};
const changeKeyword = useCallback(
debounceFunction((value) => setKeyword(value), 500),
[]
);debouce 기법이란, 보통 자동완성 기능에서 많이 쓰이는 방식이에요.
원리는 단순합니다. 해당 이벤트가 발생하면 특정 시간을 둔 뒤, 그 시간이 지나기 전에 이벤트가 다시 발생하지 않으면 그 때 비로소 실행하는 방식입니다.
이렇게 되면 [김]을 빠르게 입력했을 때, [ㄱ]과 [기]를 입력한 후 특정 시간이 지나기 전에 기존 요청이 아닌, 다음 입력 요청이 진행됩니다.
그 전의 이벤트를 실행되지 않고 오직 [김]에 대한 검색 결과만 나오게 되어서 버그로 해결하고 불필요한 api 요청도 줄이게 되었습니다. 오히려 좋아
프로필 페이지 UI 변경
프로필 페이지의 디자인을 건드리지 않고 있었는데, 계속해서 보는 사람으로 하여금 이쁘게 볼 수 있도록 변경해드리고 있습니다 :)
개인적으로 이전에 제가 만들었을 때보다 x10배 나은 것 같네요. 다행입니다.
앞으로도 슬러시 삽질 기록기를 꾸준히 업로드 해보겠습니다.
감사합니다 ;)
