📖 소개

• 수학과외를 진행하던 중 과외시간이 아닐 때 문제를 풀어드리거나 개념에 대해 설명해야 되는 일이 잦았습니다. 그럴 때마다 아이패드의 굿노트와 디스코드의 화면 공유를 사용했지만 서로 같은 곳에서 풀이를 공유할 수 없음에 불편함을 느끼게 되어 실시간으로 움직임이 공유될 수 있는 그림판 같은 웹을 React, Canvas 와 NodeJS, Websocket 기반으로 개발하여 배포했습니다.

🌎 주소

websocketChat

💻 주요기능

• 새로고침 하지 않아도 방 목록이 업데이트 됩니다. (GIF 첨부)
• 같은 방에 입장된 클라이언트들은 그리기, 지우기, 첨부한 이미지 공유하기, 이미지 위치 옮기기 등의 기능을 공유합니다. (GIF 첨부)

🔍 Meaning

• React 에서 복잡한 기능들을 구현하고 리팩토링 하는 과정을 통해 React 에 대해 깊게 고찰할 수 있었습니다.
• Node.js Express 환경에서 웹소켓을 통한 실시간 양방향 소통을 구현할 수 있게 되었습니다.
• Socket.io 의 room space 를 사용하여 특정 클라이언트들만 세분하여 관리하는 방법을 알게 되었습니다.
• Koyeb 을 통해 서버를 배포하고 지속적으로 관리 하는 방법을 학습했습니다.