😉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번째줄에서 에러가 발생하고있네요 그런데 개발서버를 구동시키고 난 직후에는 에러가 발생하지않고 북마크와 관련한 이벤트가 발생하기 전까지는 에러가 발생하지 않습니다. 그렇다면 북마크로직과 어떤 연관이 있을 듯 한데 테스트를 해보다가 문제가 발생하는 지점을 찾았습니다. 자세히 살펴보면 북마크를 누르는 이벤트를 발생시켰을때 북마크를 누르는 이벤트는 문제없이 실행되지만 토스트 팝업이 나온 ..
😲CreateAsyncThunk가 필요했던 이유 toastify 라이브러리를 분석해보면 더 좋았겠고.. 실제로 toastify 라이브러리는 코드를 분석해본 사람들도 꽤 많아서 참고해볼 수 있었지만 우선 조금 이상하게라도 최소 기능은 할 수 있는 Toast를 만들어보고 싶었습니다. 다만 다른 사람들의 방식을 참고해보았을때는 이해하기가 조금 힘들었습니다. 따라서 제 방식대로 바퀴의 재발명을 시도해보았는데 제 시행착오 과정은 다음과 같습니다. 1. 우선 useState를 통해 state가 true이면 토스트를 보여줍니다. -> 문제 : 토스트를 여러개 보여주고 싶으면 어떻게 해야할까요? 2. 토스트를 여러개 보여주기 위해 각각의 카드에게 개별적인 이벤트 핸들러를 달아주고 이벤트 핸들러가 눌렸을때 toast C..
😍createPortal은..? https://react.dev/reference/react-dom/createPortal createPortal – React The library for web and native user interfaces react.dev 공식문서를 참고할 수 있습니다. createPortal은 일부 자식들을 DOM의 다른 부분으로 렌더링할 수 있는 기능을 제공합니다. 편의상 vite, cra 등 보일러플레이트를 사용해 리액트 프로젝트를 구성했다고 가정하고 진행하겠습니다. 리액트로 구성한 프로젝트는 기본적으로 보통 index.jsx 혹은 main.jsx 와 같은 엔트리포인트에서 위와 같이 렌더를 시켜줍니다. import ReactDOM from 'react-dom/client'; ..
👻 Local Storage는 어떻게 설정해줘야할까 https://xionwcfm.tistory.com/313 updateQueryData RTKquery로 클라이언트에서만 쿼리 데이터를 조작하고 싶다면 🙀 이거.. 어떻게 하는거지..? 프로젝트를 진행하던 와중 약간의 난관에 부딪혔습니다. 참고로 프로젝트는 타입스크립트와 리액트로 진행되고 있습니다. 제 프로젝트는 createApi로 생성한 비동기 xionwcfm.tistory.com updateQueryData를 이용하여 이벤트가 발생했을때 서버에 mutation 요청을 보내지않고 클라이언트 측 데이터만 조작하는 것은 성공했습니다. 다만 로컬스토리지가 문제였는데 https://redux-toolkit.js.org/rtk-query/usage/persis..
👻useState의 setState 타입을 어떻게 설정해야할까? 이런 부분들은 이해가 어렵다기보다는 자주 사용하지 않다보면 기억이 안나는 경우가 많은 것 같습니다. 간단하게 예제를 작성 하면서 알아보도록 하겠습니다. import {useState} from 'react' import HiReactItems from '대충 경로' const HiReact = () => { const [state, setState] = useState(false) return ( ) } 이렇게 작성은 해두었는데... 이걸 쉽게 생각을해서 타입을 받는다 치면 interface StateProps { setState: (state:boolean) => void } 이렇게 작성을 할 수 있겠죠? 하지만 좀 더 타입을 멋지게 작성..
