TIL 220905 - 실시간 채팅이 된다!

실시간 채팅을 구현하기 위해 주말에 소캣 통신 코드를 짜 봤다. 사실 내 담당 파트가 아니었는데 실시간 채팅에서 시간을 많이 잡아먹으면 나중에 다른 기능들 구현이 힘들어질 것 같아서 나도 공부하는 마음으로 손을 댔었다. 혹시나 팀원들이 힘들어하거나, 같이 고민해야 하는 부분이 생겼는데 모르면 같이 코드를 바줄 수도 없을 것 같아서 혼자 공부해보자 라는 마음으로 시작했다.

 

먼저 socket.io가 무엇인지 찾아봤고, 여러 사람들이 간단한 채팅 기능을 구현한 것들을 보면서 코드를 눈에 익혔다. 점점 여러 기능들이 붙은 블로그 글도 찾아보았고, 전에 실시간 통신을 이용해서 채팅방을 만든 깃허브를 보면서 어떻게 로직이 짜였는지 봤다. 그 후엔 잘못되더라도 돌아갈 수 있게 test 브랜치를 하나 파서 혼자서 채팅 기능을 연습해 보고 있었다.

그러면서 우리 프로젝트에서는 채팅방이라는 곳들에 들어가는 개념이고, 그 안에 이뤄진 채팅은 저장되어서 나중에 들어와도 채팅들을 불러올 수 있게 해야 하고 등등 우리 프로젝트에 맞게 어떻게 해야 할지 로직을 생각해보았다.

어느 정도 가닥이 잡히자 소캣 통신에 대한 코드만이라도 한번 짜 보자 하면서 코드를 치기 시작했다.

 

치면서 그전에 여러 블로그에서 보았던, 구조라던지, 변수 사용 등을 참고해서 좀 더 효율적으로 디비에 접근을 최소화하면서 구현할 수 있을까를 많이 고민했다. 참고하는 깃허브는 mysql을 사용하지만, 하드코딩으로 닉네임 등을 저장하고, 배열에 넣어서 수많은 데이터 가공을 해서 채팅을 보여주었다. 나는 관계형 디비를 사용하는 만큼 여러 번 테이블에 접근하지 않으면서 필요한 데이터를 한 번에 가져오는 것으로 해서 코드 길이를 절반 이하로 줄일 수 있었다.

그리고 app.js와 어떻게 연결해야 소캣에 연결이 돼서 사용할 수 있을지 파일 분리에 대해서도 많이 찾아보았다. 보통은 작게 기능을 설명하려고 app.js에 소캣 통신 코드를 넣고 사용하는데 우리는 크진 않지만, 파일 분리를 해야 가독성과 리팩토링이 좋을 것 같아서 따로 분리했다.

 

오후엔 프론트와 직접 연결을 해보면서 채팅방 입장, 퇴장, 서로 채팅 주고받기 등을 맞춰보면서 작업했다.

처음엔 대략적으로 맞춘 변수명과 데이터 형식도 하나하나 맞춰서 사용하니까 코드도 더 간결해지고 보기도 편해졌다.

중간에 채팅 주고받는 문제가 있었는데 내가 잘못된 코드로 계속 메시지를 보내고 있는 작은 문제도 있었다. 나도 좀 억울한 건, io.emit인데 socket.emit으로 보내고 있었는데 그 코드가 전기수 사람들이 사용했던 코드니까 당연히 문제없겠지?라는 생각이었고, emit에만 집중한 나머지 앞부분 변수가 다른 지도 몰랐던 것이다.

그거 하나 바꾸니까 사실상 실시간 채팅이 완성되었다. 물론 작은 부분 부분들은 프론트와 얘기하면서 거의 다 맞췄고, 필요한 데이터만 쏙쏙 주니까 잘 동작하였다.

 

이 실시간 채팅도 한 3~4일 정도 걸릴 줄 알았는데 맞춰 본 지 하루 만에 해결된 것 같아서 너무 다행이다

덕분에 시간을 많이 세이브했으니까 다른 작은 기능들을 추가해서 여러 요소들을 사용할 수 있게 하거나, 팀원들과 상의해서 우리 주제에 잘 녹일 수 있는 큰 기능이 있다면 그쪽으로도 도전해보고 싶다. 아직 해야 할 것들이 많이 남았지만, 큰 기능 2가지를 끝내서 너무 다행이다

사실 앞에 말한 것처럼 채팅 기능은 내 파트가 아닌데 나도 공부 좀 해야지 하면서 시작한 일이 내가 너무 주도적으로 싹 다 해버려서 다른 팀원에게 좀 미안하다... 백앤드에서 파이를 나눠서 각자 맡은 일을 하자고 했는데 내가 해버려서 좀 많이 죄송하다.. 프로젝트 쪽으로 본다면 빨리 해결돼서 좋지만, 그분에게는 공부할 거를 뺏긴 느낌일 수도 있고, 내가 정식으로 물어보고 한 것도 아니라서 나중에 꼭 말씀드려야지.. 죄송합니다..

 

오늘 공부한 개념

 

https://jin-coder.tistory.com/52

소켓 / 웹소켓