[12-C] 겁나 빠른 슬랙 프로젝트 ⚡

프로젝트 소개 ⚡

• Slack web 버전의 워크스페이스, 실시간 채팅 등의 주요 기능 구현을 목표로 합니다.

데모 영상 ⚡

• https://youtu.be/hPPPUjM_cTE

배포 주소 (현재는 비용 문제로 서비스 중단)

• https://slack-clone.kro.kr
• api docs: https://api.slack-clone.kro.kr/docs

주요 기능

Tech Stack ⚡

Frontend	Backend	etc

기술 특장점 ⚡

❤️ 겁나 빠른 대응을 위한 Mongo DB 사용 ❤️

• 사용자의 채팅 메시지 조회와 채팅 입력에 빠르게 대응하기 위해 MongoDB를 사용하였습니다.
• ODM으로는 Mongoose를 사용해 모델 관리와 CRUD 그리고 개발의 편의를 도모했습니다.
• references 타입의 데이터를 활용하여 중복된 데이터를 업데이트 하는 과정을 최소화하였습니다.

💚 겁나 빠른 채팅을 위한 Socket 사용 💚

• 채팅, 리액션, 댓글 등 실시간으로 사용자에게 반영되어야 하는 기능들을 socket을 통해 구현했습니다.

💙 겁나 빠른 학습과 적용을 위한 Recoil 사용 💙

• React의 hook과 유사한 방식으로 동작하여 낮은 러닝커브를 갖기 때문에 빠르게 학습하고 서비스에 적용할 수 있었습니다.
• Recoil atom을 사용해 워크스페이스, 채널, 채팅 메시지 등의 data들을 global state로 관리합니다.
• Custom hook을 사용해 Recoil state를 비동기적으로 업데이트 할 수 있습니다.

💜 겁나 빠른 인수인계를 위한 Swagger API 명세 💜

• 사용되는 API들의 명세를 작성하여 Swagger 명세만 읽어도 협업, 유지 보수가 가능합니다.
• 별도의 문서 공유 없이 API서버에 Swagger를 배포하여 언제든 명세를 확인 할 수 있습니다.

💛 겁나 빠른 배포 환경 설정을 위한 Docker, Nginx 사용 💛

• Docker를 사용하여 배포 환경 설정이 순식간에 가능합니다.
• NGINX는 프론트서버, 백엔드 서버 각각 설정 파일 하나와 ssl 적용으로 웹서버 구축이 가능합니다.

🧡 겁나 빠른 초기 로딩을 위한 infinite scroll 구현 🧡

• 초기에는 메시지를 일부분만 가져오며 스크롤이 특정 위치에 도달하면 다른 메시지를 가져옵니다.
• 스크롤의 위치가 특정 위치에 도달했을 때 reflow를 방지하며 관찰하기 위해 intersection observer를 이용해 infinite scroll을 구현하였습니다.

설치 방법 ⚡

• 개발버전으로 실행시킬시 backend 디렉토리에는 .env.dev가 배포 버전의 경우 .env.prod가 필요합니다.

git pull https://github.com/boostcamp-2020/Project12-C-Slack-Web.git
cd Project12-C-Slack-Web/backend
sudo docker build -t backend .
sudo docker run -d -p 4000:4000 -p 5000:5000 backend
cd ../front && npm install
npm start

.env 파일 예시

PORT=
CHAT_PORT=
MONGOURI=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_CALLBACK_URL=
JWT_SECRET=
FRONTEND_HOST=
COOKIE_SECRET=
NODE_ENV=
ENCRYPTION_KEY=
S3_ENDPOINT=
S3_REGION=
S3_ACCESSKEY=
S3_SECRETKEY=
S3_BUCKETNAME=

Teammate 👨‍👩‍👦‍👦

김종원_J052	류찬규_J065	임채욱_J171
FE/BE 개발 (FE 지원)	FE/BE 개발 (FE 지원)	FE/BE 개발 (BE 지원)
- 항상 본질을 생각합니다. - 의견 충돌을 즐깁니다 ^-^ 🤦‍♂️	- 지속 성장 가능한 개발자 👨‍💻 - pro 어그로꾼 😎	- 딴길로 새는거 너무 재밌습니다. 🤣

👉 더 자세한 내용은 wiki를 확인해주세요