Chunho’s DevLife

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 = '요청을 ..

Facebook Login을 구현하기 위해 먼저 appId를 발급받아야 한다. https://developers.facebook.com/?locale=ko_KR Meta for Developers Conversations 2022: 제1회 Meta 비즈니스 메시지 콘퍼런스 가장 인기 있는 메시지 플랫폼에서 더욱 빠르고 개선된 경험을 구축하고자 하는 비즈니스, 개발자 및 파트너를 위한 제1회 콘퍼런스를 개최 developers.facebook.com 위 url에서 발급받을 수 있으며, 발급받는 과정은 생략하겠다. npm install react-facebook-login 타입스크립트일 경우 @types/react-facebook-login 명령어를 통해 라이브러리를 설치해준다. 나같은 경우 peer de..

최근 NextJS로 SSR을 적용한 회사 프로젝트를 진행하며, Session 인증 방식을 사용하여 로그인을 할 때, 클라이언트에 쿠키 정보가 저장되지 않아 getServerSideProps 함수를 사용하여 SSR를 할때 문제가 생기는 Issue가 있었다. [문제 발생] API 호출시 사용자 로그인 여부 확인 불가 (클라이언트에 쿠기값이 없음) getServerSideProps 사용자 정보가 필요한 API 호출시 사용자 정보 없음 -> 오류 -> 특정 정보 안내려옴 / 클라이언트쪽에서만 호출 가능 [문제 원인 파악] 문제 1. 클라이언트에서 api 호출시 브라우저에 저장된 쿠키 정보를 자동으로 가져와서 넣어준다. (withCredentials) -> getServerSideProps는 서버측에서 실행되므로..

로그인 기능을 구현하기 위해 다음과 같은 로직을 적용했다. 1. Id, Password를 입력받고 로그인 시 state에 있는 Id와 Password를 첨부하여 API에 POST 요청을 보낸다. 2. accessToken, refreshToken을 받아온다. 3. status가 200이면 Redux에 accessToken을 dispatch하고 localStorage에 refreshToken을 넣은 후 메인 페이지로 이동한다. 4. 만료 시간 1분 전에 localStorage에 저장되어 있는 refreshToken을 사용하여 accessToken을 refresh해준 뒤 dispatch한다. 5. 메인 페이지 컴포넌트가 랜더링 됐을 때 useEffect 또는Componentdidmount 함수를 사용하여 R..