한 줄로 요약하자면
지금 생각해 보면 참 간단한 걸 가지고 오래도 힘썼다 싶다...
WebSocket 통신이라는 게 아예 경험해 본 적이 없는 내용이다 보니 떡하니 눈앞에 있는 출구를 냅두고 한참을 헤맸다.
(이 밑으로는 구구절절 일기장.)
우리 조는
슬랙Slack 클론 코딩을 진행했다.
선정한 주제의 특성상 당연히 실시간 채팅을 구현해야 했다.
나는 채팅 기능을 맡게 되었고, 시간이 일주일밖에 없어 불안했기 때문에 금토일 주말 동안 기본적인 뷰 작업과 CRUD 기능은 모두 구현을 해놓을 테니 월요일에 일단 바로 맞춰보자고 주장했다. (지금 와서 생각해 보니 만약 이렇게 진행하지 않았을 경우 채팅 기능 구현을 못 했을지도 모르겠다.)
시작은 쉬웠으나...
막상 걸음을 떼어보니 쉽지 않았다. 때로는 구글이 해답을 주지 않을 때도 있는 법이다...
그래서 이전 기수의 모든 Websocket 코드를 뒤졌다. 그렇게 찾은 코드들을 클론해서 vscode 창을 서너 개씩 켜두고 하나하나 비교했다. 그러다 보니 공통적인 코드들이 보였다.
얼추 비슷하게 코드를 짜놓고도 안심이 되지 않았다. 어쩌면 백엔드 분들이 나 때문에 굉장히 힘드셨을지도 모르겠다. 매일매일 '이게 될까요?'의 연속이었다.
팀원과의 소통조차 쉽지가 않았다. 컨플릭은 부지기수였고 현재 개발 상황에 대해 물어보려면 일단 게더에 접속부터 시켜야 했다. 정말... 힘들었다...! 😥
약속했던 월요일에 처음으로 코드를 맞춰보았지만 역시나 웹소켓 관련 코드는 제대로 동작하지 않았다. 어디서부터 문제인지 감조차 오지 않아서 코드 수정도 쉽지가 않았다. 이때쯤 중간중간 말 걸어준 사람들이 많았는데 뭔 정신으로 대답했는지도 모르겠다.
아무튼 대체 어디가 문제인지도 알 수가 없는 상황에 나는 당연히 내 코드의 문제일 거라 생각했고, 따로 떨어져 있는 테이블에서 폐관수련을(ㅋㅋ) 시작했다.
그러다가 우연히
무엇이 문제인지 발견하게 됐다. 안 될 땐 처음부터 짜보는 게 해답이 될 수도 있으니까, 코드를 전부 지우고 한 줄 한 줄 다시 쓰면서 에러를 확인했다. 어이없게도 웹소켓 코드의 첫 줄, 핸드쉐이킹 코드부터 에러가 발생했다. 정확히 기록을 해두진 않았는데 아마 500 에러였을 것이다.
여기저기 찾아본 결과 웹소켓의 핸드쉐이킹 과정에는 jwt 토큰을 담을 수 없는 것 같았는데, 우리 조는 백엔드단에서 이 핸드쉐이킹(http통신)까지 토큰 검증을 실시하고 있었던 것 같다. 이걸 해결하는 데에 시간이 꽤 걸렸지만, 해결하고 나서는 물 흐르듯 진도가 나가기 시작했다. 하나 해결하면 하나 에러가 뜨는 식이었지만 그래도 뭔가 되어가는 게 보이면 힘이 나기 마련이니까. 핸드쉐이킹을 넘어 연결, 그리고 구독까지 진행되고 나니 비명이 절로 나왔다(ㅋㅋ) 그렇게 하나하나 진행해 보니 채팅 구현은 생각보다 어렵지 않았다. 처음 겪는 과정이 생소하고 어려웠다 뿐이지, 구현 방식의 본질은 http 통신과 크게 다르지 않았던 것 같다.
아무튼 어쩌다 보니 우리 조는 실시간 채팅 기능을 가장 빨리 구현한 조가 됐고, 어쩌다 보니 제출 전 하루 정도 시간이 남아 채팅방 퇴장 기능, 그리고 가입 시 자동으로 입장되는 단체 채팅방까지 만들 수 있었다. 거기서 더 나아가 다른 조들이 막히는 부분을 도와줄 수도 있었음(!). 진짜 이게 되네, 이걸 해냄의 끝판왕이었다.
시작부터 개박살났던 내 자존감과는 별개로
앞으로의 개발에 임하는 마음가짐을 다지는데에도 꽤 도움이 됐던 한 주였던 것 같다. 나는 생각보다 무능하지 않을 수도 있고, 나는 생각보다 남들에게 도움이 될지도 모른다...! 큰 산을 하나 넘고 나니 기분이 너무 좋다. 개발 너무 재밌어!
