---
# System prepended metadata

title: 데일리 스크럼

---





<center><img src="https://i.imgur.com/wf2hHlL.png"></center>
<br>
<center>
<p align="center">
          <img src="https://img.shields.io/badge/github-GIVEME--STAR-red">
        <a href="https://github.com/connect-foundation/2019-19/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc">
        <img src="https://img.shields.io/github/issues/connect-foundation/2019-19"/>
        </a>
        <a href="https://github.com/connect-foundation/2019-19/wiki">
        <img src="https://img.shields.io/badge/License-MIT-brightgreen"/>
        </a>
</p>
</center>



### 소개
> #### :tv:  Netflix clone project
> 컨텐츠 맞춤 추천을 기반으로 세상 모든 비디오를 스트리밍하는 서비스입니다.
> 


#### [:point_right: Homepage](http://www.abdvideo.ml/)

#### [:memo:  Documentations](https://github.com/connect-foundation/2019-19/wiki)

#### :tv: Demo Video (click :point_down:)

[![[부스트캠프 2019 19조 - 안봐도 비디오] 데모 동영상](http://img.youtube.com/vi/XcDHMs2Ni4k/0.jpg)](http://www.youtube.com/watch?v=XcDHMs2Ni4k "Demo Video")

<hr>

### 개발기간
- 2019.11.4 ~ 2019.12.19

### 팀원

| [김민성](https://github.com/minsung1129)     | [김한비](https://github.com/KKambi)   | [신정수](https://github.com/jngsoo)    |[윤경호](https://github.com/zoomspeed)|
| -------- | -------- | -------- |----|

### 개발환경
- Node (12.13.0) + Express (4.16.1)
- React (16.11.0) + Webpack (4.41.2)
- npm (6.13.0)
- Elastic Search + Logstash + MySQL
- nCloud
    - Server
        - App Server 
        - DB Server 
        - Segmenter Server
    - Object Storage (Logstash JSON)
    - Object Storage (Thumbnails videos & Streaming Data)
    - CDN+
    - VOD Transcoder




### 설치
1. 각 서버에 필요한 패키지 설치
```bash
#/api-server
npm install
#/client-server
npm install
```

2. 리액트 빌드
```bash
#client-server
npm run build
```

3. 환경변수 및 인프라 관련 설정
- `/api-server/.env`
- `/segmenter-server/.env`
- `/api-server/config/config.json`

### 기능
#### client-server
- 메인 영상 썸네일
- 영상별로 좋아요 & 찜하기
- 회원별로 추천기능
- 영상 검색 기능
- 장르별 영상 카로셀
- 비디오 플레이어
- 무한 스크롤

#### api-server
- 컨텐츠 정보에 대한 API 응답
- 구글 로그인

#### elastic-server
- elastic search 검색엔진을 사용, DSL쿼리 적용
- logstash로 로그수집 및 분석가능 
- shell script, crontab schedule으로 벌크로 가져온 데이터 1분마다 sync
- API 호출로 해당 요청에 대한 JSON 형식의 응답 

#### segmenter-server
- 원본 영상 업로드
- nCloud VOD Transcoder를 통한 트랜스코딩(360p, 480p, 720p)
- 트랜스코딩된 영상을 다운로드받아, 스트리밍 데이터로 분할(m3u8 + ts)
- 영상 정보 및 스트리밍 데이터 url(CDN+) DB에 저장
- 스트리밍 데이터 업로드









<br><br><br> 
<br><br><br> 
<br><br><br> 
<br><br><br> 
<br><br><br> 
<br><br><br> 

---
# 데일리 스크럼


# 12.20 금
## 어제 한 일

- 김민성
    - 콘솔에 나오는 에러 제거
        - map에 unique한 key를 정해주기
        - useEffect 두번째인자 오류
        - font오류 등
    - 코드상의 불필요한 console.log, alert 삭제
- 신정수 
    - 동영상 플레이어 키 이벤트 버그 해결
    - 동영상 플레이어 키 이벤트에 따른 UI 효과 추가
    - 배포

## 오늘 할 일
- README.md 업데이트
- 마지막 데모


## 이슈


# 12.19 목
## 어제 한 일

- 김민성
    - 동영상 화질에 관한 버그 수정
        - 화질이 다르게 표시되지 않아 영상 재업로드
    - 동영상이 나오지 않는 버그 수정
        - 대체로 나올 동영상 추가

- 신정수 
    - sessionStorage를 활용해 불필요한 api 요청 줄임
    - 적용한 부분  
        - 인기 콘텐츠 (sessionStorage 내 5분 지속)
        - 각 콘텐츠의 태그 정보 (sessionStorage 내 10분 지속)
    - 퍼블리싱 일부 추가 및 수정
        - 콘텐츠 상세 정보 제목 크기 줄임
        - 구글 로그인 아이콘 추가

## 오늘 할 일

- 스크롤, 캐러셀 디바운스 개선
- 불필요한 console.log, alert 코드 모두 지우기
- 브라우저 console창에 빨간색 버그 메세지 모두 지우기
- 플레이어 화질 변경 바탕 css
- 제목 줄일 수 있는 부분 줄이기 (검색 결과에 영향을 적게주는 선에서)

## 이슈
- Bug
    - Player 컴포넌트에서 방향키 이벤트, 스페이스바 등 재생 및 탐색관련 이벤트가 제대로 처리되지 않는 버그

<br><br><br> 

---
# Logo
- white
![](https://i.imgur.com/Kn1Czq5.png)
- black
![](https://i.imgur.com/dNvD807.png)

- lightgray
![](https://i.imgur.com/edta25o.png)
- dimgray
![](https://i.imgur.com/P4rt8Vk.png)
- n
![](https://i.imgur.com/LXPKI8G.png)






![](https://i.imgur.com/Zogwm5Y.png)
![](https://i.imgur.com/iCMrdBR.png)

- Google Login Logo
![](https://i.imgur.com/QsTmGjJ.png)

- Favicon
![](https://i.imgur.com/hhfh9CB.png)