💁‍♀️ 서비스 소개

• 42에서 공부하고 있는 전세계 학생들이 채팅, 영상통화, 커뮤니티를 통해 서로의 언어를 교환하며 소통할 수 있는 플랫폼입니다.
• 42 글로벌 슬랙 채널에서 언어교환에 대한 수요를 발견하였고, 프로그래밍이라는 공통 관심사를 가진 사람들끼리 언어를 교환할 수 있는 서비스를 만들기 위해 개발하게 되었습니다.
• https://42walkie-talkie.me/

👥 구성원

• 프론트엔드 2명, 백엔드 1명

🌱 주도적으로 구현한 기능 (프론트엔드)

• TypeScript 사용으로 안전한 어플리케이션 설계
  • TypeScript를 사용하여 컴파일 타임에 오류를 감지하고 런타임 에러를 방지함으로써 더욱 안전하고 신뢰성 있는 어플리케이션을 설계하였습니다.
• Recoil을 통한 전역 상태 관리
  • Recoil을 이용해 유저 정보와 채팅 상태를 전역적으로 관리함으로써 상태 관리를 효율적으로 수행하고, 복잡한 상태 관리를 간소화하였습니다.
• React-query를 활용한 데이터 페칭 및 캐싱
  • React-query를 사용하여 서버로부터 데이터를 효율적으로 페칭하고 캐싱하며, 데이터가 변경될 때마다 자동으로 업데이트되도록 구현하여 사용자 경험을 향상시켰습니다.
• Modal Component 리팩토링
  • 재사용 가능한 Modal Component를 만들기 위해 로직과 뷰를 분리하여 추상화하고 리팩토링하여, 다양한 상황에서 모달을 일관되게 사용할 수 있도록 하였습니다.
• Socket.IO를 이용한 실시간 채팅 기능
  • Socket.IO를 통해 텍스트 및 이미지 메시지를 실시간으로 전송하고 렌더링하며, 사용자 간의 원활한 커뮤니케이션을 지원했습니다.
• 새 메시지 및 읽지 않은 메시지 알림 기능 구현
  • 새 메시지와 아직 읽지 않은 메시지를 사용자에게 알리는 기능을 구현하여, 사용자가 중요한 메시지를 놓치지 않도록 했습니다.
• 게시글 및 댓글 CRUD 기능 구현
  • 사용자들이 게시글과 댓글을 작성, 조회, 수정, 삭제할 수 있는 기능을 구현하여 플랫폼 내에서 활발한 상호작용이 이루어지도록 했습니다.

🖥️ 실행 화면

1️⃣ 메인 페이지