OWL

Project Stack

• React
• Node.js (Express)
• Socket.io
• Redux
• Redux-toolkit
• Styled-components
• Netlify
• Heroku

후기

‘Commeet’ 프로젝트를 진행하면서 ‘Firebase Realtime Database’를 사용하였고 ‘이것으로 채팅 기능도 구현할 수 있겠다’ 라는 생각을 하였다. 그래서 좀 더 알아보다가 WebSocket, Socket.io에 대해 공부하고, 이것을 이용하여 채팅 사이트 프로젝트를 진행하였다.

프로젝트는 생각 외로 순조롭게 진행되었고 아주 재미있었다. 하지만 닉네임, 채팅방 만들기, 채팅방 입장 기능을 완성 시키고 마지막 기능인 ‘채팅하기’ 에서 원하는 대로 작동하지 않아 3일 동안 고생을 하였다. 코드를 5번 정도 다시 짜보고 복기하고 일일이 로그도 찍어보았지만 도저히 원인을 몰랐다.

1. 내가 입력한 채팅이 나의 화면에서는 출력 되지만 상대방 화면에 출력 되지 않음
2. 입장 한 방이 다른 것이 원인이라 판단, 하지만 두 클라이언트가 각각 같은 방에 입장하는 것을 콘솔로 확인
3. 백엔드 코드가 잘못되었나 확인하기 위해 broadcast로 전체 방에 메세지를 뿌려봄 → 정상 작동
4. 혹시 채팅방마다 고유 아이디가 있어 그것을 이용해야 하나라는 생각으로 구글링 해보았지만 아닌 것으로 확인

 이때까지 프론트쪽 소켓을 컴포넌트마다 따로 선언하였다. 그러니 당연하게 렌더링 되면 모든 것들은 초기화되고 화면에 보여질 것이다. 아주 초보적인 실수였다. 컴포넌트마다 선언되어있던 소켓을 지우고 리덕스로 관리하는 코드로 수정하고 테스트를 해보았다.

정말 너무 속 시원하고 행복했다. 그 후론 역시 또 여자친구의 도움을 받아 디자인을 하고 프로젝트를 완성시킬 수 있었다.

이번 프로젝트로 배운 것이 많다. 그래서 정이 가고 추가하고 싶은 기능과 수정할 부분도 계속해서 보이는 것 같다. 추후에 계속 업데이트 해보아야겠다.

1. Socket.io 사용
2. 프론트엔드와 백엔드가 명확히 나눠져 있는 프로젝트, 연동 방법
3. Styled Components : css 를 사용하여 여러 줄의 CSS 코드를 조건부로 사용
4. Netlify (FE)와 Heroku (BE)를 사용하여 배포

아쉬운 점

• 처음 컨셉을 그대로 가져가지 못하고 변경함
  • 처음 컨셉은 로그인 시 자동으로 1:1 대화를 매칭 해주는 방식이었다. 하지만 구현하는 데 실패하였고 대신 채팅방을 만들고, 입장하는 방식으로 바꾸었다. socket.io를 처음 써보아서 무엇을 어떻게 해야할 지 몰랐던 것 같다.
  • 프로젝트가 끝나고 난 지금은 socket.io가 어떤 events와 methods를 제공해주는 지 조금은 알게 되어서 구현할 수 있을 것 같다.
• 버그?가 있음
  • 배포하고 난 후 알게 된 것이다. 내가 채팅을 입력하고 있다가 상대방이 채팅을 올리면 Input창이 다 비어져 버리는 현상이 있다.
  • 추 후 업데이트 할 것 이다.

깃허브 : https://github.com/bohongu/owl

GitHub - bohongu/owl

프로젝트 : https://taupe-pony-4b0c0b.netlify.app