🦯 너무 많이 바뀐거 아냐..? 좀.. 많이 바뀌었더라구요 버전 올리기 전에 바뀐점들 간단하게 문서읽으면서 정리해봤습니다. 제 기준에서 임팩트 있는 변화들만 적은거지 실제로는 더 많이 바뀌었습니다. 관심이 있으신 분은 해당 문서를 참고해주세요 https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5 Migrating to TanStack Query v5 | TanStack Query Docs useQuery and friends used to have many overloads in TypeScript - different ways how the function can be invoked. Not only this was tough to m..
할때마다 세팅방법 찾아보는게 지긋지긋하다 이런 세팅을 할때마다 꼭 문제가 발생합니다. 해결방법도 보통 전에 했던 방법과 비슷하게 하면 해결이 되곤하는데요 문제는 이게 여러가지 파일을 만져줘야하는 경우도 많고 하다보니 뭐 하나 빠뜨려서 잘 안되고 스트레스받고 그런 경우가 많다는 것입니다. 환경세팅 포스트는 유통기한이 짧긴하지만.. 없는것보단 나으니.. 이번 글에서는 tailwindcss를 storybook과 통합하는 방법 nextjs에서 storybook을 사용하는 방법 그리고 path alias를 사용하는 모듈도 적절히 resolve 하는 방법을 다룹니다. nextjs에서 storybook 깔기 npx storybook@latest init 간단합니다. 최신버전으로 깔아주시면 되겠습니다. tailwind..
💫 이전글에서 내부 구현을 간단히 다루었습니다. 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..
