목록Recoil (2)

개발조각

[recoil, recoil-persist] 로그인 구현시 recoil-persist로 storage에 토큰 넣기

예제코드에서는 next.js, typeScript를 사용하고 있습니다. recoil 설치 npm i recoil recoil 세팅 // _app.tsx import type { AppProps } from "next/app"; import { RecoilRoot } from "recoil"; export default function App({ Component, pageProps }: AppProps) { return ( ); } recoil-persist 사용이유 recoil-persist는 새로고침 시에도 데이터가 날아가지 않게 관리하기 위해 사용합니다. recoil만 사용하면 새로고침 시 데이터를 저장한 recoil state가 증발하게 됩니다. recoil-persist를 사용하면 새로고침을 해..
라이브러리 2023. 12. 19. 14:33
[모두의 이력서_14일차] Next.js TS에서 로그인 구현 (cors + react-query + axios + recoil)

이제 로그인 페이지 관련 css를 다 만들었으니 이전에 백에서 만든 로그인 라우터로 로그인 기능을 구현해 보겠습니다. cors 해결하기 클라이언트에서는 http://localhost:3000, 서버는 http://localhostL:5000이라 하면 클라이언트에서 axios.get('http://localhost:8000')하게되면 서로 다른 origin으로 인해 CORS 이슈가 생깁니다. 저는 CORS 미들웨어를 사용하여 CORS를 해결했습니다. (이게 가장 쉬운 방법입니다!) 1. cors 설치하기 npm i cors 2. express 앱에 적용하기 import express from "express"; import cors from 'cors'; const app = express(); app.u..
모두의 이력서 2023. 4. 10. 16:48
Prev 1 Next