[카카오 API] 카카오 맵 & 카카오 로그인 API 이용한 서비스 배포하기

카카오 맵 & 카카오 로그인 API 이용한 서비스 배포하기

[index]

1. 간략한 배포 전 과정

2. 카카오맵 API 연결하기

3. 카카오 로그인 API 연결하기

4. 배운점

 

 

---

1. 간략한 배포 전 과정

이번 프로젝트에서도 서비스 배포를 담당하게 되었습니다.

이전의 프로젝트에서는 외부 API를 사용하지 않아 비교적 수월하게 배포를 진행했었는데

이번 프로젝트에서는 외부 API를 사용하였더니 배포하는 과정에서 어려움이 있었습니다.

이 글에서는 배포하는 과정에서 마주했던 문제와 해결 방법에 대해 다뤄보려고 합니다. 

 

우선 이번 프로젝트는 Amazon S3를 이용해 배포를 진행하였습니다.  

Amazon S3를 통한 배포에 대해 궁금하시다면 아래의 글을 참고해주세요.

 

https://reveur1996.tistory.com/104

[ AWS ] Amazon S3를 이용한 React 앱 배포하기

 

2. 카카오맵 API 연결하기

카카오맵 API 키 발급

카카오맵 API를 사용하기위해서는 키 발급을 해줘야 합니다.

키 발급은 카카오 개발자 사이트를 통해 할 수 있습니다.

과정에 대한 더 자세한 설명은 하단의 링크를 참고해주세요.

https://apis.map.kakao.com/web/guide/

 

간략하게 과정을 설명하면 아래와 같습니다.

카카오 개발자 사이트에서 개발자 등록 후 앱을 생성해줍니다.

그리고 해당 앱에 웹 플랫폼을 추가하고 사이트 도메인을 등록해줍니다.

그 후 앱의 JavaScript key를 앱에서 지도 API의 app 키로 사용하면 됩니다.

app key까지 세팅이 끝나면 이제 지도 기능을 구현해 주면 됩니다. 

 

카카오맵 API로 지도 기능 구현

카카오맵 API를 이용해 지도를 구현하는 방법은 아래의 글을 참고해주세요.

https://reveur1996.tistory.com/138

[카카오맵 API] Kakao maps & Naver maps API 비교 및 카카오맵으로 지도 기능 구현하기

배포 과정

배포단계에서 카카오맵은 한가지만 변경해주면 됩니다.

추가적인 과정없이 도메인을 변경해주기만하면 정상적으로 지도가 나오는 것을 확인할 수 있습니다.

바로 웹 플랫폼에 등록했던 사이트 도메인입니다.

이 도메인을 배포하는 주소로 바꿔주기만 하면 됩니다.

 

 

 

3. 카카오 로그인 API 연결하기 

카카오 로그인 API로 소셜 로그인 기능 구현하기

기존에 카카오 로그인 API를 이용해 소셜 로그인 기능을 구현했던 팀원이

카카오 로그인 API 앱을 생성하고 app key를 발급했었기 때문에 배포 과정에서 여러가지 작업들을 직접 진행해야 했습니다. 

하지만 팀원의 개인적인 사정으로 배포 과정에 참여할 수 없었습니다. 

 

다행이 이미 기능 구현은 완료한 상태이기 때문에

앱을 새로 생성해서 app key와 기존에 등록된 주소만 변경해주면 되는 작업이었습니다.

그래서 배포를 위해 카카오 로그인 앱생성부터 제가 다시 진행하였습니다.

 

카카오 로그인 API를 이용해 소셜 로그인 기능을 구현하는 방법은 아래의 공식문서를 참고해주세요.

https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

 

위에서 카카오맵 API key를 발급했던 것처럼 카카오 로그인도 app key를 발급받아야합니다.

기존에 발급받아 지정해 두었던 app key 대신  새로 생성한 앱에서 발급한 JavaScript 키로 대체했습니다.

배포 과정

1. BASE_URL을 localhost에서 배포한 주소로 변경하기

 

외부 API를 사용해서 로그인 또는 결제를 할 경우, 해당 동작이 완료된 후 다시 돌아올 수 있는 주소가 필요합니다.

