현재 하고 있는 프로젝트에서 (사주타로말고 헿) Redux Toolkit의 RTK Query를 사용하여 API 요청들을 처리하고있다.클라이언트 요구사항으로 인증을 추가해달라는게 있어서 리프레시토큰과 엑세스 토큰을 사용하여 요청들을 보호하도록 코드를 만들었다.이거슨 다음에 또 RTKQ를 사용해서 인증할 때 참고할 수 있도록 찌는 포스팅1. 기본 fetchBaseQuery 설정먼저, RTK Query에서 API 요청을 처리하기 위해 fetchBaseQuery를 사용하여 기본 쿼리를 설정한다.fetchBaseQuery는 API 요청을 단순화하고, 일관된 설정을 제공하는 데 유용한 도구로써, 해당 설정은 요청 헤더에 인증 토큰을 추가하고, 표준 요청 헤더를 설정하여 요청의 일관성과 보안을 보장하게 도와준다.//..

프로젝트를 만들고 있는데, gpt 토큰과 회원가입 기능이 생기기 전까지는 서버리스 api만으로도 충분할 것같았다.(쓰다보면 플랫폼은 옮기더라도.. 서버리스로 계속 해도 되지않을까 라는 생각도 하고있긴....함 헿) vercel로 배포할때 serverless function 사용하다가 헤매가지고.. 기록용으로 적어둔다   설정방법1. 루트 폴더안에 api 폴더를 생성한다. 나는 최상위가 CHAT-ASTROLOGY폴더고 하위에 backend랑 frontend가 있는 레포지토리 구조라서 frontend 아래에 api폴더를 생성했다. backend를 lambda로 따로 배포하려다가 vercel에 한꺼번에 할 수 있다고 해서 수정하게되었다.   // api/fortune/result/[id].jsimport { ..

현재 사주&타로 프로젝트를 만들고있다. + 포춘쿠키 기능 (헿)사용자가 자신의 결과를 쉽게 공유할 수 있으면 좋겠다는 생각에 SNS 공유 기능을 살펴보았고, 사용자가 많은 카카오톡과 먼저 연동하는 작업을 진행했다.카카오 디벨로퍼스 플랫폼 등록[Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com](https://developers.kakao.com/)카카오 API를 활용할 수 있는사이트.회원가입 후 내 애플리케이션 - 앱설정 - 플랫폼 에 들어가서 사이트 도메인을 등록해준다.사이트 도메인에 테스트 가능한 도메인을 입력한다. localhost 테스트때는 꼭..

포스트맨 무료버전을 쓰다가 항상 모자라서 새로 아이디 파는게 귀찮아서 MSW를 쓰게됐다. 그리고 콜렉션을 export 해둘 필요가 없어 다른사람들이 나중에 운영할 때도 편할 것 같았다. 구글에 있는 msw 세팅을 따라했더니 오류들이 발생해서 새로 쓰는 글 (항상 공식문서 Getting started부터 따라하자) 오류발생 코드import { rest } from 'msw' export const personHandlers = [ rest.get('/api/get-names', (req, res, ctx) => { const names = ['jimi', 'john', 'scott', 'queen'] return res(ctx.status(200), ctx.json(names)) }), ] export c..

RTK만 쓰다가 사내 스터디를 하게돼서 Zustand랑 TanStack Query 자료를 준비하게되었다. 회사에서 시연용으로는 포켓몬 API (무료 API중 제일 재밌 ㅇ_ㅇㅋㅋ)를 준비해서 가져갔다. 아래는 설명용으로 만든거! 블로그에도 쪄놔야지 히히 React + Zustand + Tanstack Query Zustand? Redux, Recoil 등과 함께 전역 상태를 관리할 수 있는 라이브러리. Redux와 개념적으로 비슷(Flux패턴을 채택)하기 때문에 Redux, RTK사용자가 학습하기 쉽다. Flux Pattern? 2014년 facebood F8컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기위해 사용하는 디자인 패턴 사용자 입력을 기반으로 Action을 만들고..