03. 만들면서 배우는 React (Apple TV) - 1

46. Vite란?

Vite를 사용하는 이유

vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을 때의 반영 속도 같은 Feedback 속도의 엄청난 개선

• 브라우저에서 ES 모듈을 사용할 수 있기 전에는 개발자에게 모듈화된 방식으로 JavaScript를 작성하는 기본 메커니즘이 없었음
• 그래서 '번들링'이 필요. webpack, Rollup 및 Parcel과 같은 도구로 번들링 해결
• 그러나 점점 더 큰 애플리케이션을 구축하기 시작하면서 처리하는 JavaScript와 모듈의 양이 크게 증가
• 자바스크립트 기반 도구에 대한 성능 병목 현상이 발생하기 시작함. 개발 서버를 가동하는 데 종종 너무 오랜 시간이 걸리거나 HMR을 사용하더라도 파일 편집이 반영되는 데 몇 초가 걸리는 문제점이 생김

-> Vite는 생태계의 새로운 발전을 활용하여 이러한 문제를 해결하는 것을 목표로 함

Vite를 이용해서 속도 개선을 하는 방법

개발 서버를 스타트할 때 번들러 기반 빌드 설정은 서비스를 제공하기 전에 전체 애플리케이션을 열심히 크롤링하고 빌드해야 함

-> 느린 서버 시작 속도

vite는 먼저 애플리케이션의 모듈을 종속성과 소스 코드의 두 가지 범주로 나누어 개발 서버 시작 시간을 개선함

• 종속성(Dependencies)은 대부분 개발 중에 자주 변경되지 않는 일반 JavaScript. 일부 큰 종속성도 처리하는데 큰 비용이 듬. 종속성은 다양한 모듈 형식 (ESM, CommonJS 등)으로 제공 될 수 있음

• vite는 esbuild를 사용하여 종속성을 사전 번들로 제공. esbuild는 Go로 작성되어 있으며 JavaScript 기반 번들러보다 10~100배 더 빠르게 종속성을 사전 번들링함

• Soure Code에는 변환이 필요한 일반 JavaScript가 아닌 경우가 많으며 매우 자주 편집됨. 또한 모든 소스 코드를 동시에 로드할 필요는 없음

• vite는 Native ESM을 통해 소스 코드 제공. 이것은 브라우저가 번들러 작업의 일부를 인계받게 하는 것. vite는 브라우저가 요청할 때만 소스 코드를 변환하고 제공하기만 하면 됨. 조건부 동적 가져오기 뒤에 있는 코드는 현재 화면에서 실제로 사용되는 경우에만 처리됨

-> 느린 서버 업데이트 속도

번들러 기반 빌드 설정에서 파일을 편집할 때 명백한 이유로 전체 번들을 다시 빌드하는 것은 비효율적. 업데이트 속도는 앱 크기에 따라 선형적으로 저하됨

일부 번들러는 개발 서버는 파일이 변경될 때 모듈 그래프의 일부만 무효화하면 되지만 전체 번들을 다시 구성하고 웹 페이지를 다시 로드해야 하도록 메모리에서 번들링을 실행함. 번들을 재구성하는데 비용이 많이 들 수 있으며 페이지를 다시 로드하면 애플리케이션의 현재 상태가 손상됨. 이것이 일부 번들러가 핫 모듈 교체(HMR)을 지원하는 이유.
페이지의 나머지 부분에 영향을 주지 않고 모듈 자체를 "Hot Module Replacement" 할 수 있음. 이것은 DX(Developer Experience)를 크게 향상시킴. 그러나 실제로 HMR 업데이트 속도도 응용 프로그램의 크기가 증가함에 따라 크게 저하된다는 것을 발견함

HMR(Hot Module Replace)란?

파일을 편집할 때 전체 번들을 다시 빌드하는 것이 아닌 페이지의 나머지 부분에 영향을 주지 않고 변경된 모듈 자체를 교체해서 빠르게 화면에 반영되게 하는 것

Vite에서 HMR은 기본 ESM을 통해 수행됨. 파일이 편집될 때 Vite는 편집된 모듈과 가장 가까운 HMR 경계(대부분의 경우 모듈 자체만) 사이의 체인을 정확하게 무효화하여 애플리케이션의 크기에 관계없이 HMR 업데이트가 일관되게 빨라짐

Vite는 또한 HTTP 헤더를 활용하여 전체 페이지 로드 속도를 높임. 소스 코드 모듈 요청은 '304 Not Modified'를 통해 조건부로 이루어지며 종속성 모듈 요청은 'Cache-Control: max-age=31536000, immutable'을 통해 강력하게 캐시됨. 따라서 한 번 캐시되면 서버에 다시 도달하지 않음

Typescript Transpiling 속도

Vite를 이용하면 기본적으로 Typescript 사용을 지원하며 esbuild를 이용해서 transpiling을 하기 때문에 훨씬 빠른 속도로 할 수 있음. 하지만 타입 checking 기능은 없음. 이미 에디터 내에서 다른 것들이 타입 체킹을 하기 때문에 transpiling만 제공

47. The Movie DB API 생성하기

https://www.themoviedb.org/

48. Axois 인스턴스 생성 및 요청 보내기

Axois란?

Axois는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
백엔드와 프론트엔드의 통신을 쉽게하기 위해 Ajax와 더불어 사용함

사용방법

• axois 모듈 설치: npm install axios --save
• axios.get('')

axios를 인스턴스화 하는 이유

중복된 부분을 계속 입력하지 않아도 되기 때문에

50. Styled Component

Styled Component란?

Styled Component란 CSS-in-JS라고 하는 Javascript 파일 안에서 CSS를 처리할 수 있게 해주는 대표적인 라이브러리

https://styled-components.com/docs/basics

장점

• 컴포넌트는 props를 내려줄 수 있음. 마찬가지로 styled 컴포넌트에도 props를 사용할 수 있으며 내려받은 props를 이용해 조건을 줘서 다양한 스타일을 적용해 줄 수 있음

• 클래스는 확장(extending)이 가능함. 마찬가지로 styled 컴포넌트도 부모 컴포넌트를 확장 받을 수 있음

설치 방법

• npm install --save styled-components
• yarn add styled-components

57. 비디오 배너 생성하기

Iframe이란?

유튜브 비디오를 가져오기 위해서 사용!

Iframe은 HTML Inline Frame 요소이며 inline frame의 약자이다
효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입할 수 있음