> README.md 작성을 위한 사전 템플릿 정의, 내용 채워넣기 리마인드 폴더 - [x] 폴더명 네이밍 (`_`) - [ ] db계정: 프로젝트용 따로 팠는지? - [x] 폴더 이동: api-gateway, service discovery - [x] root쪽으로 빼놓기: db schema, error code 코드 - [ ] 정말 필요한 로그만 적기 - [ ] main(booup)시작 점은 코드가 짧아야 됨 깃브랜치 - [ ] 미사용 브랜치 제거 --- # Playground (프로젝트 소개, 개요) (팀원 소개, 개발 파트, 소스 위치) ## 디렉토리 구조 ‼필요 없는 디렉토리 삭제‼ ``` . ㄴ bin ㄴ config ㄴ data ㄴ deploy ㄴ docs ㄴ resources ㄴ scripts ㄴ src ㄴ config (필요 없으면 삭제) ㄴ frontend ㄴ ios ㄴ library (필요 없으면 삭제) ㄴ server ``` # 실행화면 ## 클라이언트 (iOS) | 메인페이지 | 비디오 플레이어 | 친구와 영상 같이 시청하기 | |-------|-------|-------| |  |  |  | | 실시간 스트리밍 생성 | 실시간 스트리밍 시청 | 실시간 채팅 | 상단 고정 채팅 | |-------|-------|-------|-------| |  |  |  |  | | 회원가입 | 마이페이지 | |-------|-------| |  |  | ## 클라이언트 (frontend) | 로그인 | |------| || | 메인페이지 / 비디오 재생 | |------| || | 반응형 메인 레이아웃 | |------| || | 회원가입 페이지 | 마이페이지 | |------|------| ||| | 실시간 스트리밍 생성 | 실시간 스트리밍 시청 | |------|-------| ||| | 친구와 함께 시청 | |------| || # 기술 스택 ## 클라이언트 (iOS) <img src="https://img.shields.io/badge/-Swift-F05138?&logo=Swift&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-UIkit-2396F3?style=for-the-badge"> <img src="https://img.shields.io/badge/-UIStoryboard-F8CF55?style=for-the-badge"> <img src="https://img.shields.io/badge/-WebRTC-333333?&logo=WebRTC&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-mediasoup ios client-20A6D1?style=for-the-badge"> <img src="https://img.shields.io/badge/-StompClientLib-000000?style=for-the-badge"> <img src="https://img.shields.io/badge/-StarScream-FFE200?style=for-the-badge"> <img src="https://img.shields.io/badge/-Combine-F05138?style=for-the-badge"> ## 클라이언트 (frontend) <img src="https://img.shields.io/badge/-Javascript-F7DF1E?&logo=JavaScript&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-React-61DAFB?&logo=React&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Context API-61DAFB?&logo=React&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-prop types-61DAFB?&logo=React&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Axios-5A29E4?style=for-the-badge"> <img src="https://img.shields.io/badge/-React Qeuery-FF4154?&logo=React Query&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-React Router-CA4245?&logo=ReactRouter&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-styled component-DB7093?&logo=styled-components&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-protoo client-B74244?style=for-the-badge"> <img src="https://img.shields.io/badge/-Stomp-000000?style=for-the-badge"> <img src="https://img.shields.io/badge/-SockJS Client-000000?style=for-the-badge"> <img src="https://img.shields.io/badge/-mediasoup client-20A6D1?style=for-the-badge"> <img src="https://img.shields.io/badge/-Webpack-8DD6F9?&logo=Webpack&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Babel-F9DC3E?&logo=Babel&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Prettier-F7B93E?&logo=Prettier&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-ESLint-4B32C3?&logo=ESLint&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Storybook-FF4785?&logo=Storybook&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-GitHub Actions-2088FF?&logo=GitHub Actions&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Chromatic-FC521F?style=for-the-badge"> ## 디자인 <img src="https://img.shields.io/badge/-Figma-F24E1E?&logo=Figma&logoColor=white&style=for-the-badge"> ## 서버 (api) <img src="https://img.shields.io/badge/-Srping Boot-6db33f?&logo=Spring Boot&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Spring Security-6DB33F?&logo=SpringSecurity&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Node.js-339933?&logo=Node.js&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Mediasoup-64BAFF?&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-WebSocket-FECC00?&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-SockJS-010101?&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Stomp-010101?&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-MariaDB-003545?&logo=MariaDB&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Redis-DF0000?&logo=Redis&Color=white&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Amazon S3-569A31?&logo=AmazonS3&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-Amazon EC2-FF9900?&logoColor=white&style=for-the-badge"> <img src="https://img.shields.io/badge/-FFmpeg-007808?&logo=FFmpeg&logoColor=white&style=for-the-badge"> ## 서버 (infra) * spring cloud gateway * Eureka service discovery # 아키텍처  # ERD  # 프로젝트 실행 ## 클라이언트 (iOS) ## 클라이언트 (frontend) 1. `src/frontend` 폴더에서 `npm install` 실행 2. `src/frontend` 폴더에서 `.env` 파일 생성 후 아래 내용 복사 후 붙여넣기 ``` REACT_APP_API = https://dev.streaminggate.shop REACT_APP_LIVE_SOCKET = wss://streaminggate.shop:4443 REACT_APP_USER_STATUS_API = http://3.37.201.189:9999 REACT_APP_USER_STATUS_SOCKET = http://3.37.201.189:9999/ws REACT_APP_CHAT_API = http://3.38.16.211:8888 REACT_APP_CHAT_SOCKET = http://3.38.16.211:8888/ws REACT_APP_UPLOAD_SERVICE = http://3.39.44.188:50006 REACT_APP_PROFILE_IMAGE = https://sgs-playground.s3.us-east-2.amazonaws.com/profiles/ ``` 3. `npm run start`로 실행 ## 서버 (docker-compose 사용) **docker-compose 로 서버 실행** ``` $ cd config $ docker-compose up -d ``` ❗ window라면 ffmpeg 설치후 코드 수정필요 - ffmpeg 다운로드: https://ffmpeg.org/download.html - `src/server/upload-service/src/main/resources/application.yml` 수정: `ffmpeg:path`, `ffprobbe:path` 값을 다운로드 받은 실행 파일 위치로 수정
리마인드
폴더
_)코드
깃브랜치
Playground
(프로젝트 소개, 개요)
(팀원 소개, 개발 파트, 소스 위치)
디렉토리 구조 ‼필요 없는 디렉토리 삭제‼
실행화면
클라이언트 (iOS)
클라이언트 (frontend)
기술 스택
클라이언트 (iOS)
클라이언트 (frontend)
디자인
서버 (api)
서버 (infra)
아키텍처
ERD
프로젝트 실행
클라이언트 (iOS)
클라이언트 (frontend)
src/frontend폴더에서npm install실행src/frontend폴더에서.env파일 생성 후 아래 내용 복사 후 붙여넣기npm run start로 실행서버 (docker-compose 사용)
docker-compose 로 서버 실행
❗ window라면 ffmpeg 설치후 코드 수정필요
src/server/upload-service/src/main/resources/application.yml수정:ffmpeg:path,ffprobbe:path값을 다운로드 받은 실행 파일 위치로 수정