Kakao 소셜 로그인: Local 환경에서는 되고, S3 + Cloudfront 배포 후는 안되는 문제 해결
·
Programming/React
카카오 로그인 redirect URI 이슈를 3일간 붙잡고 있던 기록을 푼다.. 로컬에서 redirect URI의 경로를 /auth/callback으로 설정했을 때 정상적으로 동작했다. AWS S3와 CloudFront로 배포했을 때 redirect URI를 인식하지 못해 404 에러가 발생했다. 2가지 원인을 추측했다.정적 웹 호스팅으로 S3에 배포했기 때문에 카카오 소셜 로그인을 사용할 수 없다.경로를 인식하지 못한다. 리액트 라우터 문제일 수 있다.CloudFront를 처음 다뤄보았기 때문에 구글링을 엄청 했다. 퇴근 전에 다른 개발자분께 조언을 받아 2 가지 솔루션을 받았다.BrowserRouter 대신 HashRouter를 사용해보라. URL이 복잡해질 수 있지만 이 방법으로 해결한 경험이 있다..
AWS S3로 프론트엔드 배포하기
·
Programming/React
개발인턴 1주차 React, TypeScript로 프로젝트를 진행하고 있다.S3는 이전에 토이 프로젝트에 적용한 경험이 있는데, 정리를 안해놔서 그런지 구글링을 해야 했다.다음에는 더 잘 적용할 수 있게, [AWS S3로 프론트엔드 배포] 한 과정을 정리하고자 작성한다.AWS 접속 후 로그인을 하고, S3 메뉴로 접속한다.  1. S3 버킷 생성 [버킷 만들기] 버튼을 누르고 나서 버킷 이름을 입력한다. 나는 엑세스 차단 설정을 제외하고 나머지 항목 다 default 값으로 설정하였다.나중에 필요한 부분은 편집하여 수정하면 되기에.. 2. permission 설정 권한 칸에 접속한다. 추후 별도로 필요한 것들만 설정해두면 된다. 버킷 정책 칸에서 [편집] 버튼을 누른다. [정책 생성기] 버튼을 누른다. ..