# kakaoAPI

heeo

SpringBoot 프로젝트에서 OAuth2와 spring security를 사용하여 카카오API를 이용한 소셜 로그인을 구현하고 DB에 넣는것까지 완성했다. > 개발 환경 Spring Boot 2.7.15 Java 11 spring security 5 Maria DB 카카오 로그인 API는 이런식으로 진행된다. > ### 1. Kakao Developers 에서 애플리케이션 등록 Kakao Developers에서 애플리케이션을 추가한다. ![](https://velog.velcdn.com/images/h

xogk1128

📌계기 이번에 대학교에서 진행하는 공학경진대회에서 앱을 개발하던 도중 간편하게 로그인을 할 수 있는 방법과 현재 많은 웹에서 사용하는 방법인 API를 이용한 로그인을 구현하게 되어 후에 또 사용하게 될 경우를 대비하여 이렇게 작성하게 되었다. 📌안드로이드 초기 설정 setting.gradle Android SDK를 적용할 프로젝트의 settings.gradle(Project) 파일에 다음과 같이 Android SDK 레파지토리를 설정한다. 모듈 설정 - build.gradle(Module) build.gradle(Module) 파일에 필요한 모듈을 설정한다. 전체 모듈을 설치하거나 필요한 모듈만 선택해 설치하면 된다. 인터넷 사용 권한 설정 - AndroidMani

bomi__unni

Kakao.js clickable을 true로 설정한다. 이부분만 작성하면 클릭하면 내가 원하는 것을 띄울수있다.

bomi__unni

Kakao.js `const markerPosition = new kakao.maps.LatLng(33.450701, 126.570667); const marker = new kakao.maps.Marker({ position: markerPosition }); marker.setMap(map);` 이것만 작성하면 마커가 생긴다! ` // 아래 코드는 지도 위의 마커를 제거하는 코드입니다 // marker.setMap(null); `

bomi__unni

Kakao.js App.js index.html `` 이 부분만 작성하면 된다. github : https://github.com/chxxrin/Kakaomap 참고자료 : https://velog.io/@tpgus758/React%EC%97%90%EC%84%9C-Kakao-map-API-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

jgkang9402

vite-react로 사이드 프로젝트를 하던중 환경변수 설정을 할 때 삽질을 좀 했다. vite 환경변수 설정방법 .env파일에 환경변수를 설정할때 cra같은경우 "REACT_APP"이라는 키워드를 써서 환경변수를 설정했다면 vite는 "VITE"라는 키워드를 써야했다. ex) VITEKAKAOAPI_KEY=발급받은키 vite 환경변수 접근법 cra에선 "process.env.환경변수명"으로 접근을 했었다. 하지만 vite에선 "import.meta.env.환경변수명"으로 접근을 할 수 있다. > cra : console.log(process.env.환경변수명) vite : console.log(import.meta.env.환경변수명) index.html에 환경변수 동적삽입방법 오늘의 삽질은 이부분 이었다.. 카카오맵의 경우 index.html에 카카오맵sdk를 넣는방법이 가장 쉬운방법이다. 구조는 아래와같은형태이다. 가장 쉬운 방법은 바로 키값을

a_in

