🤗tailwindcss에 storybook을 적용시키는 방법 슬슬 정이 떨어지고 있는 yarn berry 빠른 건 알겠지만 노드 모듈에 의존성이 있거나 아무튼 지원이 안되는 경우 개복치마냥 에러가 발생하는데 굉장히 열이 받습니다. 임시방편으로 pnpify라는 라이브러리를 제공해주고 있기는 하지만 말그대로 임시방편이며 계속 사용할 것을 기대하고 만든 라이브러리가 아니라고하네요 그래도 그나마 storybook까지는 잘 적용을 해볼 수 있습니다. 그나마... 잘 적용을 해 볼 수 있는데 레퍼런스 찾아보기가 상당히 어렵네요 우선 제 환경은 다음과 같습니다. window10 yarn berry vite typescript react tailwindcss 또한 많은 깃허브 이슈 페이지와 블로그를 돌아다녔지만 가장 ..
🙄cva 함수 내부에서는 tailwind intellisense가 동작을 안해요 https://cva.style/docs/installation Installation | cva Class Variance Authority cva.style vs code를 기준으로 설명합니다. cva의 docs에서는 settings.json에 위 정규식을 포함시키면 인텔리센스를 사용할 수 있다고 안내해줍니다. 다만 처음 하는 경우에는 살짝 어렵게 느껴질 수 있을 것 같습니다. settings.json에 익숙하신 분들은 그냥 저 설명만 봐도 충분히 명확하지만말이에요! settings.json에는 명령팔레트를 통해 진입할 수 있습니다. 명령 팔레트의 단축키는 ctrl + shift + p입니다. 기본 설정과 사용자 설정을 ..
😉forwardRef는 무엇? https://react.dev/reference/react/forwardRef 공식문서에서 forwardRef를 찾아볼 수는 있지만 아마 리액트를 가볍게 사용법만 익히신 분들은 낯선 함수일것이라고 생각합니다. forwardRef는 참조를 사용하여 부모 컴포넌트에 DOM 노드를 노출시키는 함수입니다. 조금 다르게 이야기하면 forwardRef는 부모컴포넌트가 자식컴포넌트에게 Ref를 전달해야할 때 사용하는 함수입니다. const SomeComponent = forwardRef(render) 따라서 이 forwardRef를 이해하기 위해서는 Ref에 대한 선수지식이 필요합니다. 😙Ref는 뭔가요? Ref는 createRef, useref 두가지의 방법으로 생성할 수 있습니다...
https://github.com/lukeed/clsx GitHub - lukeed/clsx: A tiny (228B) utility for constructing `className` strings conditionally. A tiny (228B) utility for constructing `className` strings conditionally. - GitHub - lukeed/clsx: A tiny (228B) utility for constructing `className` strings conditionally. github.com clsx의 깃허브는 다음 링크를 타고 가면 됩니다. JavaScript로 작성된 228B의 작은 라이브러리입니다. 😍사용방법 npm install --save..
https://github.com/dcastil/tailwind-merge GitHub - dcastil/tailwind-merge: Merge Tailwind CSS classes without style conflicts Merge Tailwind CSS classes without style conflicts - GitHub - dcastil/tailwind-merge: Merge Tailwind CSS classes without style conflicts github.com github는 다음 링크를 따라가면 확인하실 수 있습니다. 대체로 typescript를 이용하여 작성되었고 현재 포스트를 작성하는 시점에는 v.3.0 up to v3.3까지 지원이 되네요 (참고로 2023/05/20 기준 ..
😉프로젝트에서 배운 점과 문제 해결 과정 1. Toast 팝업 로직 구현에서의 문제 해결 https://xionwcfm.tistory.com/318 조금 힘겨운 CreateAsyncThunk로 Toast UI 구성하기 😲CreateAsyncThunk가 필요했던 이유 toastify 라이브러리를 분석해보면 더 좋았겠고.. 실제로 toastify 라이브러리는 코드를 분석해본 사람들도 꽤 많아서 참고해볼 수 있었지만 우선 조금 이상하게라 xionwcfm.tistory.com 2. Toast 팝업 로직 트러블 슈팅 과정 https://xionwcfm.tistory.com/319 [SoloProject] Toast Side Effect issue 😭미들웨어가 왜 여기서도 실행될까 문제없이 기능이 동작하고는 있었지..
☮ 부트캠프의 도움으로 수진님의 코드리뷰를 받을 수 있었다. 서점에서 단숨에 배우는 타입스크립트라는 책의 표지와..두께에 이끌려 열심히 서서 읽었던 기억이 있습니다. 처음 TypeScript에 입문하고 있었던 시기였는데 타입스크립트 핸드북의 번역상태가 좋지 않아 좀 더 이해가 잘 되는 레퍼런스를 찾던 중 발견한 책이었습니다. 물론.. 다 읽지는 못했지만 굉장히 좋은 책이라는 생각을 했었는데 바로 그책을 번역하셨던 분이시더라고요.. 이런분께 코드리뷰를 받을 수 있는 기회를 놓칠 수 없어서 코드리뷰를 요청드렸는데 너무 유익한 코드리뷰를 받아서 포스트로 남겨두고자 글을 작성하고 있습니다. const Modal = () => { const isModalOpen = useSelector((state: RootSt..
😭미들웨어가 왜 여기서도 실행될까 문제없이 기능이 동작하고는 있었지만 타입에러가 발생하는 현상을 확인했습니다. 먼저 오류 메시지부터 읽어보면 undefined에 배열메서드 map을 사용할 수 없기때문에 발생하는 타입에러입니다. 그렇다면 어디에서 타입에러가 발생한것일지 아래를 읽어봅니다. addBookMarkProperty의 12번째줄에서 에러가 발생하고있네요 그런데 개발서버를 구동시키고 난 직후에는 에러가 발생하지않고 북마크와 관련한 이벤트가 발생하기 전까지는 에러가 발생하지 않습니다. 그렇다면 북마크로직과 어떤 연관이 있을 듯 한데 테스트를 해보다가 문제가 발생하는 지점을 찾았습니다. 자세히 살펴보면 북마크를 누르는 이벤트를 발생시켰을때 북마크를 누르는 이벤트는 문제없이 실행되지만 토스트 팝업이 나온 ..
