💫 이전글에서 내부 구현을 간단히 다루었습니다. https://xionwcfm.tistory.com/422 따라서 이번에는 위 구현방식을 참고해서 제가 필요한 기능만 뽑은 커스텀 useFunnel을 제작해보겠습니다. 사실 그냥 토스의 useFunnel 훅을 갖다쓰고 싶은 마음이 더 컸지만 사용에 꽤 많은 애로사항이 있어서 그냥 필요한 기능만 들어간 커스텀훅을 만들기로 했습니다. 토스의 구현 방식에서 얻을 수 있었던 인사이트를 나열해보면 다음과 같습니다. 1. nextjs의 shallow routing을 통해 뒤로가기를 구현하면서도 상태를 유지할 수 있다. (pages router에서는 쉘로우라우팅이 잘 지원되는데 앱라우터는 이슈가 많더라구요 앱라우터 쓰시는 분들은 참고하셔야겠습니다.) 2. 뒤로가기의 히..
use-funnel https://www.youtube.com/watch?v=NwLWX2RNVcw 우연히 toss slash의 퍼널에 대한 유튜브 영상을 보게되었는데 사실 저는 퍼널이라는 용어 자체를 저 영상에서 처음 접했습니다. 용어가 생소할 뿐이지 개념 자체는 너무 익숙한 개념이었습니다. 익숙하다못해 제가 다니는 회사의 핵심 기능 역시도 퍼널이라고 볼 수 있었습니다. 이번에 회사코드 전체에 대한 기술 부채를 해소하는 마이그레이션을 진행하면서 가장 골칫거리로 미뤄두고 있던 기능 역시도 저 퍼널이었습니다. 40여개에 달하는 설문조사들을 한페이지에 한개의 질문씩만을 보여주면서 해결하기 위해서는 정말 많은 페이지가 필요하고 그만큼 구현도 복잡해지기 쉬웠는데요 어떻게 해결하는게 좋을까라는 고민을 하다가 우연히..
스토리북이 뭔데 ㅋㅋ 저같은 경우에는 코드스테이츠 과정을 들으면서 처음 알게된 라이브러리인데요 CDD를 도와주는 라이브러리라고 생각할 수 있습니다. CDD란 Component Driven Development ChatGPT Driven Development 의 약자로 컴포넌트를 모듈 단위로 개발하여 UI 구축을 하는 개발 방법론입니다. 프로젝트 규모가 커지면 커질수록 컴포넌트를 독립된 환경에서 테스트하기 어려워집니다. 또한 컴포넌트가 해당 프로젝트에서만 멀쩡하게 UI를 표현하고 다른 프로젝트에서는 제대로 쓸 수 없는 경우도 많습니다. 따라서 독립된 환경에서 테스팅할 수 있도록 도와주는 스토리북은 저도 프로젝트가 어느정도 자리잡힌 환경에서는 아.. 스토리북이 있으면 이런 바보같은 일은 안해도 될텐데.. 라..
🚒 캘린더를 왜 구현해요 라이브러리 쓰세요 라고 생각하기 쉽습니다만 의외로 캘린더는 쓸만한 라이브러리가 많이 없습니다. 대부분 css 커스터마이징에 제약사항이 존재하기 때문입니다. 이는 개발자가 그냥 대충 프로젝트에 갖다 쓰는 용도로는 충분히 유용하지만 디자이너가 있는 팀에서는 사용하기 어렵다는 말로도 바꿀 수 있습니다. 디자이너가 디자인에 있어 타협을 하든 개발자가 피눈물을 흘리든 둘중의 하나는 해야하기 때문입니다. 제가 속한 팀에서도 달력이 필요한 부분이 있었는데요 기존 코드의 경우 라이브러리를 갖다 쓰면서 라이브러리의 css를 모두 오버라이딩하는 식으로 커스터마이징을 수행해두었습니다. 이는 향후 달력 디자인이 바뀌었을 때 대응을 매우 어렵게한다는 문제가 있었는데요 다행히 캘린더는 구현하는게 그리 어..
https://xionwcfm.tistory.com/328 cva, tailwindmerge, clsx를 조합하여 재사용 가능한 UI 만들기 😎세가지를 조합하면 아주 멋진 것을 만들 수 있다. https://xionwcfm.tistory.com/322 https://xionwcfm.tistory.com/323 https://xionwcfm.tistory.com/325 지금까지 진행한 세가지 라이브러리에 대한 포스트입니다. 이 세 xionwcfm.tistory.com 이때 다뤘던 라이브러리인데요 간단히 요약하면 테일윈드에는 css 적용 순서이슈가 있습니다. 이는 빌드타임에 모든 css를 정적으로 생성하고 사용하는 테일윈드의 동작 방식에서 기인하는데요 .green-400 { color:green } .red..
테스트 커버리지 개인적으로 많이 궁금했던게 있습니다. 간혹 이력서에 테스트 커버리지를 몇퍼센트에서 몇퍼센트까지 올렸다. 라는 문구를 넣으시는 분들을 본적이 있는데요 테스트커버리지라는게 대체 뭔데? / 테스트커버리지를 어떻게 측정한건데? 라는 생각이 들었지만.. 따로 찾아보지는 않았었습니다. https://www.daleseo.com/jest-coverage/ Jest로 테스트 커버리지 수집하기 Engineering Blog by Dale Seo www.daleseo.com 근데 위 글을 참고해보니 테스트 커버리지를 측정하는 옵션을 jest에서 이미 제공해주고 있었더라구요 흥미로워서 바로 따라해봤는데 몇가지 문제가 있었습니다. 쓸데없는 파일까지 전부 측정되잖아!! module.exports = { coll..
기술 블로그 운영 꼭 해야할까요? 이 블로그의 첫 게시물은 2022년 11월이지만 제 인생 첫 블로그 게시물이 언제인지를 생각하면 아마 지금으로부터 15~16년은 거슬러 올라가야할 것 같습니다. 개발자가 되기위한 공부를 시작할 때에는 취업에 도움이 된다고해서 시작했는데 정작 블로그가 제 취업에 도움이 되었는지는 잘 모르겠습니다. 아마 제 서류합격률 같은 것엔 전혀 도움이 안 되었던 것 같습니다. 그럼에도 불구하고 / 취업에 도움이 되지도 않고 / 정작 이제 취업을 하기는 한 제가 기술 블로그를 계속 운영하는 이유는 두가지 정도로 요약할 수 있을 것 같습니다. 1. 제 기술 블로그를 가장 유용하게 사용하는 건 미래의 저였습니다. 결국 블로그 글을 작성하면서 그냥 돌아가니까 넘어갈수도 있는 환경설정 같은 부..
🐸 테스트 코드가 왜 어려울까 그것은 테스트 코드를 써본적 없는 사람에겐 환경 설정이 지옥이기 때문이다. 진짜 한참 헤맸던 건데 테스트 코드를 입문하시는 분들이라면 비슷하게 헤매실 것 같습니다. 처음 jest를 설치하고 대충 a + b 테스트코드 짤때는 개쉬운데 컴포넌트 렌더링 해보는거에서 한번 지옥맛보고 비동기 테스트 하는거에서 두번 지옥맛을 본 뒤 테스트 코드를 손절하는.. 저도 그랬었는데요 심지어 리액트 쿼리 공식문서에서도 중요한 셋업을 전혀 가르쳐주질 않아서 한참 헤맸습니다. 테스트 진행 환경은 다음과 같습니다 next.js 13.5.3 / pages router jest ^29.7.0 msw ^1.3.2 @testing-library/jest-dom ^6.1.4 @testing-library/r..
