클라우드타입 서비스 링크 : 카카오 로그인 에러 해결 완료!

개인적인 사정과 다방면으로 공부&배포를 하면서 그동안 디저트 레시피 프로젝트의 개발을 잠시 뒤로 하고 있었는데,

새 기능 개발을 위해 깃허브(클타 배포용)코드를 해치지 않게 푸시하도록 로컬 코드들을 좀 정리를 해주었다.

 

예를 들어 깃허브 코드와 같이 배포용으로 사용할 env 환경변수 이름들 코드를 그대로 유지하면서 로컬 env 환경변수 값은 로컬호스트로 바꾸어준다거나 mysql 환경변수도 로컬 워크벤치 커넥터로 바꾸어주거나 하는 시간을 가졌다.

그러다가 npm start 하니 에러가 뜨길레 어제부터 계속 에러를 처치했다 =-=;;

 

신기했던 건 이제 에러가 발생하면 개발자 도구 탭을 활용하려고 했다는 것! Network 탭까지 밖에 아직 미치지는 못했지만 그래도 거기서 보이는 에러들을 보면 request 값이 잘못 되었는지 등을 스스로 더 알아보려고 하고 있다는 것이다.

정말 만족스러웠던 순간은 개발자 도구(Network - status)로 CORS 에러를 확인하고 CORS 설정에 무엇이 문제였는지 보고 찾아서 해결했다는 점!!

 

 

그리고 클라우드타입 서비스 링크에서 카카오 로그인이 안 되었던 이유도 찾고 해결할 수 있었다.

 

 

원인

frontend_url 환경변수를 env 파일에서 가져올 때 process.env.frontend_url (CORS에서는) 또는 `${process.env.frontend_url}`(리다이렉트시) 이렇게 적어야 하는데,

나는 process.env를 적지 않았기 때문이었다.

처음 배포할 때도 이렇게 올려도 되는지 잘 모르겠었었는데 필요했나보다.

 

 

지금은 pc와 모바일 환경에서도 카카오 로그인이 잘 되고 가입도 잘 된다아 ㅎㅎㅎ😄

 

 

이제 다음으로 나아가보자!