My 채팅앱 (...ing)

✔️ 웹소켓(socket.io)을 이용한 실시간 채팅 기능 구현 연습
✔️ node.js 서버(Express), React 클라이언트 구현 연습 → JavaScript 로 풀스택 구현

🛠️ 기술 스택

• Front : React / Axios / WebSocket(socket.io-client)
• Back : Node.js(Express) / WebSocket(socket.io) / MongoDB

⚙️ 주요 기능

• Home 화면 :
  • 로그인/로그아웃(JWT), 회원 등록(Bcrypt),
  • 로그인 상태에 따른 아이콘 표시, 사용자 토글 메뉴(마이페이지, 로그아웃)
• Users 화면 : 실시간 온라인 유저 리스트
• Rooms 화면 : 실시간 전체 채팅방, 소속된 채팅방 리스트, 새 메시지 개수 알림
• 채팅방 :
  • 입퇴장 알림, 다자간 실시간 채팅, 날짜별 인덱싱, 마지막으로 읽은 메시지 이어서 확인하기(수정중)
  • 방 정보 확인(개설일, 오너, 멤버), 오너 변경
  • 돌아가기, 퇴장하기
• 마이페이지 :
  • 수정 : 이름, 상태 메시지
  • 설정 : 비밀번호 변경, 계정 삭제, 알림 설정(준비중)

<주요 화면 보기> → 🔍

📅 개발 기간

• 핵심 개발 : 2024.01.11 ~ 2024.02.23 (약 6주)

💝 프로젝트 의의

• 요청과 응답이 1:1 단방향으로 이뤄지는 서비스가 아닌, 실시간 양방향 로직 구현 경험
• Node.js 를 이용한 HTTP + 웹소켓 혼합 서버 구현 경험
• 단순 기능 구현을 넘어 인증과 보안을 의식한 구현 방법 학습
• React 커스텀 Hook 및 ContextProvider를 적극 사용해 반복된 로직을 줄이고 최대한 효율적인 Component 구조를 설계하고자 노력함

📝 프로젝트 상세 보기

• 더욱 상세하고 최신의 📁프로젝트 정보 및 📌개발 문서를 링크에서 확인할 수 있습니다.