[Project] socket.io를 이용해서 채팅 기능 구현하기

이번 프로젝트에서 가장 핵심이 되었던 기능 중 하나인 채팅 기능을 구현했던 과정에 대해서 정리해보고자 한다. Websocket 통신 방식은 HTTP 통신 방식과는 차이가 있었고, 처음 해보는 기능이라 학습과 병행하면서 진행했어야 했는데 그러다 보니 개념에 대한 이해를 다소 부실하게 하면서, 기능 구현에만 집중하다 보니 부족한 부분이 굉장히 많았다고 생각한다. 해당 정리 내용은 frontend 측 입장에서 어떻게 사용하는지를 작성한 글이기 때문에, backend나 전체적인 socket.io의 원리 부분들은 다른 글을 참고하길 바란다. 라이브러리 설치 및 세팅 우선 내 글을 보고 도움을 받을 분들을 생각해 미리 내 개발 환경에 대해서 정리를 해보겠다. node ver : 20.1.0 stack : React..