Advanced Slack Clone: Video Calling and Realtime Messages with React & Node.js
- 이 강좌에서는 React 및 Node.js를 사용하여 완전한 기능을 갖춘 Slack 클론을 구축하고 배포합니다. 🚀
- 채널 생성, 실시간 메시지 전송, 반응 추가, 스레드 답글, 메시지 고정, 사용자 초대, 파일 공유 등의 다양한 기능이 포함됩니다. 💬
- 질문과 여러 옵션으로 구성된 투표를 생성하고, 익명 투표, 복수 응답 허용, 옵션 제안 및 댓글 추가 등의 설정을 할 수 있습니다. 🗳️
- 팀 내 사용자들과의 다이렉트 메시지 기능도 제공합니다. ✉️
- 실시간 화상 통화 기능을 통해 카메라를 켜고, 실시간 반응을 추가하고, 화면을 공유하거나 통화 녹음도 가능합니다. 📹
- 이 강좌는 프로젝트 구축뿐만 아니라 강력한 인증 시스템 구축, 고급 실시간 채팅 앱 개발, API 구축 및 배포, 백그라운드 작업 실행, 프로덕션 수준의 오류 모니터링 시스템 구현 등 실제 구현 사례를 가르칩니다. 🛠️
- 실제 Git 워크플로우를 따라 커밋, 브랜치, 풀 리퀘스트 생성 과정을 보여줍니다. 🌳
- 프론트엔드는 React, Tailwind CSS, TanStack Query를 사용하고, 서버는 NodeJS, Express, MongoDB를 사용합니다. 💻
- 인증에는 Clerk, 실시간 메시지 및 화상 통화에는 Stream, 백그라운드 작업에는 Ingest, 오류 모니터링에는 Sentry, 코드 제안에는 CodeRabbit을 사용합니다. 🔑
- 모든 도구는 무료로 시작할 수 있습니다. 💰
- 프로젝트 소스 코드는 무료로 제공되며, 자유롭게 사용할 수 있습니다. 🎁
- Udemy 프리미엄 강좌에서는 React, Next.js, Python, Go 등 다양한 프로젝트를 120시간 이상 다룹니다. 📚
- Node.js 설치가 필요하며, LTS 버전을 선택하여 설치합니다. ✅
- 백엔드와 프론트엔드 폴더를 생성하여 프로젝트를 구성합니다. 📁
- Express를 사용하여 API를 구축하고, dotenv, Mongoose, CORS 등의 패키지를 설치합니다. 📦
- import/export 구문을 사용하기 위해 package.json에 "type": "module"을 추가합니다. ⚙️
- nodemon을 사용하여 파일 변경 시 서버가 자동으로 재시작되도록 설정합니다. 🔄
- 프론트엔드 React 애플리케이션을 생성하고 실행합니다. 🌐
- 소스 코드를
src
폴더에 넣어 관리합니다. 📂
.env
파일을 생성하여 환경 변수를 관리하고, config/env.js
파일을 통해 환경 변수를 중앙 집중식으로 관리합니다. ⚙️
NODE_ENV
환경 변수를 설정하여 개발 환경과 프로덕션 환경을 구분합니다. 🌍