🙃 대체왜요??이거.. 좀 케케묵은 이슈이기도 하고.. 스택오버플로우 보면 4년전에도 이런 일을 겪은 사람이 있고.. 공식문서에서도 안내사항을 만들어둘만큼 유명한 이슈인 것 같은데요... 처음 시도하는 사람은 약간 신고식처럼 맞고가야하는 것 같네요 저는 마침 처음 시도해본 덕에 호되게 맞고왔습니다. 동작 자체는 문제가 없기 때문에 타입스크립트 사용자 한정으로 문제가 됩니다만.. 요새 타입스크립트 안쓰는 사람이 어딨어요 하하😙 왜 문제인가요?자바스크립트 생태계의 테스트 프레임워크들이 여러개 존재한다는 것때문에 발생한다고 할 수 있습니다. jest, vitest, mocha 등등등... 테스트 프레임워크는 참 많은 종류가 나와있고 또 얘네들은 사용자 편의를 위해 하나 익혀두면 다른것도 뭐 그냥저냥 쓸 수 있..
👱♂️간헐적 회고 시간이 너무 빠른 것 같습니다. 벌써 입사한지 두달이 지났는데 회사에 들어오길 잘했다는 생각이 조금 들곤합니다. 항상 best pratice에 집착하면서 더 좋은 방법.. 더 좋은 방법..을 고민하는 것이 제 장점이자 단점이라고 생각하는데 그러면서도 마감기한은 맞춰야하는 상황이 있다보니 코드퀄리티와 속도를 적절히 타협하는 연습이 된 것 같습니다. 회사일과 개인적인 목표 두가지로 나누어서 정리하고 회고해보는 시간을 가져보고자합니다. 회사 1. 회사일은 생각보다 반복되는 작업이 많다. -> 기술적으로 난이도가 있는 일은 아닌데 귀찮은, 일일이 하면 자동화할 수 있는 여지가 많은 일들이 꽤 있었습니다. 이것들이 자동화되면 참 좋을 것 같다는 생각이 들기도하면서 내 몸은 하나다보니 적절히 리..
🦯 너무 많이 바뀐거 아냐..? 좀.. 많이 바뀌었더라구요 버전 올리기 전에 바뀐점들 간단하게 문서읽으면서 정리해봤습니다. 제 기준에서 임팩트 있는 변화들만 적은거지 실제로는 더 많이 바뀌었습니다. 관심이 있으신 분은 해당 문서를 참고해주세요 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를 모두 오버라이딩하는 식으로 커스터마이징을 수행해두었습니다. 이는 향후 달력 디자인이 바뀌었을 때 대응을 매우 어렵게한다는 문제가 있었는데요 다행히 캘린더는 구현하는게 그리 어..
