# 데모

## 프로젝트

#### 선택 계기, 만들어보니 느낀점?
- video streaming에 대해 다뤄보고 싶어서,
- 국내 무선 데이터 트래픽이 동영상 감상에서 가장 많이 발생하고 사람들이 많이 이용하기 때문에 다뤄보고 싶었음
#### 진행중 기술적으로 힘들었던 점 && 해결법
- 콘텐츠 정보들에 대한 API 요청 줄이기
- 인기 콘텐츠, 각 콘텐츠의 태그 정보등 해당 페이지에 접근하거나 콘텐츠 상세 정보를 볼때마다 api요청을 했던 부분을 최초 1회만 api 요청을 하고 응답 정보를 session storage에 저장하여 5분-10분 간 유지하도록 개선
#### 기술적으로 보여주고 싶은 부분
- 검색 기능
- Elastic search를 통해 사용자가 입력한 검색어를 형태소 단위로 tokenizing하고 분석하여, 관련 검색 결과 유사도를 score로 저장하고 이를 활용해 관련 검색어, 관련 검색 결과 등을 보여줄 수 있음
- Front debounce
- 좋아요/좋아요 취소 api 요청 처리 대기
- 컴포넌트 재사용
- 각 버튼
- 캐러셀 - 그리드

## Nginx

>https://whatisthenext.tistory.com/123
>https://m.blog.naver.com/jhc9639/220967352282
#### 개념
- 동시접속 처리에 특화된 웹 서버 프로그램
- 요청에 대한 응답은 비동기 이벤트 기반 구조
#### 특징
- 쓰레드 기반 방식(Apache가 이런 방식)이 아닌 **Event-driven** 형식
- 쓰레드 기반은 하나의 커넥션당 하나의 쓰레드를 잡아 먹지만 이벤트 드라이븐방식은 **여러개의 커넥션을 몽땅 다 Event Handler를 통해 비동기 방식으로 처리해 먼저 처리되는 것부터 로직이 진행**

## Elastic search
>https://www.obcon.biz/wordpress/archives/546
- 구조, 개념, 특징

## React
>https://overreacted.io/ko/how-are-function-components-different-from-classes/
- Class vs Functional
- Props를 예로 들면 클래스 기반 컴포넌트에서는 `this.props`와 같이 `this` 키워드를 통해 props에 접근하는데 this는 mutable한 성질을 갖고 있어 props의 값이 변할 수 있음에 주의하여 사용해야 한다.
- 클래스 컴포넌트는 props를 재사용하기 때문에 개발자의 예상과 다르게 동작할 수 있는 문제점이 존재
- Functional - Hooks : 어떤 값이 언제 변할지 모른다
- 리액트 함수는 언제나 그 값을 보존한다.

- useState, useEffect 동작 원리? 방식? (life cycle에 관해)
- 최적화에 대한 고찰

## Oauth(Login) flow
- flow

## streaming
#### HLS방식 채택 이유(?)
- 기존 streaming 방식의 단점
- 기능이 많은 만큼 웹 서버에 비해 도입 비용이 상대적으로 높다.
- 서로 다른 네트워크 연결을 통해 데이터를 교환하기 때문에 방화벽이나 NAT(Network Address Translator)를 많이 쓰고 있는 환경에서는 서비스가 원활하지 않은 문제가 있다.
- HLS란
- **대역폭이 떨어지거나 네트워크 혼잡도가 높아지면서 전송 효율이 떨어지면 낮은 부분 컨텐츠로 변경하여 전송하는 민첩함을 가지고 있기도 하다.** => 이거 된다고 할까요??
- 프로토콜에서 스트리밍 데이터를 m3u8 의 확장자를 가진 재생목록 파일과 잘게 쪼개놓은 다수의 ts 파일들(동영상)을 HTTP 를 통해 전송하는 방식을 사용한다. HLS에서 서버는 HTTP 를 통해 클라이언트로부터 요청을 받고, 데이터에 대한 응답을 주는 역할만 수행하기 때문에, 저장되어 있는 파일을 읽어서 HTTP 응답에 데이터를 실어서 보낼 수 있는 어떤 웹 서버에서 사용이 가능하다. 스트림 세그먼터 (Stream Segmenter) 는 일정한 시간 간격마다 입력 받은 미디어 데이터를 분할해 파일로 만들고, 그 분할한 파일에 접근할 수 있는 메타 데이터 (m3u8) 파일을 생성하는 역할을 한다. 여기서 HTTP 는 양방향 방식이 아니기 때문에, 클라이언트에서 반드시 서버에 요청을 해야만 응답을 받을 수 있다.
- m3u8 : m3u 파일인데, UTF-8 로 인코딩 되어 있다는 의미
- m3u : 멀티미디어 파일의 재생목록을 관리하는 파일
- ts : MPEG-2 의 Transport Stream 포맷
- vs ABS (Adaptive Bitrate Streaming)
- 사용자의 네트워크 속도에 따라 적합한 콘텐츠를 선택하여 재생
- 사용자 별 서비스 품질 다변화
- 대역폭 변동에 대한 품질개선 및 안정성 확보
- Apple : HTTP Live Streaming (HLS)
- Adobe : HTTP Dynamic Streaming (HDS)

#### CDN
- 일반적으론 애플리케이션 및 스트리밍 미디어를 비롯한 콘텐츠를 전송하도록 최적화된 전세계적으로 촘촘히 분산된 서버로 이루어진 플랫폼
- 이 서버 네트워크는 수 많은 물리적 위치와 네트워크 위치에 분산되어 있어 웹 콘텐츠에 대한 엔드유저의 요청에 직접적으로 응답하고 빠르고 안전한 미디어 전송을 보장
- CDN은 오리진이라고도 불리는 콘텐츠 서버와 엔드유저(클라이언트) 사이에서 중재자 역할을 수행
> https://www.akamai.com/kr/ko/cdn/what-is-a-cdn.jsp
> https://goddaehee.tistory.com/173#recentComments

#### VOD transcoder
- 미디어 원본 파일을 모바일, PC 등 다양한 디바이스에서 다양한 화질로 변환하는 클라우드 서비스를 HTTP API 형태로 제공합니다.
- 사용 시나리오
- Step 1. 변환할 영상 파일을 네이버 클라우드 플랫폼 Object Storage 에 업로드
- Step 2. 네이버 클라우드 플랫폼 API Gateway를 통한 VOD TRANSCODER API 사용 준비 (인증키 생성 => Access Key ID, Secret Key)
- Step 3. 프리셋 목록 확인
- Step 4. Job 생성 요청 (필수 설정값을 json 으로 만들어 Job 생성 요청의 body 에 넣어 보냅니다.)
- Step 5. Job 생성 확인
>https://apidocs.ncloud.com/ko/media/vod_transcoder/