기억에 남는 트러블 슈팅 경험

이직을 준비하다보면 기억에 남는 트러블 슈팅 경험에 대해 묻거나, 처음부터 지원서에 트러블 슈팅 경험에 대해서 묻는 경우가 많은 것 같다.

나는 뤼튼에서 일하면서 하루종일 코딩만 했다고 생각하는데, 막상 나에게 어떤 챌리지들이 있었지 ? 라고 떠올리면 마땅히 떠오르지 않았다.

한편으론, 너무 거창한 것들을 생각하려고 하다보니 더 부담으로 다가왔다는 생각이 든다.

그래서 지금 이렇게 생각날 때 내가 겪었던 트러블들과 그것들을 어떻게 해결 했었는지 간략하게 적어보고자 한다.

그러면 나중에 기억을 떠올리기 훨씬 쉬울 것 같고 내가 적어놓은 것들을 바탕으로 또 다른 트러블 슈팅 경험들이 파생될 수 있기 때문이다.

즉, 이 포스팅은 아카이빙에 가깝다고 볼 수 있겠다.

wrtn.io 랜딩페이지 만들 때 typewriter 사용해서 타이핑 애니메이션 구현했던 경험

wrtn.io라는 페이지는 기억에 정말 많이 남는 프로젝트 중 하나이다. 왜냐하면 거의 입사하자마자 바로 시작했던 프로젝트였고, 프로젝트에 대한 경험이 거의 전무했던 시절에 정말 무식하게 들이대면서 코드를 짰던 시절이기 때문이다. (물론 지금도 무턱대고 들이댑니다..😂)

랜딩 페이지 초기 버전은 이 타이핑 애니메이션이 동영상으로 재생되고 있었다.

그러나, 애니메이션을 사용자에게 제공하기 위해 웹 페이지에서 영상을 재생하는 방법보다는, 코드로 구현하는 것이 더 좋은 사용자 경험을 제공할 것이라는 의견이 나왔다.

처음에는 이걸 어떻게 코드로 구현해…? 라고 생각했었는데, 웹상에서 코드로 구현되지 않는 것이 어디있겠는가 ! 그래서 그런 의구심들은 접고 어떻게 애니메이션을 구현할 수 있는지에 초점을 맞춰 리서치를 시작했다.

그러던 중에 내가 하고싶은 것을 정확히 동작하는 typewriterjs라는 라이브러리를 발견했고 이걸 적용하기 시작했다.

wrtn.io 를 들어가서 타이핑 애니메이션을 보면 알겠지만, 단순히 타이핑되고 지워지는 로직이 아니다.

문장이 다 써진 후, 뒤에서부터 지워지다가 특정한 부분을 건너뛴 다음에 커서 위치에 드래그가 일어난다. 그리고 드래그 된 부분이 지워지고 그 부분이 다시 다른 언어로 채워진다. (지금 생각해도 참 아찔하다 ? 이걸 구현한 나 자신 칭찬해 ~)

이걸 구현하기 위해서는 커서의 위치들과 알파벳들을 알파벳 문자 한개 단위로 지정해줘야 한다. (커서가 한번에 여러 알파벳을 건너뛰면 굉장히 부자연스러운 애니메이션이 나오기 때문이다.)

그리고 이 애니메이션이 거의 다 완성되었을 때, 에러 핸들링이 제대로 되지 않아서 중간에 애니메이션이 멈춰버리는 문제가 생겼다.

그냥 error를 catch로 잡아주면 해결되는 문제였는데, 그게 안되어 있어서 중간에 애니메이션이 멈추는 버그가 발생했다.

그래서 어떻게 할지 고민하다가 typewriterjs 라이브러리를 fork 뜬 후 라이브러리에서 에러 핸들링 로직을 추가했다. 그 뒤에 내가 수정한 typewriterjs 라이브러리를 wrtn.io 프로젝트에 넣어서 해결할 수 있었다.

react-slick을 사용하여 애니메이션을 구현했던 경험

위 두 개의 사진 모두 react-slick을 사용해서 구현했다. react-slick은 애니메이션을 구현하고자 하는 카드들을 react-slick의 Slider로 감싸서 이용하면 된다.

그리고 만약 Button을 cusomizing하고 싶다면, Slider에 ref를 준 후에

<Slider ref={sliderRef} {...settings}>
  // ...
</Slider>

custom된 버튼에서 sliderRef.current에 있는 slickNext() 메서드를 사용하면 된다.

<CarouselRightButton
  onClick={() => {
    sliderRef?.current.slickNext()
    setClickCount(clickCount + 1)
  }}
/>

국제화 + 국제화 자동화 했던 경험

i18n 국제화 + 국제화 자동화를 했던 경험은 양이 워낙 방대하기 때문에 따로 포스팅을 하도록 하겠다.

해당 프로젝트를 진행할 당시에 구체적으로 기록을 해놨기 때문에, 그것을 조금 수정해서 포스팅 하겠다 !

검색 필터링 기능을 hangul-js 라이브러리를 사용해서 구현했던 경험

한글로 검색 기능을 사용하다보면 자음 단위로는 검색이 허용이되지 않는다. 예를 들어, 카오산 로드라는 단어를 검색하려 한다고 가정해보겠다.

검색창에 ㅋ을 치면 카오산에는 ‘ㅋ’라는 자음이 포함되지 않는다고 판단되기 때문에 Array.includes()와 같은 메서드로는 필터링 되지 않는다.

이를 해결하기 위해 hangul-js라는 자음과 모음을 분리해주는 라이브러리를 통해서 자음 단위로도 검색을 할 수 있도록 구현했다.

export const useToolListSearch = (searchKeyword, favoriteArray) => {
  const searcher = React.useMemo(() => new hangul.Searcher(searchKeyword), [searchKeyword])

  const [searchResult, setSearchResult] = React.useState([])

  React.useEffect(() => {
    const timer = setTimeout(() => {
      setSearchResult(favoriteArray.filter((item) => searcher.search(item.name) > -1))
    }, 100)
    return () => clearTimeout(timer)
  }, [favoriteArray, searcher])

  return searchResult
}