항해하우스 (Front-end) // Back-end : 깃허브

🖥 프로젝트 소개

• 주제 : 관심사가 같은 인원이 모여서 채팅이 가능한 채팅방

📆 기간

• 2021년 4월 12일 ~ 2021년 4월 22일

👍 팀원

• 김병훈(Front-end)
• 임다빈(Front-end)
• 강상구(Back-end)
• 김준엽(Back-end)
• 홍종완(Back-end)

🔧 구현 기능 및 협업 툴(Front-end)

• sockjs-client, stompjs를 이용한 실시간 소켓통신
• Redux toolkit을 이용하여 상태관리

[유저 프로필 페이지]

• 프로필 이미지 수정 구현
• 닉네임 공백, 관심사 1개 이상 선택 안 할 경우 알람창
• 중복된 관심사 선택 불가능
• 저장 시 완료 된 프로필을 리덕스 상태 저장

[회원가입/로그인 페이지]

• 로그인, 회원가입 기능
  - 상태관리를 활용한 실시간 유효성 체크 (중복체크는 서버)
  - 리덕스 상태를 활용하여 한 페이지 내에서 로그인,회원가입 컴포넌트 교체
  - 로그인 시 서버로부터 받은 토큰을 쿠키에 저장
  

[메인 페이지(채팅방)]

• 채팅방 조회
  • 채팅방 제목을 클릭하면 채팅방으로 입장
  • 모든 채팅방, 내 관심사와 일치하는 채팅방(추천), 관심사별 채팅방

• 채팅방 만들기
  • 우측 하단의 + Start a room 플로팅버튼을 클릭하면 모달 활성화
  • 채팅방 제목과 관심사를 하나 설정하여 생성

• 채팅
  - 채팅방 입장 또는 퇴장시 해당 유저의 입장 또는 퇴장 알림
  - 채팅방 입장시 해당 채팅방의 이전 메세지 기록 (알림 제외) 렌더링
  - type을 통해 알림과 채팅을 구분하여 렌더링
  - 웹소켓을 이용한 양방향 통신 활용
  - 입장 시 소켓 연결 및 구독, 퇴장 (다른페이지 이동) 또는 로그아웃 시 연결 및 구독 해제
  

---

협업 툴

• Github, Slack, Gather

🎞 소개영상

유튜브 링크

느낀점

이번에는 별로 역할이 없어서 너무 아쉬웠다. 하지만 맡은 역할이라도 열심히 하였다. 채팅창 부분을 맡진 않았지만 채팅창 코딩한 파일을 훑어봤을 때 많은 고생을 하신 게 보였다. 실시간 소켓통신이란 게 지금까지 했던 코딩과는 많이 다른 느낌처럼 느껴졌다.. 이번 미니프로젝트를 마치면서 한 걸음 더 코딩 심화를 경험하고 싶다는 생각이 들었다.