서론 본 게시물에서는 지도에서 특정 위치를 클릭하여 좌표를 가져온 후, 좌표에서 주소로 변환하는 작업을 기록하였다. 오픈 API를 적용해보면 알겠지만, 블로그만 보고 코드를 복사 붙혀넣기 하거나 대충 메서드의 역할만 파악하고 코드를 치면 안된다. 카카오 지도 API 문서에는 내가 사용하고 싶었던 기능을 친절하게 샘플과 코드 예시로 보여주지만, 무턱대고 복사 붙여넣기 하면 이 API를 30%도 제대로 사용하지 못 할 것이다.(잘못하면 한 주를 낭비한다.) 만약 이런 오픈 API를 사용하는 방법을 잘 모른다면 "나는 시간이 없으니 필요한 것만 딱 뽑아서 봐야지" 라는 생각은 접어두면 좋다. 항상 차근차근 API의 시작단계부터 공부하는 것을 추천한다. 카카오 지도의 시작단계는 지도 생성하기 이기 때문에 꼭 지도를 생성하는 메서드를 본 후 샘플을 보기 바란다. 지도 생성하기 과정을 담은 벨로그 링크: [Kakao Map 전환기 - 지도 생성하

yevini118

지난 글 에서는 allauth로 카카오 로그인을 진행하였는데 직접 oauth2 로그인을 구현해보았다. 카카오 로그인 api 동작방식과 카카오 애플리케이션 추가 과정은 지난 글에 있어서 생략하고.. urls.py 카카오에 등록해준 redirect uri를 path에 등록해 준다. views.py 로그인 로그아웃 자세한 내용은 카카오 api 에 아주 친절하게 설명이 나와있다. 삽질하면서 작성했던게 아까워서 블로그로 작성해두기.. 🥲

yevini118

이번 프로젝트는 간편 로그인을 필요로 했기 때문에 소셜 로그인을 사용하기로 했다. 원래는 인스타그램 로그인으로 진행하려고 했는데.. 정보부족과 인스타그램 api의 이런저런 불편함으로 카카오 로그인 api를 사용하기로 했다. 지난 프로젝트에서 카카오 로그인 api를 사용해봤었기 때문에 api의 동작 방식은 알고 있었고,, 어렵지 않게 끝낼 수 있을것이라 생각했지만... 장고로 처음 개발해본 나는 .. allauth + 카카오 로그인으로 (꽤나) 삽질을 했다 멍청..멍청.. allauth의 소셜 로그인 카카오 로그인 REST API 우선 카카오 로그인의 REST API 과정은 이러하다. 자세한 내용은 [카카오 api](https://develo

jikoo92

완벽하지는 않지만, cache를 써보았습니다. 실습환경 google apps script kakao 로컬 api fetch method CacheService in google apps script >cache를 써본 이유 >1. 데이터 중복 요청 방지 한 번에 170만 개의 데이터를 받아 오는 데, 빠른 요청을 통해 데이터를 효율적으로 관리하기 위하여 데이터를 다시 요청할 때, 데이터에 변동이 생긴 경우에만 새로운 데이터를 받아올 수 있도록 하기 위하여 cache를 사용하기 위한 테스트 코드 cache를 해놓은 데이터가 잘 불러와 지는 것도 확인 완료. 무조건적인 cache의 사용보다는 어떤 경우에, 그리고 왜 사용하는 게 좋은지에 대한 나만의 판단과 근거를 가지고 사용해야 겠다.

a_in

본 게시물은 기존에 사용했던 Naver 지도 API에서 Kakao 지도 API로 전환하는 과정을 담았다. 사용 스택: Next.js TypeScript 서론 개인적인 이유로 Naver 지도 API를 사용하였다가 Kakao 지도 API로 전환하게 되었다. 다행히 지도 API를 처음 생성하는 것보다는 덜 오래 걸렸지만 사용법이 완전히 똑같지 않기 때문에 부가로 더 이해해야 할 것이 많았다. 지도 생성하기 뿐만 아니라 지도를 클릭해서 주소를 가져오는 것, 네이버에는 없었던 키워드로 주소 검색하기도 차례차례 구현해보며 "Kakao Map 전환기" 시리즈를 만들어 볼 예정이다. 본 게시물에서는 script를 불러오고 지도를 생성하면서 어떤 에러를 마주했는지, Naver API와 다른점이 무엇인지를 정리해보았다. Kakao Map API 사용하기 Kakao Map API 사용하기부터 먼저 다뤄보겠다. TypeScript와

tpdlqj0514

강남 맛집 50곳 위치 찍기 [ 1. 데이터 수집 📝 ] 강남 맛집 50곳의 정보를 정리해줍니다. 맛집 검색 사이트에서 50곳을 가져와 엑셀 파일로 정리해줬습니다. 그러나 맛집이 30개만 보여주어서 제가 좋아하는 카페도 20곳을 넣어줬습니다. [ 1-1. 📃 강남_맛집.xlsx ] 다음과 같이 총 50개의 데이터를 뽑아 정리했습니다. [ 2. 데이터베이스에 저장하기 ] [ 2-1. 데이터를 저장할 테이블 생성 ] | Field Name | Value | |:----------:|:------| | id | 가게들의 구분 번호 | | store_name | 가게 이름 | | address | 가게 주소 | | x | 지도상에 가게의 x좌표 | | y |

gukbbap

지도... 꾸역꾸역 도움 받아서 보여지게 했는데.. TA왈 "형 검색조건이 너무 단순한데요? 주소 말고 상호로도 검색해서 나오게 해 주세요" 나 "......해볼게?" modal에 지도 띄우는것도 난감한데 인터넷에서 겨우겨우 퍼와서 맵 띄우고 검색어 입력해서 검색 되게 했는데 검색조건 증가는 또 어떻게 하냐 ㅜㅜ... 나 여기 들어올 때만 해도 콘솔에 출력도 못하고 int가 뭔지 String이 뭔지 몰랐던 사람이라고.. 지금도 for문 헷갈리는데 망... 취업 할 수 있을까..

blooper20

1. 앱 등록 우선 카카오 디벨로퍼사이트에 접속하여 내 애플리케이션을 클릭하고 앱등록을 한다. 애플리케이션 추가하기를 클릭하고 사용할 플랫폼에 맞게 생성해준다. 번들 ID를 프로젝트랑 통일 시켜준다. 2. 패키지 다운받기 ![](https://velog.velcdn.com/im

beberiche

✍ 오늘 한 일 💡 오늘 진행 상황을 간단하게 정리 합니다. 카카오 맵 렌더링 카카오 map API를 불러오기 초기 셋팅을 한 후, 받은 lat, lng 값을 기반으로 맵을 렌더링하였다. 2차 발표 다음주 현재 진행상황을 설명하는 중간발표가 있다. 발표시간은 15분이며, 현장에서 직접 발표가 진행된다. 발표는 프론트 / 백 / 코어로 나뉘어 이루어지며, 인사, 팀소개, 기획 개요, 각 분담 역할마다 현재의 진행상황과 사용할 기능들을 이야기 한다. 시간이 여유가 된다면, 앞으로 할 진행 사항들을 소개할 생각이다. 마커 이미지 디자인 마커 디자인은 캐릭터를 선택하였다. 게임과 현실 맵에서 오는 격차를 줄이기 위한 수단이다. 캐릭터 템플릿을

ssonnni

구름에듀 사이트의 판다코딩의 HTML/JS/CSS로 나만의 MBTI 사이트 만들기 강의를 보고 만들었습니다. 01. HTML 각 3개의 섹션 레이아웃하기 총 3개의 섹션으로 나누어 한 페이지로 레이아웃하여 1️⃣ 이 보일 때 display:block 나머지 2️⃣,3️⃣은 display:none으로 처리할 것이다. => SPA(Single Page Application) 1️⃣ 사용자가 처음 들어왔을 때 보여줄 Main page id="main" 2️⃣ 스타트 버튼을 눌렀을 시 보여줄 QnA page id="qna" 3️⃣ 질문 응답의 결과로 보여줄 Result page id="result" 부트스트랩 이용하기 부트스트랩의 그리

mlmlmlmlz

카카오 로그인 기능 탑재 후 앱을 배포하여 베타 테스트 진행중 고객사 측에서 안드로이드에서 카카오 로그인 버튼을 눌러도 아무 반응이 없다는 컴플레인을 받았다.. 그럴리가 없..는데.. 하고 테스트 해보니 정말 아무 반응이 없었다. 로그를 찍어도 딱히 정보가 찍히지 않는 것이다.. 원인 및 해결 배포하면서 프로젝트를 release 모드로 바꾸면 kakao developer 플랫폼에서 키 해시를 추가로 등록해줘야 한다. 릴리즈 모드 해시값을 얻는 명령은 다음과 같다. 위 명령어의 결과로 나온 해시값을 kakao developer - 플랫폼 - Android 키 해시에 추가하면 이상 없이 정상 작동하는 것을 확인할 수 있다. 정리 앱 출시를 마치기 전 앱에 카카오 로그인 기능이 담겨있다면 아래의 값들이 kakao developer android 키 해시 항목에 추가되어 있어야 한다. 디버그 모드 해시값 릴리즈 모드 해시값

mlmlmlmlz

카카오 로그인을 구현하고 잘 되는지 테스트까지 마친 후였는데 ..!! 어느 날 보니 갑자기 기능이 작동하지 않았다... 앱 미설치 시 링크(AuthCodeClient.instance.request())를 통해 로그인하는 로직은 잘 동작하는데 문제는 앱을 통한 로그인 기능(AuthCodeClient.instance.requestWithTalk())이 말썽이었다. 정상적이라면 동의창이 뜨고 동의하면 다시 개발 중인 앱으로 돌아가야 하는데, 카톡으로 이동한 후 동의화면도 뜨지 않은 채 바로 개발중인 앱으로 돌아오는 것이었다.. kakao developer 문의 결과 서버 로그에는 내쪽으로 토큰이 잘 발급되고 있다는 피드백을 받았다. ..? 대체 왜 안 되는데 그럼 .. 🤯 원인 원인은 네이버 로그인을 추가하면서 카카오톡 로그인에 사용되는 url이 네이버 SDK에서 수신받아 처리되고 있는 것이었다. 네이버 로그인을 위해선 위와 같이 AppDelega

mlmlmlmlz

주소 검색을 위해 KpostalView를 사용하여 잘 쓰고 있었는데 어느날부턴가 검색 후 주소를 선택해도 다시 전페이지로 돌아가지 않는 오류가 생겼다. 아니 잘 되다가 갑자기 왜...? 🤯 배포를 앞두고 있던 상황인지라 더 멘붕이 왔다. call back 처리가 안 되는 문제라 판단되어 거기에만 포커스를 맞췄는데 아무리 레퍼런스를 찾아도 나와 같은 상황은 없어서 짧게나마 외로운 싸움을 했다 .. 다음은 싸움의 결과이다. 결론적으로 서버가 배포를 위해 SSL적용이 되면서 로컬 서버를 사용하지 않게 됨에 따라 나타나는 오류였다. 해결을 위해서는 먼저 KpostalView 위젯의 속성에 kakaoKey를 세팅하고, useLocalServer: false로 세팅한다. kakaokey는 보안상의 이유로 '#'으로 대체했지만 kakao developer에서 앱의 JavaScript 키를 세팅하면 된다. 그리고 kakao devel

designc

실시간 크롤링을 통한 데이터로 추천 서비스를 제공하는 웹 만들기 링크https://unibangcity.netlify.app/ 주요기능 > - #### 로그 데이터 수집 및 재활용을 통한 서비스 > - #### python requests를 이용한 크롤링/파싱 > - #### child_process:{spawn}을 이용한 nodejs와 python 연동 > - #### kakaoApi 연동 > - #### 데이터 시각화(chartjs, react-wordcloud) Backend > 소스코드 링크 https://github.com/znehraks/unibangcity-backend > - #### python, nodejs 연동 > -