preview
프로젝트 목표 설정
wanted_pre_onboarding 4번째 팀 과제는 messenger 기능을 구현하는 것이었다.
가장 유명한 메신저 어플인 카카오톡을 떠올려보자. 어플 사용자는 로그인 절차를 거쳐 자신을 인증한 후, 메시지를 보내 다른 사람들과 대화를 나눌 수 있다. 또한, 상대방의 메시지의 답장을 하거나 보낸 메시지를 삭제하는 기능도 떠올릴 수 있을 것이다.
이 밖에 다양한 기능이 더 많겠지만, 우리 팀은 간단한 로그인&아웃, 동적인 메시지 생성, 그리고 메시지 삭제와 답장 기능을 담은 메신저 구현을 프로젝트의 목표로 설정하였다.
사용 스택 & 개인적인 목표
이전의 프로젝트에서 우리 팀은 전역상태 관리를 Context API로 제한적 사용을 하였다. 하지만, 이번 프로젝트에서는 전역 상태관리 숙련도 향상을 하나의 목표로 설정하였다. 그래서 가장 인기있고, 유용한 Redux를 이용하여 필요한 부분에 있어 상태관리를 계획하였다. 하지만 기본 Redux만 이용하는 것은 boilerplate 발생을 유발하기 때문에 Redux-toolkit의 기능을 부분적으로 사용하기로 했다.
사실 개인적으로는 Redux-toolkit과 Jotai 등 전역 상태 툴을 사용하여 토이 프로젝트를 구현해본 적이 있어 Redux를 사용하여 상태관리를 하는 것이 오히려 속 시원했다. 불필요한 props drilling이 줄어들기 때문이다.
하지만, 팀 프로젝트인 만큼 내가 평소에 쓰는 기술을 잠시 집어넣고, 협업에서 합의된 기술 그리고 코드 컨벤션을 따르는 것을 개인적인 목표로 정하고 프로젝트에 임했다.
구현 사항
먼저, 우리가 구현하기로 정한 로그인, 삭제, 답장 등 각 기능을 분담하여 작업하였다.
나는 그 중 새로운 메시지를 동적으로 생성하는 newMessage컴포넌트를 담당하였다. 메신저 앱의 가장 기본적인 기능인 메시지 생성은 상태관리가 가장 빈번하게 이루어질 것 같아 redux 사용에 더 친숙해질 수 있을 것 같았기 때문이다. 그렇게 구현한 메시지 생성 기능은 아래와 같다.
- 로그인 기능 & 메시지 생성 기능
처음으로 페이지가 생성될 때, fetch API를 통해 불러온 데이터를 redux를 이용해 state에 저장한다. 그 state에는 userId, userName, date 등 다양한 정보가 담기며, map함수에 의해 일정한 형식으로 렌더링 시켰다.
동적으로 새로운 정보를 렌더링 시키기 위해 사용자가 input창에 입력한 정보를 미리 만들어둔 reducer와 action함수를 통해 새로운 state 정보로 업데이트 하였다.
⭐ 사용자로 부터 받은 정보를 조금 더 깔끔하게 state에 업데이트 하고싶었기 때문에 다음과 같은 class를 만들어 관리하였다.
const getDate = (date) => {
return date.toISOString().replace('T', ' ').substring(0, 19);
};
export class Message {
constructor(userName, newContent) {
this.userId = userName;
this.commentId = nanoid();
this.userName = userName;
this.profileImage = 'https://bit.ly/3GHB3BK';
this.content = newContent;
this.date = getDate(new Date());
}
}
class의 constructor를 통해 new Message(userName, newContent) 처럼 새로 발생하는 userName과 newContent만 인자로 넣어주면 되었기 때문에 더 깔끔한 기능 구현이 가능했다.
⭐ 유저의 편의성을 위해 다음과 같은 세부 기능도 추가하였다.
- 유저가 한 글자라도 타이핑 할 시, 보내기 버튼이 활성화 -> 시각적 표현
- Enter를 누르면 자동으로 메시지가 보내지며, shift+Enter 입력시 multi-line으로 작성 가능
⭐ 반대로, 데이터 관리측면에서 유저의 자유도를 제한 해야하기도 했다.
- 공백인 상태에서는 새로운 메세지 생성 불가
- 메시지의 앞뒤에 공백이 있을 시, 제거 후 저장
const trimedContent = newContent.trim().length;
'''
if (trimedContent === 0) {
return;
}
'''
const replacedContent = newContent.replace(/(^\s*)|(\s*$)/gi, '');
느낀점
이번 프로젝트에서 느낀 점은 크게 두 가지다.
첫째, 개인의 효율성과 생산성을 높인 것이다. 기능 구현에서 막히는 부분은 서칭을 통해 학습, 새로운 기술의 적용은 효율성과 생산성을 높여 목표 완수에 필요한 시간을 크게 단축시켰다.
둘째, 좋은 협업이 무엇인지 느꼈다. 최신 이슈를 공유하는 등 소통을 기본으로 하여 효율적인 업무 분담에 성공했다고 생각한다. 또, 혼자서는 해결하기 힘들었던 기능 및 오류를 팀원끼리 합심해 해결해나갔던 경험을 통해 팀플레이, 그리고 좋은 협업이란 무엇인지 느낄 수 있었다.
Github: https://github.com/Ubermensch0608/messenger
서비스 링크: https://console-lo9-messenger.herokuapp.com