BASE_URL을 그 주소로 사용하고 있습니다.

그래서 우선 BASE_URL을 배포한 주소로 변경해주는 작업을 진행했습니다.

 

2. Redirect URI 새로 등록하기

배포한 사이트에서 카카오톡 로그인 API 이용하려면 Redirect URI를 등록해야 합니다.

 Redirect URI을 배포한 주소와 엔드포인트에 맞춰서 다시 등록해주었습니다.

 

Redirect URI에 대한 자세한 내용은 아래의 공식문서를 참고해주세요.

https://developers.kakao.com/docs/latest/ko/kakaologin/prerequisite#kakao-login-redirect-uri

Kakao Developers

 

배포 과정에서 마주한 문제 

 분명 공식문서에서 요구하는 과정을 성실하게 수행했는데 로그인이 되지 않았습니다.

 

[ 문제점 분석 및 해결 방안 ]

 

 

개발자 도구 네트워크 열어보니 서버에서 로그인이 진행되지 않는 상태였습니다.

상태 코드가 500번일 경우 보통 서버의 문제이긴 하지만

당시 백엔드 팀원이 미국에 있는 상태인지라  바로 연락을 주고 받을 수가 없어

슬렉으로 해당 문제에 대해 팀원과 공유하고  답신을 기다리는 동안 

혹시나 해서 다시 한번 공식문서를 보고 혹시 잘못 된 부분이 없는지 확인해보았지만 잘못된 부분을 발견하지 못했습니다.

 

결국 미국에 있는 팀원으로부터

서버에서 KAKAO_REDIRECT_URL을 변경하고 KAKAO_CLIENT_ID를 새로 만든 애플리케이션의 key로 변경해줘야 한다는 것을

확인했습니다.

 

미국에 있는 팀원에게 다시 주소와 key를 전달하고 연결이 되었는지 확인하는데 꼬박 이틀정도가 걸렸습니다.

프로젝트를 진행할 때는 옆에서 바로바로 소통해서 해결이 빨리 되었는데

지금은 시차가 있어서 간단한 수정도 하루를 기다려야했습니다.

마침내 카카오 로그인이 성공적으로 이루어지는 걸 확인했습니다.

 

 

---

 

배운점

아무래도 기능을 구현하지 않고 공식 문서만을 참고하여 배포를 진행하다보니

API에 대한 이해도가 부족하여 배포 과정에서 어려움이 있었습니다. 

 

 소셜 로그인 기능을 구현할 때 초기에 설정하는 부분이라 다른 팀원도 그 부분에 대해 잊고 있었고,

저에게 따로 언질을 주지 않아 저또한 카카오맵 API와 동일하게 생각하고 배포 작업을 진행 했던 것이 문제의 발단이었습니다.

 

어찌되었든 배포를 하겠다고 했으니 제가 좀 더 주체적으로 학습해서 진행했어야하는데 

안일하게 기능 구현은 안하고 배포만 하니까 구현 하는 과정에 대해 완벽히 이해할 필요가 없다고 생각하고 넘겼던 부분이 있었습니다.

결국 그 부분에서 문제가 발생하니 역시 정직하게, 꼼꼼하게 학습하는 습관을 들여야겠다는 생각이 들었습니다.

 

빠르게 구현하려고 요령을 부리는 것이 때로는 더 멀리 돌아가게 하는 길이라는 것을 이번 경험을 통해 배웠고,

결국 기본에 충실하는것 (공식 문서를 바탕으로 꼼꼼히 학습하기)의 중요성을 느꼈습니다. 

 

프로젝트 종료 후 혼자서 프로젝트 코드 리팩토링과 배포를 진행하며 여러번 성장의 포인트를 맞았던것 같습니다.

새로운 기술을 사용할 때 기본적인 내용들을 더 꼼꼼하게 숙지하고 기능 구현에 들어가야겠다는 배움을 얻었습니다. 

또한 배포 과정에서 팀원들의 코드를 다시 읽어보고 이해하는 과정을 통해

가독성이 좋은 코드 작성 방법이란 무엇인지, 유지 보수가 용이한 코드란 무엇인지에 대해 다시 생각해보고 고민하는 시간이었습니다.