[챗GPT로 코딩 공부] WebSocket 연결 문제 해결

내일배움캠프 수료생들은 챗GPT를 어떻게 개발 공부에 활용할까요?

Jul 08, 2024

Contents

WebSocket 연결 문제 해결 내일배움캠프가 여러분의 러닝메이트가 되어드리겠습니다

✍🏼

챗GPT, 개발 공부에 있어서 든든한 친구 같은 존재이죠. 내일배움캠프의 수강생들도 혼자 공부할 때에는 챗GPT의 도움을 받고 있는데요. 오늘은 내일배움캠프 수료생들의 챗GPT 경험담을 보고, 여러분의 개발 공부에 적용해봅시다.

WebSocket 연결 문제 해결

WebSocket 연결이 되지 않고 403 에러가 뜨는 상황을 GPT를 통해 해결하였습니다.

실시간 채팅을 구현하는 기술로 WebSocket을 선정한 후에 공식문서를 그대로 따라 쳤습니다. 연결 여부를 확인해 보기 위해 GET 요청을 날렸으나 403 에러와 함께 소켓 연결이 되지 않았습니다.

프롬프트: https://spring.io/guides/gs/messaging-stomp-websocket/ 이 공식 문서를 따라 쳤는데 웹소켓 연결이 403 에러가 떠

GPT는 웹소켓 엔드포인트 설정, CORS 설정, Spring Security 설정. 이 셋 중 하나에서 문제의 원인이 있을 것이라고 말해주었고 서버 로그를 확인하면 더 구체적으로 알 수 있을 것이라 답변했습니다.

프롬프트: 근데 1,2번 이슈는 거의 401이나 500이 뜨지 않아? 403이면 spring security 일 확률이 높지 않아?

403 에러는 주로 Spring Security에서 발생하는 것을 몸소 겪었던 위와 같이 질문했습니다. GPT는 Spring Security 문제일 확률이 높다고 말해주었고 구체적인 문제로 Spring Security의 설정으로 인해 WebSocket 엔드포인트에 대한 접근이 허용되지 않을 가능성을 제시하였습니다.

이 해결 방법으로 필터 단에서의 requestMatchers(’엔드포인트 URL’).permitAll() 과 CSRF 옵션 비활성화를 말해주었습니다. 저 permitAll() 메서드를 보고 나니, 프런트엔드에서의 소켓 연결 요청에 jwt 헤더가 들어가 있지 않은 것이 원인이라는 것을 깨닫게 되었습니다.

프롬프트: 너 의견 듣고 찾아보니까 우리 서버가 모든 요청에 대해 jwt 헤더를 검증하는데 그걸 보내주지 않아서 오류가 나는 것 같아. 근데 인증절차 안 거치게 permitAll 해버리면 보안에 문제가 생기지 않아?

그러나 GPT가 알려준 방법은 검증 절차 생략이라는 미봉책에 불과하다고 생각해 다음과 같이 질문했습니다.

다행히 GPT는 동의해 주었고 WebSocket Handshake 시에 JWT 토큰을 검증하는 인터셉터를 만든 후, 이 인터셉터를 WebSocketConfig에 등록하는 방법을 제시하여 주었습니다.

이 방법을 사용하면 인터셉터에서 검증을 진행해 주기 때문에 permitAll()을 해주더라도 보안을 갖춘 WebSocket 연결이 가능했고 구현에 이르렀습니다.

내일배움캠프가 여러분의 러닝메이트가 되어드리겠습니다

내일배움캠프의 많은 수강생들이 부트캠프 생활을 수료하고 현업에서 개발자로 활약하고 있습니다. 내일배움캠프는 모든 운영진이 교육, 특강, 12시간 밀착 케어, 찐한 관리, 인재 채용까지 열과 성을 다해 수강생들의 꿈을 지원하고 있습니다. 수많은 장애물을 넘을 수 있도록 내일배움캠프가 든든한 러닝메이트가 되어드리겠습니다. 내일배움캠프과 함께 여러분의 개발자 여정을 시작하세요.

CREDIT

글 | 장동하 내일배움캠프 수료생 편집 | 김진원 팀스파르타 객원 에디터