🐢🐢꼬부기 LV.2 | 실습•에러/🛡️껍질에 숨기(에러해결)

카카오 로그인 API 연동 오류 정리

서화 2025. 11. 28. 22:07

1. HTML → JSP 변환 후 한글 깨짐 문제

카카오에서 제공해주는 예제 파일은 .html 이었고 나는 .jsp 파일을 만들어 놓고 그대로 복사했다.

연결확인을 위해 실행하자마자 한글이 전부 깨졌다. 한글 깨지고 나서  내가 복사를 잘못해왔구나 느꼈다

아니 ê°€ê³ ëª© 아니다...

📌 원인

HTML은 <meta charset="UTF-8"> 만 있어도 되지만, JSP는 서버가 먼저 파일을 읽기 때문에 추가 인코딩 설정이 필요했다.

🛠 해결 방법

JSP 파일 맨 위에 아래 코드를 추가한다.
(공백, 주석 포함 → 절대 위에 있으면 안 됨)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

추가 이후 정상적으로 한글 표시됨.

2. API 키 타입 혼동 (REST키 vs JavaScript 키)

🔥 문제 상황

카카오 JS SDK 방법을 쓰면서 REST API 키를 입력해서 실행했는데, 사용자 정보 처리 시 API가 정상적으로 작동하지 않았다.

📌 원인

카카오에서 제공하는 키는 종류가 여러 개인데
JavaScript SDK를 사용하는 경우 → “JavaScript 키”를 사용해야 한다.

REST 키는 서버에서 Access Token 발급/검증용이다.

🛠 해결 방법

	// 카카오 SDK 초기화
	Kakao.init("🔑 여기 JavaScript 키 넣기"); // 내가 발급받은 카카오디벨로퍼스 SDK코드
	console.log(Kakao.isInitialized()); // true 뜨면 정상

콘솔에 정상적으로 트루가 나온다 

3. HTML 구조 오류로 인해 SDK 작동 실패

로그인 버튼이 동작하지 않아 원인 분석:

📌 코드에서 <html> 태그가 두 번 닫혀 있었고, <button>이 <body> 바깥에 있었다.

공식예제 코드에서 불필요한부분들 지우면서 태그 갯수 확인에 실패했다 ...너무 많은 <div> 들이있었고 내가 공식에서 제공한 예제코드에서 에러났던 것들 까지 포함해서 태그가 두개씩 있었기때문이다

</html> <button onclick="loginWithKakao()">카카오 로그인</button> </body> </html>

브라우저가 HTML을 정상 렌더링 못 해서
onClick 이벤트 자체가 연결되지 않았던 상황.

🛠 해결

HTML 구조 정리 → 불필요한 태그 삭제

4. JavaScript SDK 적용 에러

처음에는 공식 예제 코드를 가져왔는데 거기엔 Node.js 코드, REST 호출 버튼, 동적 URL 생성 등이 섞여 있었다.

이걸 그대로 쓰면서 첫번째 삽질 시작했다 내가 예제로 써도될 코드와 안될 코드가 뭔지 모르겟어서 문법 파괴를 좀 많이 했다

그중 특히 헷갈렸던 부분이 카카오에서 제공하는 공식 예제코드는 index.html 과 app.js였는데 여기서 리다이렉트 uri부분을 설정해야하는건지 카카오의 개발자 설정에 넣어야하는건지 좀 많이헷갈렷다 

redirect_uri=`${domain}/redirect`

따라서 결론적으로 이 방식은 OAuth와 맞지 않는다. 카카오는 redirect_uri가 동적이면 안 되고 하드코딩되어야 한다.

5. redirect_uri mismatch

로그인 버튼 눌렀을 때 카카오 페이지가 뜨지 않고 아래 에러가 나왔다.

❌ 카카오는 redirect_uri가 한 글자라도 다르면 code 절대 안 보내준다.

  • 포트 번호 달라도 안됨
  • 대소문자 달라도 안됨
  • 슬래시 하나 달라도 안됨

OAuth는 이 부분이 엄청 중요하다

🛠 해결 방법

JS 코드 정리 → 불필요한 내용 싹 삭제, Node.js용 authorize 링크 삭제하고 리다이렉트 URI를 Login.jsp와 카카오 개발자 설명 둘다 똑같이 맞춰주었고 확인 결과 카카오 개발자 설정의 리다이렉트 URI가 공백이 있어서 계속 오류 났었던 거였다

이거 해결하느라 시간이 좀 오래 걸렸다

👉 최종 로그인 페이지 코드:

<script>
	// 카카오 SDK 초기화
	Kakao.init("🔑 여기 JavaScript 키 넣기"); // 내가 발급받은 카카오디벨로퍼스 SDK코드
	console.log(Kakao.isInitialized()); // true 뜨면 정상

	function loginWithKakao() {// 로그인 함수
		Kakao.Auth.authorize({
			//사용자 인증(authentication) = Auth
			//인가(authorization) = authorize
			//Auth.authorize의 역할
			//보안 강화: 사용자의 신원을 확인(인증)한 후, 해당 사용자의 권한을 검증하여 
			//시스템의 민감한 데이터와 리소스를 보호합니다.
			//접근 제어: 사용자 역할에 따라 접근 가능한 범위와 수행할 수 있는 작업을 제한하여
			//시스템의 무단 접근을 막습니다. 
			// 카카오 디벨로퍼스에 등록한 리다이렉트 URI와 정확히 일치해야함
			//공백하나 슬래시 하나도 안다르면 안됨
			redirectUri: "http://localhost:8088/kakaoLogin/Login.jsp"
		});
	}

