🦯 너무 많이 바뀐거 아냐..? 좀.. 많이 바뀌었더라구요 버전 올리기 전에 바뀐점들 간단하게 문서읽으면서 정리해봤습니다. 제 기준에서 임팩트 있는 변화들만 적은거지 실제로는 더 많이 바뀌었습니다. 관심이 있으신 분은 해당 문서를 참고해주세요 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..
🚒 캘린더를 왜 구현해요 라이브러리 쓰세요 라고 생각하기 쉽습니다만 의외로 캘린더는 쓸만한 라이브러리가 많이 없습니다. 대부분 css 커스터마이징에 제약사항이 존재하기 때문입니다. 이는 개발자가 그냥 대충 프로젝트에 갖다 쓰는 용도로는 충분히 유용하지만 디자이너가 있는 팀에서는 사용하기 어렵다는 말로도 바꿀 수 있습니다. 디자이너가 디자인에 있어 타협을 하든 개발자가 피눈물을 흘리든 둘중의 하나는 해야하기 때문입니다. 제가 속한 팀에서도 달력이 필요한 부분이 있었는데요 기존 코드의 경우 라이브러리를 갖다 쓰면서 라이브러리의 css를 모두 오버라이딩하는 식으로 커스터마이징을 수행해두었습니다. 이는 향후 달력 디자인이 바뀌었을 때 대응을 매우 어렵게한다는 문제가 있었는데요 다행히 캘린더는 구현하는게 그리 어..
🦆 낙관적 업데이트란 무엇일까요? 영어로는 optimistic update 낙관적 업데이트는 UX 개선을 생각하는 프론트엔드 개발자라면 적용할 가치가 충분한 기법입니다. 낙관적 업데이트란 말그대로 낙관적인 관점으로 업데이트를 바라보는 것이라고 생각할 수 있습니다. 기본적으로 다른 서버에게 네트워크 요청을 보내는 행위는 수많은 잠재적인 위험을 내포합니다. 네트워크 요청이 성공할지 실패할지는 내가 작성한 코드가 얼마나 잘 작성되었는지와는 별개로 그 코드가 실행되는 환경 / 요청을 받는 서버의 환경에 전적으로 의존하게 되기 때문입니다. 나는 요청하는 코드를 잘 작성했지만 만약 인터넷이 되지 않는 환경이라면? -> 당연하게도 네트워크 요청은 실패합니다. 나는 요청하는 코드를 잘 작성했지만 요청을 받은 서버가 내..
😊타이핑 효과? 마치 글씨를 쓰는 것 처럼 글자가 한글자씩 출력되는 효과라고 제가.. 정의했습니다. 웹 포트폴리오를 준비하고 있었는데 타이핑 효과가 있으면 재미있을 것 같다. 라는 생각이 들어 타이핑효과를 간단하게 준비해봤습니다. 그냥 코드만 보는 것도 좋지만 그런 게시물은 이미 충분히 많다고 생각하기때문에 이 글에서는 만들면서 하게 된 고민들을 하나씩 톺아보도록 하겠습니다. 😉 기능 정의 및 요구사항 1. 글자는 한글자씩 차례대로 출력되어야한다. 2. 만약 출력된 요소들이 사용자의 시야에서 사라진다면 글자는 0으로 초기화된다. 3. 다시 사용자의 시야에 글자 요소가 보이면 처음부터 글자를 출력한다. 4. 글자의 출력속도는 개발자가 컨트롤 할 수 있어야 한다. ** 성능 최적화를 고려할 것 제 나름대로 ..
RSC, Suspense , concurrency mode, use, hydrate 등 최근 리액트의 변화 흐름은 제 머리로는 코어컨셉을 이해하기도 힘겹습니다. next.js 와 같은 프레임워크에서 RSC를 적극적으로 사용하고 있으니 아..그렇다.. 뭐.. 서버겠구나.. 하고 넘어가지만 그렇다고 RSC !== SSR 은 아니라는 말을 들으니 오히려 더 혼란스러워지는 이 기분.. 여러분도 아실까요? 아시겠죠... 네.. 🤯 RSC는?? react 18 버전부터 도입된 개념으로서 React Server Components 의 줄임말입니다. 서버에서만 렌더링 되어 전달되는 컴포넌트를 의미합니다. 리액트 서버 컴포넌트는 HTML 이 아닌 "특별한 형태로" 서버에서 렌더링 되어 클라이언트에게 전달됩니다. 이러한 ..
🎄사실 이건 정말 대답하기 힘든 질문이다. "리액트를 사용하는 이유는 무엇일까요?" 이 질문은 꽤나 대답하기 어렵습니다. 왜일까요? 이렇게 대답할 수도 있을 것 같습니다. 모두가 리액트를 쓰니까 저도 쓰는거죠!! 어...나도 그렇기는 한데.. 어떻게 보면 유명한 걸로 유명한 연예인같은 느낌이 들기도합니다. 물론 그럼에도 불구하고 리액트가 많은 사람들의 사랑을 받은 이유는 이야기할 수 있을 것입니다. 이번에는 그런 "그럼에도 불구하고"에 초점을 맞추어 왜 나는 리액트를 사용하는 시대에 살고 있을까? 라는 질문에 대한 답을 찾아보겠습니다. 리액트가 많은 사랑을 받을 수 있었던 요인을 알아보기 위해서는 리액트가 기존 웹의 어떤 문제를 해결했는지에 집중할 필요성이 있습니다. 리액트가 나오기 전인 2012년 이전..
😀어떻게 해야할까요? 간혹 그런 경우가 있습니다. get 요청을 특정 이벤트가 발생했을때만 보내는 기능이 필요할때가요! 그러나 reactquery의 useQuery는 기본적으로 호출한 시점에 바로 데이터 가져오기를 시도합니다. 따라서 이 기본 동작을 멈추고 사용자가 특정 행동을 하였을때에만 데이터를 페칭해오는 로직이 필요하기도 합니다. 그런데 useQuery는 바로 데이터가져오기를 시도하니까 특정한 경우에만 사용하려면 useMutation을 사용해야할까요? 그러려고 생각해보니 get 요청에 mutation을 사용하는 것이 이상하게 느껴집니다. 다행히 리액트쿼리는 이러한 유즈케이스를 적절한 옵션으로 지원하고 있습니다. https://tanstack.com/query/v4/docs/react/referenc..
react-error-boundary란? https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary Component – React The library for web and native user interfaces react.dev https://ko.legacy.reactjs.org/docs/error-boundaries.html 에러 경계(Error Boundaries) – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 공식문서에서는 여기에서 찾아볼 수 있습니다. react-error-boundary ..
