[TIL] 코드스테이츠 chatterbox (client) 과제 (ongoing)

 

코드스테이츠를 시작하고 이제 두 달이 지났다. 처음 한달은 Pre-course였고, 두 번째 달 부터는 Immersive course에 참여하고 있다. Immersive Course에서의 첫 한달은 Pre에서는 다루지 않았던 더욱 다양한 내용들을 다루고 있는데, 이번에 처음으로 서버와 통신을 하는 과제를 만들게 되었다. 

 

아직 Client 쪽에서의 요청을 연습하고 있는 중이어서, 서버는 직접 구축한 것이 아닌 AWS에 미리 구축되어 있는 코드스테이츠의 서버를 사용하였다. 이번 채팅앱에서 구현한 기능들은 아래와 같다:

 

- 메시지 작성 및 POST 요청

- GET 요청 후 화면 렌더링

- 채팅방 입장 및 입장한 채팅방에 맞는 채팅 렌더링

- 새로운 채팅방 만들기

- 채팅창 지우기 (Clear Messages 버튼: 서버에서 지워지진 않고 채팅창에서만 사라진다)

 

 

 

chatterbox 구현 영상

 

 

 

채팅창 목록은 현재 서버에 있는 채팅 메시지 데이터들의 채팅방 이름을 기준으로 메뉴가 토글될 때 만들어지도록 했다. 새로운 채팅방을 만들고 난 다음에도, app의 프로퍼티인 저장한 currentRoom과 배열인 chatRoomList가 업데이트되면서 채팅방 목록이 바뀌게 된다.

 

아직 여전히 진행 중이여서, 추가하고 싶은 몇가지 기능들을 넣지 못했다. 아래 기능들은 추가로 작업할 예정이다:

- 채팅창 스크롤바 bottom에 고정하기

- 메뉴창 토글 에니메이션

- 채팅방 개수 제한

- 서버에 새로운 메시지 등록 시 새로고침 없이 자동으로 받아오기

 

 

Singleton 패턴이라는 방식을 처음 배웠고, 이걸로 작업을 해본 것도 처음이었다. 서버와 무언가 왔다갔다 한다는 것도 너무 신기해서 코딩하다가 중간에 너무 신나버렸고, 그 결과로 별 생각 없이 여러 기능들이 들어간 함수들을 만들어버렸다. 그래서 나중에 다시 리팩토링하는데 많은 시간을 들일 수 밖에 없었다 ㅜㅜ... 역시 모든 작업은 시작하기 전에 계획을 세우고 하는 것이 불필요한 곳에 시간을 낭비하지 않는 최선의 방안인 것 같다.