Repository학습할 최적화 기법이미지 지연 로딩이미지 사이즈 최적화서버에 저장되어 있는 정적 이미지 최적화폰트 최적화커스텀 폰트 적용 최적화캐시 최적화불필요한 CSS 제거사용하지 않는 CSS 코드 제거이미지 지연 로딩네트워크를 확인할 때는 명확한 흐름을 파악할 수 있도록 네트워크에 throttling을 적용합니다. banner-video는 페이지에서 가장 처음으로 사용자에게 보이는 콘텐츠인데 가장 나중에 로드되면, 사용자가 첫 화면에서 아무것도 보지 못한 채로 오랫동안 머물게 되므로 사용자 경험에 좋지 않을 겁니다.동영상의 다운로드를 방해하는, 당장 사용되지 않는 이미지를 나중에 다운로드되도록 하여 동영상이 먼저 다운로드되게 하는 것입니다. 즉, 이미지를 지연 로드하는 것이죠. 뷰포트에 이미지가 ..

학습할 최적화 기법CSS 애니메이션 최적화컴포넌트 지연 로딩 단일 컴포넌트 분할컴포넌트 사전 로딩이미지 사전 로딩애니메이션 최적화문제의 애니메이션 찾기 설문 항목을 클릭하면 해당 응답에 대해 필터링되고 막대 그래프의 배경 색과 막대의 가로 길이가 변합니다.그런데 이 애니메이션을 계속 보다 보면 약간 이상하게 느껴집니다. 막대가 늘어날 때 부드럽게 늘어나지 않고 어딘가 살짝 끊기는 듯한 느낌이 있습니다. 이런 끊김 현상을 쟁크(jank) 라고 합니다. 느끼지 못한다면, 개발자 도구를 열고 Performance 패널의 CPU 설정을 6x slowdown으로 설정하면 애니메이션이 끊기는 현상을 더 잘 확인할 수 있습니다.애니메이션의 원리일반적으로 사용하는 디스플레이의 주사율은 60Hz입니다. 즉, 1초에 ..

크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저_evergreen browser 1의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다. ES6+와 ES.NEXT의 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요하다. 또한 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. ES6 모듈(ESM) 은 대부분의 모던 브라우저(Chrome 61, FF 60, SF 10.1, Edge 16 이상)에서 사용할 수 있다. 하지만 다음과 같은 이유로 아직까지는 ESM보다는 별도의 모듈 로더를 사용하는 것이 일반적이다. IE를 포함한 구형 ..

48.1 모듈의 일반적 의미 모듈_module 이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태다. 다시 말해, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다. 모듈 사용자는 모듈이 공개_export 한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수..

47.1 에러 처리의 필요성 에러_error가 발생하지 않는 코드를 작성하는 것은 불가능하다. 따라서 에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다. 직접적으로 에러를 발생하지는 않는 예외_exception 적인 상황이 발생할 수도 있다. 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성이 크다. 47.2 try..catch...finally 문 예외적인 상황이 발생하면 첫번째, 반환하는 값(null 또는 -1)을 if 문이나 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방법과 두번째, 에러..

제너레이터란?제너레이터는 실행을 일시중지하고 재개할 수 있는 특징을 가진 함수이다. 일반 함수와 제너레이터의 차이는 다음과 같다제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.함수 제어권을 함수가 독점하는 것이 아니라 호출자에게 양도제너레이터 함수는 함수 호출자와 함수의 상태를 주고 받을 수 있다.제너레이터함수는 함수 호출자에게 상태를 전달할 수 있고 함수 호출자로부터 상태를 전달 받을 수 도있다.제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체 반환제너레이터 함수의 정의제너레이터 함수는 function* 키워드로 선언한다. 그리고 하나 이상의 yield 표현식을 포함..