seungho-dev

리액트 훅 중 `useEffect` 를 사용하다 다음과 같이 콜백 인수로 비동기 함수를 직접 넣게 되면 오류가 발생하게 된다.이는 `useEffect`의 동작 방식과 비동기 함수의 특징 사이에 발생하는 문제이다. 조금 더 자세히 알아보자 💁🏻 useEffect의 동작 원리`useEffect`는 컴포넌트의 라이프사이클에 따라 실행되는 훅(Hook)으로 커밋페이지(Commit Phase) 이후 사이드 이펙트를 처리하기 위해 동작하는데 이때 실행되는 콜백함수는 undefind나 클린업 함수(CleanUp Function)가  반환되어야 한다.하지만 async 함수는 Promise를 반환하므로 React는 이를 클린업 함수로 간주하고 실행하려고 시도하다가 오류를 발생시게 된다.클린업 함수는 이전 사이트 이펙..

오랜만에 하는 포스팅이다.드디어 최소기능 MVP 성냥퍼즐 웹 서비스를 완성하였다. 🎉 이제 배포하기 전에 서버비용을 줄여보고자 캐싱을 위한 React Query 설정을 마지막으로 서비스 홍보하는 방식이나 유지보수 부분을 포스팅해 봐야겠다.배포는 아직 정해지진 않았지만 cloudflare pages + aws ec2 + aws rds로 생각해두고 있다. 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.  보다시피 기능은 어느 정도 완성이 되었는데 계속해서 손봐야 할게 실시간으로 생기고 있다..계속 수정하다가는 배포까지 못할 것 같아 이 정도에서 마무리하기로 했다. 💁🏻 React QueryReact Query(TanStack Que..

오늘은 NestJS로 구현한 api를 사용해 프론트에서 Authentication을 구현해보려고 한다.바로가자~!개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.  위와 같이 /login post 요청을 통해 JWT 토큰을 받아오면 /profile 라우터에 접근할 때토큰인증을 해야 한다. 우선 전역적으로 로그인 정보를 저장하기 위해 zustand와 토큰정보를 브라우저에 저장하기 위한 미들웨어인 persist도 같이 설치해 주었다.💁🏻 Zustandnpm install zustand zustand-persist zustand란 React 애플리케이션의 전역 상태 관리 라이브러리로 Redux와 같이 Flux구조를 사용하지만 보일러 플레..