API 3

[React] Orval Codegenerator를 사용한 Swagger -> React-Query 코드 자동생성

Orval 라이브러리는 Restful Codegen 라이브러리로, React app, React-query, Svelte-query, Vue-query, React app with swr, nx fastify react, angular app 등 다양한 라이브러리에서 endPoint별 Codegen 기능을 제공한다. 나는 React-Query 기반 Code generator가 필요해서 열심히 구글링을 하던 중 가장 강력하고 안정적으로 보이는 Orval이라는 라이브러리를 발견했다. https://orval.dev/ orval orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI ..

React.js 2023.02.13

[React] Cross-Domain Request 시 set-cookie가 되지 않는 이슈 [Same-Site:Strict]

API에 로그인 요청 이후, API에 로그인 세션을 확인하는 요청을 보냈을 때 404를 응답했다. 분명 로그인 요청은 200의 응답과 함께 정상적으로 성공을 했지만, 세션을 받아오지 못하는 이유를 알 수 없었다. 로그인 요청의 Response Header에서 Set-cookie의 same-site 값이 Strict로 설정이 되어있었고, 서로 다른 도메인으로 요청을 보냈기에 set-cookie가 되지 않았 던 것이다. 이를 해결하기 위해 proxy 설정을 해주었다. React 프로젝트의 src 디렉토리 안에 setupProxy.js 파일을 만들어 준 뒤 const {createProxyMiddleware} = require('http-proxy-middleware') const baseUrl = '요청을 ..

React.js 2023.01.10

[Next] Google Analytics 적용하기 두 줄 요약

NextJS 환경에서 Google Analytics는 다음과 같이 적용할 수 있다. 1. lib폴더에 gtag.js 파일을 생성한다. export const GA_TRACKING_ID = `${process.env.NEXT_PUBLIC_GA_TRACKING_ID}` // https://developers.google.com/analytics/devguides/collection/gtagjs/pages export const pageview = (url) => { window.gtag('config', GA_TRACKING_ID, { page_path: url }) } // https://developers.google.com/analytics/devguides/collection/gtagjs/events..

Next.js 2022.10.17