팀 협업 툴 - Black
🏠 HomePage
Black 프로젝트가 궁금하다면 홈페이지를 방문해주세요
📑 프로젝트 소개
팀 협업 메신저 Black은 Slack을 Clone한 프로젝트입니다. 또한 채널을 통한 메신저를 구축하면서 업무간 필요한 정보를 공유하는 웹 플랫폼입니다.
⚙️ 주요 기능
🔗 How to start
🤸♂️ 팀원 소개
| J003 강동훈 | J030 김도호 | J211 탁성건 |
|---|---|---|
 |
 |
 |
| 아.. 폰 보느라 코딩 못했다.. |
나는 개발자인 티를 내기 위해 노력했다 |
나는 내 위가 없기 때문에 밑만 바라본다 |
🛠️ 기술 스택
📌 기술 특장점
📃 Swagger Hub를 이용한 API 명세서 작성
Swagger Hub를 이용해 API 명세서를 작성함으로써 FE/BE 협업을 쉽게 할 수 있도록 했습니다. 실제 사용되는 Parameter로 테스트할 수 있고, 어떤 방식으로 데이터를 주고받을지 확인할 수 있어서 개발 시간을 단축하고 불필요한 의사소통 비용을 줄일 수 있었습니다.
🌈 CI/CD Pipeline
CI/CD Pipeline을 구축해서 배포를 자동화했습니다. develop branch에서 개발을 진행하고, 배포 버전을 master branch에 PR을 남긴 후 merge를 하면 GitHub WebHook이 발생하도록 했습니다. Jenkins가 이를 감지해서 새롭게 작성한 코드를 기존에 작성한 스크립트를 활용하여 자동화된 통합, 빌드 및 배포를 진행합니다.
이렇게 자동화된 지속적 통합, 지속적 배포를 통해 개발자는 편리한 개발 환경을 구축할 수 있습니다.
🌀 docker-compose를 활용한 무중단 배포 (blue/green)
docker-compose와 nginx를 이용하여 blue/green 배포 전략을 활용해 무중단 배포를 구현했습니다. nginx의 load balancing을 활용해 2개의 포트로 트래픽이 갈 수 있도록 설정합니다. 그리고 새롭게 배포되는 과정에서 docker-compose를 활용해 기존에 배포된 컨테이너와 다른 포트로 컨테이너를 생성하고 완료되면 기존의 컨테이너를 삭제합니다.
이를 통해 사용자는 새롭게 배포되는 과정에서 끊임 없는 서비스를 제공받을 수 있습니다.
📕 Atomic Design과 Storybook
슬랙을 구현함에 있어서 프로필 이미지나 메시지, 입력창 등 일관된 디자인의 컴포넌트들이 많다는 생각을 했습니다. 그래서 Atomic Design을 적용해 단계를 나눠 작은 컴포넌트를 만들고, 그것들을 결합해 조금 더 큰 단위의 뷰를 만들었습니다.
이를 통해 재사용 가능하고 일관된 디자인의 컴포넌트를 제작할 수 있었습니다. 또한 Storybook을 도입하여 디자인을 쉽게 수정하고 확인할 수 있도록 했습니다.
⚛️ Redux를 사용한 상태관리
슬랙은 다수의 사용자가 공동으로 한 채널에서 작업을 할 수 있다는 점에서 트랜잭션 상태 관리가 중요하다고 생각이 들었습니다. 그래서 컴포넌트 간 상태 관리 로직을 관리하고 사용자의 액션과 데이터의 변경을 전역으로 관찰할 수 있다는 점에서 Redux와 비동기적 작업을 처리하기 위한 Redux-Saga를 채택하였습니다.
📄 Message Paging
채널에 메시지가 늘어남에 따라 한 번에 여러 메시지를 받아오는 방식은 좋지 않다고 생각했습니다. 결국 Message Paging에 대해서 고려하게 되었고 offset과 limit을 두어 구현하게 되었습니다. offset으로는 가지고 있는 메시지의 가장 오래된 메시지 ID를 보내게 됩니다.
Client 측에서는 Infinite Scroll을 구현하여 첫 렌더링을 빠르게 하기 위한 노력을 했습니다. 일정한 스크롤의 위치를 넘게 되면 요청을 보내게 되어 다음 메시지를 계속적으로 받아오게 됩니다.
📘 프로젝트 전체에 TypeScript 도입
TypeScript는 에러를 사전에 방지하고, 코드 자동 완성 및 가이드 기능을 사용할 수 있다는 장점을 가지고 있습니다. 이러한 장점을 프로젝트에 적용하고자 프로젝트 시작 전 다 같이 강좌를 구매하여 학습하였고 FE, BE 프로젝트에 직접 기술적으로 도전하게 되었습니다.