</script>

1~5 번까지 모든 에러를  해결하고 Login.jsp에서 다시 실행해보면 카카오 로그인버튼이 나온다

버튼을 클릭 하면 로그인 동의창이 뜨고 동의 항목에 체크하고 누르면 서버가 redirect 를 실행하면서

🔥 주소창에 처음으로 아래가 출력되었다

http://localhost:8088/kakaoLogin/Login.jsp?code=1A3N8vKXZ_3ipLCIZZP_JHecR8QzNys8_lQnO_n2KwAo6xsv_
3I05QAAAAQKDRuaAAABmslG0EWt1856Xp2T3g

이 code=가 나타났다는 건

✔ 카카오 로그인 성공  ✔ OAuth 인증 1단계 성공
✔ 서버가 Access Token 요청할 자격을 얻었다

내가 바로 외쳤다 "코드 떴어!!!!!!!!!!!!!!!!!!!"

그 순간, 이 구현 과정이 이해로 연결됐다.

6.이미지경로가 올바르지 않습니다

그런데 한가지 문제가 있었다 바로 카카오 에서 제공해준 이미지 파일이 적용이 안된다는 것이었다

내가 하고싶었던것은 카카오에서 제공해준 이미지를 누르면 로그인 됬으면 좋겟다

<div> 
<!-- 로그인 버튼 --> 
<!-- 카카오로그인 이미지 가져와서 보여줘야함 --> 
<!-- 이미지 온 클릭이 가능하지 않을까 ? -->
<button onclick="loginWithKakao()" stlye= border:none backgrond = border:none couser="point"> 
<img src= "image/kakao_login_medium_narrow.png" alt ="카카오로 로그인 하기 버튼" > 
<!-- 이미지이름 쓸때 확장자 필수!! --> 
</button>
</div>

근데 이미지 경로가 자꾸 안맞는다고 에러가 떳다 처음에는 확장자를 안적어서 오류가 났었고

두번째로는 폴더명을 잘못적어서 오류가 났었다 그래서 image에서 images로 수정후 다시 실행 했는데도 안되고 있었다
http://localhost:8088/kakaoLogin/images/kakao_login_medium_narrow.png​

브라우저에서 직접 주소창에 이미지 경로를 쳐서 확인했는데 문제없이 잘나왔다 또 다시 실행 역시 안나옴

kakao_login_medium_narrow.png:1 Failed to load resource: the server responded with a status of 404 ()

경로도 다 맞고 확장자도 제대로 적었는데 오류가 나는 이유는 톰캣이 인식을 못해서 에러가 난다고 해서 서버를 정리해주고 다시 실행했다 그랬더니 콘솔에 엄청난 양의 에러를 맞이해버렸다

경고: 로더 [WebappLoader[StandardEngine[Catalina].StandardHost[localhost].StandardContext[/kakaoLogin]]]을(를) 백그라운드 프로세스로 처리 중 예외 발생 java.lang.IllegalStateException: java.io.IOException: java.lang.reflect.InvocationTargetException

으로 시작하는 에러였다 서버 마우스 오른쪽 버튼눌러서 클린 눌러서 정리해주고 

Add and Remove 에서 현재 내가 만들고 있는 프로젝트 말고는 다 제거 해주었다 

다시 실행했더니 이번에는 그 어마어마한 에러가 콘솔에 뜨진않았지만 이미지가 뜨지 않는 문제는 똑같았다

이미지 경로 문제가 자꾸 나서 EL 로 코드를 다시적었다

<img src="${pageContext.request.contextPath}/images/kakao_login_medium_narrow.png" 
alt="카카오 로그인하기">

맨위 상단에
<p>context: ${pageContext.request.contextPath}</p>
넣고 실행시켜서 출력되는 결과를 보기로 했다

결과적으로 이미지가 안나왔던 이유는 EL이 꺼져있어서 그런것이였다.....

여기서 EL 을 활성화 하지 않고 JSTL로 바꿔서 이미지 경로를 설정해주었고

<div>
<!-- 로그인 버튼 -->
<!-- 카카오로그인 이미지 가져와서 보여줘야함  -->
<!-- 이미지 온 클릭이 가능하지 않을까 ? -->
<button onclick="loginWithKakao()" 
        style="border:none; background:none; cursor:pointer; padding:0;">
   <img src="<c:url value='/images/kakao_login_medium_narrow.png' />" alt="카카오 로그인">
<!--이 한 줄이면 contextPath + 경로 자동 처리됨.  -->
</button>

드디어 이미지가 정상적으로 보이게 되는 것을 확인할수 있었다

'🐢🐢꼬부기 LV.2 | 실습•에러 > 🛡️껍질에 숨기(에러해결)' 카테고리의 다른 글

카카오 로그인 API 자바로직 오류 해결 2  (0) 2025.11.30
카카오 로그인 API 자바로직 오류 해결  (0) 2025.11.29
FrontController/ActionFactory 에러해결하기  (0) 2025.11.27
서블릿경로 ClassNotFoundExection 해결  (0) 2025.11.27
📌 회원가입 기능 구현 중 발생한 에러 & 해결 과정 정리  (0) 2025.11.25

'🐢🐢꼬부기 LV.2 | 실습•에러/🛡️껍질에 숨기(에러해결)'의 다른글

  • 현재글카카오 로그인 API 연동 오류 정리

관련글

티스토리툴바