MasonTALK 개인프로젝트 회고록

일주일 동안의 여정을 성공적으로(?) 마쳤습니다.

사실 소켓 통신을 처음 다뤄본다는 막연한 두려움이 앞섰던 것 같습니다.

"주변 도움없이 프로젝트를 성공적으로 완수할 수 있을까?"

이같은 걱정들은 모두 기우였습니다.

매 순간마다 프로젝트를 성공적으로 마치고 싶다는 마음이 더 간절했습니다.

그리고 그 간절함 덕분에 모르는 개념은 끝까지 물고 늘어질 수 있었고, 난공불락이었던 것만 같은 에러들을 모두 해결할 수 있었습니다.

지난 일주일 회고를 시작하겠습니다! 🎉

📍 Why MasonTALK?

1. 이전에 패션 커뮤니티를 구현하면서 Advanced로 분류했던 채팅 기능을 끝내 구현하지 못했습니다. 그 이후 "꼭 채팅 웹 애플리케이션을 구현해봐야겠다."는 생각을 줄곧 가지고 있었습니다.
2. http 통신에만 익숙했던 터라 소켓 통신에도 관심이 생겼습니다. 소켓 통신은 어떻게 동작하는지 알아보고 싶었고, 이를 활용해 추후 Active한 웹 애플리케이션을 구현할 수 있는 초석을 다지고 싶었습니다.
3. 여담이지만 여자친구와 대화하며 우리들끼리만 사용하는 메신저가 있으면 좋겠다는 말이 나왔습니다. 프로젝트를 시작한 메인 트리거는 아니지만 어느 정도 작용했다고 생각합니다(?).

📍 사용한 기술 스택

프론트엔드

• React, React-Bootstrap, React-router-dom

백엔드

• 개발: Node.js, Express.js, MongoDB/Mongoose, Socket.io, JWT
• 배포: AWS EC2, Nginx

📍 Any Difficulties?

1. 서버와 DB 구축을 위한 툴 선택

Firebase를 사용하면 백엔드 구축이 용이했을텐데 굳이 그 길을 택하지 않고 싶었습니다(?).

그래서 직접 API를 작성하고 서버를 구축해서 DB 스키마를 작성하기로 결정했습니다.

결과적으로 백엔드 기능을 구축하면서 프로젝트가 큰 틀에서 어떻게 동작하는지 workflow를 파악하는 눈을 기를 수 있었습니다.

여담이지만 백엔드 구현도 은근 재밌다는 인사이트(?)도 얻었습니다.

2. 데이터 관리

"메시지 데이터별로 보낸 유저와 받은 유저를 일일이 관리해야 할까?"

개설된 채팅방 정보, 유저끼리 나눈 메시지와 같은 데이터를 데이터베이스에서 어떻게 관리할 지 그 스키마를 작성하는 과정에서 어려움을 겪었습니다.

문제 해결을 위해 '현재 로그인한 유저(user)'와 '현재 선택한 채팅방(currentChat)' 전역적으로 상태관리하면서 이들을 기준으로 삼았습니다.

이러한 일련의 과정을 통해 문제 해결을 위한 논리적인 기준 정립의 필요성을 다시 한번 깨달았습니다.

문제를 효율적으로 해결하기 위한 방법을 생각해내는 그 역동적인 사고 과정이 즐거웠습니다.

3. 프로젝트 배포

AWS EC2 서비스를 통해 프로젝트를 배포하는 과정이 험난했습니다.

마지막 7일차에는 배포를 하면서 발생하는 에러들을 해결하면서 하루를 보냈던 것 같습니다.

무수히 쏟아지는 낯선 개념들 때문에 정신이 없었지만 프로젝트 배포를 성공적으로 마치면서 한층 더 성장했음을 몸소 느꼈습니다.

추후에 AWS 클라우드 관련 공부를 해봐야겠습니다.

✏️ What I Learned(a.k.a. 잘한 점)

1. 끊임없이 리팩토링 하자

자려고 누워서도 어떻게 하면 효율적인 코드를 작성할 수 있을지 고민했습니다.

프로젝트 중후반 단계를 지나면서 코드가 길어졌기 때문에 코드 흐름이 이해되지 않는 문제가 있었습니다.

나름 코드 정리를 했다고 생각했지만 코드는 점점 꼬이기 시작했고 이는 또 다른 에어로 이어졌습니다.

그렇게 프로젝트를 마무리 할 때 까지 중복되는 코드는 없는지 생략 가능한 변수는 없는지 고민하면서 불필요한 가지를 쳐내기 위해 노력했습니다.

코드와 로직을 심플하게 유지하면서 문제를 해결하는 습관을 길러야 겠다고 한 번 더 다짐했습니다.

2. 질문은 정확하게

소켓을 다뤄본 경험이 있는 주변 친구들 그리고 stackoverflow에 질문하면서 최대한 명확하게 문제를 겪고 있는 부분을 전달하려고 노력했습니다.

그 결과 생각했던 것 보다 빠른 시간 안에 문제를 해결할 수 있었습니다.

올바른 질문을 하는 법의 중요성을 다시금 몸소 느끼는 계기였습니다.

👷🏻‍♂️ 개선할 점

1. 서비스에 접속하지 않은 상태에서 누군가로부터 메시지를 받는 경우, 알림이 뜨지 않았습니다. 이 문제를 해결할 수 있는 방법을 계속해서 생각해봐야겠습니다.
2. 채팅방별로 불러와야 하는 메시지의 개수가 많아지면 성능적으로 문제가 생기기 마련입니다. Intersection Observer API를 활용해 채팅방 상단에 닿는 경우 추가로 메시지를 불러오는 기능을 추가해야 합니다. React Query?

👋🏻 마치며

개인적으로 이번 개인 프로젝트를 진행하면서 성장한 제 자신을 발견할 수 있었습니다.

24시간 고민하는 스스로의 모습을  되돌아보며 더욱 성장해야겠다는 생각이 들었습니다.

앞으로는 성능 개선에 대해 더 생각해봐야겠습니다.

궁금한 점은 그때 그때 바로 해소하고, 문제는 스스로 해결할 줄 아는 인재로 성장하겠습니다! 🔥