Chat Chat

• react와 socket으로 만든 채팅 프로그램

개발 환경

Front

Back

개발 포인트

1. 성능 최적화 고민

useCallback, useMemo 등으로 효율화할 수 있는 상황인지 고려

2. 편리한 UI, UX에 대한 고찰

• Enter 입력 시 버튼 동작
• 메시지 전송 시간 보여주기
• 채팅 참여자 목록을 모달창으로
• 본인은 따로 표기
• 개인 DM <-> 전체 메시지 전환 가능
• 개인 DM과 전체 메시지를 구분하여 스타일링
• 메시지 창에 여러줄 입력 시 자동으로 길이 조절

3. 예외처리

• 닉네임 중복 입력 시 안내 문구
• 입력값 없이 메시지 전송 불가

화면 구성

메인

• 닉네임 입력하여 채팅 입장

채팅

• DM, 길게 메시지 보내기, 전체에게 보내기 등 채팅

시연

회고록 ✍️

회고록 바로가기