코린이의 개발 일지

기존 Progressive download 방식 기존에 사용되던 Progressing download(PD) 방식은 동영상 소스가 한번 선택되면 해당 컨텐츠를 끝까지 다운로드 하여 플레이하는 방식이다. 아래의 그림처럼 세그먼트 단위로 비디오 파일을 받아서 클라이언트 측 버퍼에 일정 이상 쌓이면 동영상이 재생되는 방식으로 동작한다. PD 방식의 단점은 한가지 해상도의 동영상 소스가 선택되어 계속 다운로드하는 방식이다 보니, 네트워크 상황에 따라 사용자가 지속해서 버퍼링을 만나게 된다는 것이다. 이러한 문제를 해결하기 위해 Adaptive HTTP Streaming 방식이 나왔다 Adaptive HTTP Streaming 기존의 HTTP 프로토콜을 이용해 구현하는 스트리밍 기술이다. 유튜브에서 사용하는 HL..

1. 조합 재귀함수 제너레이터를 사용하지 않고, 재귀로 조합을 구현할 경우 아래와 같다. function combination(arr, count){ if (count === 1) return arr.map((target)=> [target]) const result = []; arr.forEach((num, index)=> { const restCombinations = combination(arr.slice(index+1), count-1) const tmp = restCombinations.map((target)=> [num, ...target]) result.push(...tmp); }) return result; } 특정 하나의 값을 고정해두고 나머지 값들을 가지고 조합을 구하고 배열에 추가하는..

자바스크립트 엔진은 load된 script를 해석, 실행하는 역할이다. 가장 많이 사용되고 있는 엔진은 크롬과 node의 V8이다. 자바스크립트 엔진 내부에는 컴파일 과정이 있다. 과정 렌더링 엔진은 HTML을 읽다가 script 태그를 만나면 잠시 작업을 일시 중단 이때부터 JS코드를 자바스크립트 엔진에서 해석 실행한다. 자바스크립트 코드 해석 해당 과정을 컴파일레이션이라고 부른다. 엔진은 이때 컴파일 과정을 거친다. 컴파일 과정은 총 3단계로 이루어져 있다. 코드를 의미 있는 조각으로 나누는 렉싱, 토크나이징 (이때 스코프가 결정된다. - 렉시컬 스코프라 부르는 이유) 코드를 트리구조로 나타내는 AST로 만드는 파싱 VM이 실행할 수 있도록 트리를 가지고 바이트코드로 변환하는 컴파일 과정 여기서 AS..

Image 컴포넌트 기능 Next.js에서 제공하는 Image 컴포넌트가 기본적으로 지원하는 최적화 기능이 있다. 1. 포맷 및 사이즈 변환 용량 최소화를 위해 png 포맷에서 webp 포맷으로 변경되어 다운로드 된 것을 확인할 수 있다. 또한 원래 이미지 사이즈가 아닌 현재 컴포넌트에 맞춰서 자동으로 사이즈 변환된 것을 확인할 수 있다. 이러한 포맷 및 사이즈 변환 작업은 이미지에 대한 최초 요청시에 Next.js 서버에서 진행되며, 이후 요청에는 캐시가 만료될 때까지 캐시된 이미지가 제공되기 때문에 첫번째 요청보다 훨씬 빠르게 이미지를 서빙할 수 있다. 만약 파일 크기 및 포맷 변환을 막고 이미지 퀄리티 그대로 가져오고 싶다면 unoptimized 옵션을 false로 주면 된다. 2. lazy loa..