저번주 금요일을 끝으로 4주간의 기업협업이 끝이났다-!
4주동안 회사에서 실시간 채팅 웹 만들어보는 과제를 맡았는데, 프로젝트를 진행하면서 느끼고 배운 것들, 그리고 실제 현업에서 업무가 진행되는 과정들을 옆에서 지켜보며 배웠던 것들 다 휘발되지 않고자 적어두고자 한다-!
✔️ 실시간 채팅 웹 프로젝트 웹사이트 촬영 링크 : https://youtu.be/ukvtVIlBqeo
✔️ 실시간 채팅 웹 프로젝트 github repository :
https://github.com/hyodduru/NPTN-Channel-Web
🗓 프로젝트 소개
- 프로젝트 진행 기간 : 4월 30일 ~ 5월 24일
- 프로젝트 주제 : firebase와 getstream api, React JS를 활용한 실시간 채팅 웹 만들기
- 구성 : Front-end 2명(나, 근휘님)
메인 서비스
- 실시간 채팅 (일대일 및 그룹 채팅)
- 친구 추가 및 단톡방 생성 및 삭제
- 채팅을 위한 프로필 관리 기능
🧚♀️ 프로젝트 시작 때 우리의 목표 (구현사항)
- firebase auth를 활용한 구글 소셜 로그인 기능 구현 ✔️
- 채팅방 리스트 조회 및 검색 기능 ✔️
- 채팅방 만들기 기능 ✔️
- 채팅방에서 채팅 기능 구현 ✔️
- 연락처 조회 및 검색 기능✔️
- 연락처 친구 추가 기능 ✔️
- 프로필 조회 기능 ✔️
- 프로필 사진 및 개인 정보 수정 기능 ✔️
- Firebase Firestore User Document 생성 및 데이터 통신 기능 ✔️
- 채팅방 삭제 기능 (추가기능) ✔️
- 연락처 프로필에 chat 버튼 클릭 시 1대1 채팅방 생성 (추가기능) ✔️
결론부터 말하자면 구현하려고 했던 것을 다 했다 👏👏👏
tmi이지만 대부분의 기능 구현은 다 마지막에 호다닥 이루어졌다는 사실,, ㅎㅎ (새로운 기술 익히고 감잡는데에 거의 2-3주를 쓴 것 같다. 이에 대한 자세한 이야기는 아래쪽에서 말해보겠음)
🤖 실제로 구현한 사항과 사용한 기술
1. firebase auth를 활용한 구글 소셜 로그인/로그아웃 기능 구현
- firebase와 연동하여 구글 소셜 로그인 구현.
- firebase/auth 내에 내장되어있는 GoogleAuthProvider, signInWithPopup 활용
- firebase setting 초기화 부분 firebase.js 내에서 따로 관리
2. 채팅방 리스트 조회 및 검색 기능
- getStream API에서 제공하는 Team collaboration을 참고하여 구현함
- channelSearch에 아이디를 검색하면 list가 뜨고 선택했을 시 chat창을 띄워줌
3. 채팅방 만들기 기능
- getstream api에서 제공하는 ChannelContainer 및 Channel Component 활용
- 채팅방 리스트에서 채팅방 클릭시 해당하는 채팅방 보여줌
4. 채팅방에서 채팅 기능 구현
- user의 Id와 token을 가지고 채팅할 수 있는 권한을 갖는 user instance를 만들어주는 connectUser을 활용함. (getstream api 자체 제공)
5. 연락처 조회 및 검색 기능
- getstream api 내의 queryUsers와 사용자의 id값을 활용하여 연락처 리스트를 가져옴.
- useState hook을 활용하여 해당 리스트를 state에 저장 및 렌더링.
- 불필요하게 매번 글자를 입력할 때마다 정보를 요청하지 않도록 debounce 기능 추가
6. 연락처 친구 추가 기능
- 추가하고 싶은 user의 아이디 input에 입력 시 firestore에 해당 정보 (onChange event, useState hook 활용)
- firestore내에 저장된 정보들을 불러와 해당하는 아이디 값을 활용하여 getstream api에 해당 아이디 값에 해당하는 유저 목록들을 받아옴.
- user id가 getstream에 존재하지 않을 시 alert 창으로 알림, 존재하여 추가가 되었을 시 성공 메세지 알림
7. 프로필 조회 기능
- google social login시 해당하는 user의 Id값과 이름을 firestore base에 전송함. 전송된 data를 프로필을 조회할 때 불러옴.
8. 프로필 사진 및 개인 정보 수정 기능
- 프로필 수정 모달창에서 수정된 유저정보 저장시 firestore database로 해당 정보 전송
- react-images-uploading library 활용하여 프로필 및 배경화면 수정 기능 구현 - firestore database로 해당 정보 전송
9. Firebase Firestore User Document 생성 및 데이터 통신 기능
- users 라는 collection 내에 user id 값을 가진 document들로 데이터베이스 관리
10. 채팅방 삭제 기능 (추가기능)
- Chatlist hover시 삭제 버튼 생성
- 삭제 버튼 클릭시 채널 리스트에서 삭제 기능 구현 (onClick event 및 getStream api의 delete method 활용)
11. 연락처 프로필에 chat 버튼 클릭 시 1대1 채팅방 생성 (추가기능)
- getstream api에서 제공하는 Chat, Channel, ChannelInput, MessageList, MessageInput 컴포넌트 활용
- channel.watch() 활용하여 클릭한 user와 나의 채팅방 생성
- onclick event 활용
😎 내가 맡아서 한 부분(!)
나는 firebase auth를 활용한 구글 소셜 로그인, redux 전역변수 관리, firestore database와 getstream api의 연동 등의 통신부분을 주로 담당해서 했다. 또한 contacts 레이아웃 및 연락처 친구추가 기능 구현, 사용자의 profile 레이아웃 및 조회 및 수정 및 데이터 전송 등의 기능 구현을 했다.
👉 firebase 구글 소셜로그인 포스팅
👉 Redux로 전역 변수 관리 포스팅
그런데 사실 이번 프로젝트에서는 거의 근휘님과 내가 맞닥뜨리게 되는 여러문제를 함께 해결한 게 대부분이었어서 모든 걸 다 함께 만들었다고 봐도 무방할 것 같다.
그만큼 해왔던 프로젝트들 중 가장 많은 소통을 했던 프로젝트이다.
👏 함께 하나의 문제를 해결해나가는 짝프로그래밍 (Pair Programming)
이번 프로젝트는 유독 모르는 것들 투성이었다.
그래서 해결해야하는 문제들을 분업해서 하기보다는 근휘님과 함께 상의하면서 해결하는 업무 방식을 택했다. 우선 우리 둘 다 firebase와 getstream api를 처음 접해보는 입장이라 서로가 이해한 게 맞는 것인지 계속해서 확인 해야했고, 작은 기능을 추가하는 데에도 어떻게 접근을 해야할 지 초반에 감이 안잡혀서 계속 함께 해결을 하려고 했다. 실제로 두 명이서 하나의 짝이 되어서 프로그래밍을 하는 것을 "짝 프로그래밍"이라고 한다고 한다. 각자 분업해서 문제를 해결하는 것도 좋지만, 어려운 문제를 함께 어떤 식으로 해결해볼지 이야기해보면서 조금씩 풀어나가는 과정이 훨씬 효율적임을 느꼈다.
📖 새로운 기술을 배울 땐 공식문서가 답이다!
유독 시행착오가 많았던 이번 프로젝트 ^^..
그동안 새로운 기술들을 배울 때면 최대한 빠르게 배우고 싶어서 인터넷 강의를 듣는다거나 기술블로그 글을 빠르게 훑어보고 바로 코드에 적용하는 식으로 공부를 하곤 했다. 공식문서를 참고하기도 했지만, 그 외의 다른 외부 소스들도 굉장히 많이 활용했었다.
그런데 이번에는 생각보다 getstream api 정보가 없어서 (아니 그냥 아예 없었음...) 그리고 firebase 정보도 그리 많지 않아서 참고할 수 있는 것은 공식문서뿐이었다.
처음에는 차근차근 공식문서를 읽어나가는 것 자체가 어색하게 느껴져서 괜히 어렵게 느껴졌는데, 사실 생각보다 공식문서가 잘 되있어서 내가 필요한 추가하고 싶은 기능 카테고리 부분을 참고해서 거기서 하라는 대로만 하면,, 아주 쉽게 할 수 있는 것이었다,,
그동안 읽는 거 기피해온 나 반성해,,, ^^
새로운 언어를 습득하기 위해서 공식 문서를 읽고 이를 내가 필요한 부분에 알맞게 활용할 줄 아는 게 정말 중요함을 느꼈고, 처음이라 조금 어려웠지만, 다음에 새로운 기술을 배울 때는 조금 더 쉽고 빠르게 익힐 수 있을 것 같은 자신감이 든다!
번외) getstream api 직원에게 직접 질문해보기
getstream api 직원분들 짱 친절해..👍 답 엄청 빨리 엄청 친절하게 알려주신다. 최고......최고👍 👍 👍
💻 agile한 방식의 회의 진행
내가 일했던 곳의 회사에서는 매일 짧고 굵게 스탠드업 미팅이 있었고, 2주일에 한번씩 회고 미팅이 있었다.
근휘님과 나도 매번 회의에 참여해서 간단하게 우리의 현재 진행사항, blocker 등에 대해 공유하는 방식을 가졌다.
회사에서는 Jira-software를 사용하여 진행을 했고, 우리 또한 이를 활용했다. trello와 비슷한데 내가 느끼기에는 Jira가 훨씬 가독성이 좋고 정돈된 느낌을 받았다.
기능별 개발 문서에는 따로 기능별로 구현한 기술들에 대한 자세한 내용들을 기록했다.
🧚🏻 그동안 배웠던 것들, 그리고 느낀 점
먼저 이건,, 진짜 왕감동받음.
한달 내내 나와 함께 프로젝트를 했던 근휘님께서 나의 장점이라고 생각된 부분들을 정리해서 보내주셨다... 🥺 나울어... 짱감동....
근휘님과 함께 한 것은 정말 행운이었다...⭐️ 근휘님께서 프로젝트 중 내게 정말 자주 해주셨던 말 중 하나가
"효정님 하고싶은대로 다 해봐요"였다. 내가 새로운 방식으로 문제를 접근하려고 하거나 새로운 기술을 추가하고 싶거나 할 때 근휘님은 항상 "효정님이라면 할 수 있어요" 라는 말을 늘 습관처럼 해주셨다. 그 말 덕에 더 자신감얻고 어려운 문제에 맞닥뜨려도 꼭 해결해낼 것만 같은 느낌을 받을 수 있었다. 이 자리를 빌어 근휘님께 정말 감사드린다(?) 소통을 편하게 할 수 있었던 것도 근휘님이 편하게 잘 해주신 덕이 큰 것 같다. 사소한 문제라도 다 공유하며 함께 해결해보려고 했고 끝까지 포기하지 않고 열심히 했다. 근휘님이 열심히 하시는 보면서 더 자극 받았던 것도 크다.
그리고! 스타트업에서 짧은 기간 이었지만 그래도, 배우고 간 게 참 많다고 느낀다. 총 3명의 개발자 분이 계셨는데, 업무를 진행하면서 바로 바로 서로에게 피드백을 주는 모습이 인상적이었다. 계속해서 문제가 생길 때 소통하고, 사소한 문제라도 서로 공유하며 바로 해결하는 모습을 보며 효율적인 업무처리를 위해서 가장 중요한 것 중 하나는 소통이 아닐까 싶은 생각을 했다.
그리고 나랑 근휘님이 계속 프로젝트 하고 있을 때마다 찾아오셔서 "어려운 거 있으면 물어보셔도 된다. 편하게 물어보셨으면 좋겠다"이런 말도 항상 해주시고, 코드 리뷰도 해주시고, 책도 추천해주시고, 등 등 여러모로 잘 챙겨주셔서 정말 감사한 점이 많다. ✨
나도 몇 년 뒤 더 성장해서 이런 저런 진심어린 조언도 해줄 수 있고 함께 해줄 수 있는 그런 개발자가 되길,,, ✨!!!!
