일주일 간의 여정을 성공적으로 마쳤습니다.
사실 소켓 통신을 처음 다룬다는 이유 때문에 두려움이 앞섰습니다.
"내가 주변의 도움없이 프로젝트를 성공적으로 완수할 수 있을까?"
하지만 앞선 걱정들은 모두 기우였다는 사실을 깨달았습니다.
프로젝트를 성공적으로 마치고 싶은 마음이 더 간절했기 때문입니다.
그리고 그 간절함 덕분에 모르는 개념은 끝까지 물고 늘어질 수 있었고, 난공불락이었던 것만 같던 에러들을 모두 깨부술 수 있었습니다.
🎉 지난 일주일 회고를 시작해보겠습니다.
📍 Why MasonTALK?
- 코드스테이츠 부트캠프 파이널 프로젝트로 패션 커뮤니티를 구현하면서 Advanced로 분류한 채팅 기능을 구현하지 못했습니다. 그래서 부트캠프가 끝나고, "꼭 채팅 웹 애플리케이션을 구현해서 설욕해야 겠다"는 생각을 줄곧 가지고 있었습니다.
- http 통신에만 익숙해있던 터라 소켓 통신에도 관심이 생겼습니다. 소켓 통신은 어떻게 이루어지는지 탐구하고 싶었고 이를 활용해 추후에 Active한 웹 애플리케이션을 구현하기 위한 초석을 다지고 싶었습니다.
- 여담이지만 여자친구와 대화하면서 우리들끼리만 사용하는 메신저가 있으면 좋겠다는 말을 나눴습니다. 프로젝트를 시작하게 된 메인 트리거는 아니지만 어느 정도 작용했다고 생각합니다.(?)
📍 사용한 기술 스택
프론트엔드
React, Bootstrap, React-router-dom
백엔드
- 개발: Node.js, Express.js, MongoDB, Socket.io, JWT
- 배포: AWS EC2, Nginx
📍 Any Difficulties?
서버와 DB 구축을 위한 툴 선택
Firebase를 사용하면 백엔드 구축이 용이했을텐데 그 쉬운 길(?)을 택하고 싶지 않았습니다.
그래서 직접 API를 작성해 서버를 구축하고 데이터베이스 스키마를 작성하기로 결정했습니다.
결과적으로 프론트엔드 개발자로서 백엔드 기능을 구축하면서 프로젝트가 큰 틀에서 어떻게 동작하는지 workflow를 파악하는 눈을 기를 수 있었습니다.
여담이지만 백엔드 구현도 은근히 재밌다는 인사이트(?)도 얻었습니다.
데이터 관리
"메시지 데이터 별로 보낸 유저와 받은 유저를 일일이 관리해야 할까?"
개설된 채팅방 정보, 유저끼리 나눈 메시지와 같은 데이터를 데이터베이스에서 어떻게 관리할지 그 스키마를 작성하는 과정에서 어려움을 겪었습니다.
문제 해결을 위해 '현재 로그인한 유저(user)'와 '현재 선택한 채팅방(currentChat)'을 전역적으로 상태 관리함으로써 이들을 기준 삼았습니다.
이러한 일련의 과정을 통해 문제 해결을 위한 논리적인 기준 정립의 중요성을 다시 한번 깨달았습니다.
문제를 효율적으로 해결하기 위한 방법을 생각해내는 그 역동적인 사고 과정이 즐거웠습니다.
프로젝트 배포
AWS EC2 서비스를 사용해 프로젝트를 배포하는 과정이 고단했습니다.
마지막 7일차에는 배포를 하면서 발생하는 에러들을 해결하면서 하루를 보냈습니다.
무수히 쏟아지는 낯선 개념들 때문에 정신이 없었지만 프로젝트 배포를 성공적으로 마치면서 한층 더 성장했음을 몸소 느꼈습니다.
AWS 클라우드 공부를 지속하면서 더욱 성장할 계획입니다.
📍 구현 사항
Context API를 활용해 유저 정보(AuthContext)와 채팅 정보(ChatContext)를 관리했습니다.
유저 간 일대일 채팅
[to be continued...]
미확인 채팅 알림
[to be continued...]
✏️ What I Learned(a.k.a. 잘한 점)
끊임없이 리팩토링 하자
자려고 누워서도 어떻게 하면 효율적인 코드를 작성할지 고민했습니다.
프로젝트 중후반 단계를 지나면서 코드가 길어졌기 때문에 코드 flow가 이해되지 않는 문제가 있었습니다.
나름 코드 정리를 했다고 생각했지만 코드는 점점 꼬이기 시작했고 이는 또 다른 에러를 낳았습니다.
그렇게 프로젝트를 마무리할 때 까지 중복되는 코드는 없는지, 생략 가능한 변수는 없는지 고민하면서 불필요한 가지를 쳐냈습니다.
코드와 로직을 심플하게 유지하면서 문제를 해결하는 습관을 길러야 겠다고 한번 더 다짐했습니다.
질문은 정확하게
소켓을 다뤄본 경험이 있는 주변 친구 그리고 stackoverflow에 질문하면서 최대한 명확하게 문제를 겪는 부분을 전달하려고 노력했습니다.
그 결과 생각했던 것보다 빠른 시간 안에 문제를 해결할 수 있었습니다.
코드스테이츠 부트캠프에서 3차례의 프로젝트를 진행하면서 올바른 질문을 하는 법의 중요성을 배웠는데 다시 한번 몸소 느끼는 계기였습니다.
👷🏻♂️ 개선할 점
- 서비스에 접속하지 않은 상태에서 누군가로부터 메시지를 받는 경우 알림이 뜨지 않습니다.
이에 대한 문제 해결 방법에 대해 지속적으로 생각해 볼 계획입니다. - 채팅방 별로 불러와야 하는 메시지의 개수가 많아지면 성능적으로 문제가 생기기 마련입니다.
Intersection Observer API를 활용해 채팅방 상단에 닿는 경우 추가로 메시지를 불러오는 방안을 생각 중입니다.React Query?
📍 마치며
개인적으로 이번 개인 프로젝트를 진행하면서 성장했다고 느꼈습니다.
24시간 고민하는 스스로의 모습을 되돌아보며 더욱 성장해야겠다는 생각이 들었습니다.
앞으로는 성능 개선에 대해 더 생각해 볼 계획입니다.
더욱 더 노력해서 능력있는 개발자로 성장하겠습니다! 파이팅!!
