javascript(38)
-
[Web.dev] Fast (2) - Performance Budget
Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. 성능 예산 수립 Performance budgets 101 Your first performance budget Incorporate performance budgets into your build process Use Lighthouse for performance budgets Using bundlesize with Travis CI Using Lighthouse Bot to set a perf..
2022.04.22 -
[Web.dev] Fast (1) - Introduction
Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table of Contents Why does speed matter? What is speed? How to measure speed? How to stay fast? Measure performance with the RAIL model Why does Speed Matter? 연구에 따르면 낮은 성능은 비즈니스 목표에 부정적인 영향을 미칠 수 있습니다. 예를 들어 BBC는 사이트를 로드하는 ..
2022.04.15 -
[Web] preload, prefetch, preconnect
Overview 아무리 복잡한 웹 애플리케이션이라도 모든 것은 HTML 문서를 로딩하는 것부터 시작됩니다. 로딩된 문서는 자바스크립트를 실행하기 위한 태그, CSS style이나 image 등을 가져오기 위한 태그들을 포함하는 경우가 대부분이며, 브라우저는 HTML 문서를 받아온 뒤 이를 파싱 하면서(혹은 파싱 한 후에) 해당 태그들이 포함하는 리소스들을 가져옵니다. 기본적으로 브라우저는 Critical Rendering Path를 기준으로 삼아 fetch 해야 하는 리소스에 우선순위를 부여합니다. 브라우저의 경우 도메인마다 2~6개(Chrome브라우저의 경우 도메인마다 최대 6개)의 커넥션을 맺을 수 있고, 최대 커넥션의 개수를 넘어서는 요청은 이전 요청이 끝나야 이루어질 수 있습니다. 따라서 같은 도..
2022.04.03 -
[Javascript] script async & defer
Overview React, Nextjs와 같은 Javascript 라이브러리를 사용해서 개발을 하면, 대부분의 경우 build 옵션에 대해서 큰 신경을 쓸 필요가 없습니다. React의 경우 react-scripts를 기반으로 하는 Create React App(CRA)가 기본적인 웹팩 설정을 해주고, Nextjs의 경우 내부적으로 next build 커맨드를 통해서 모듈 번들링을 지원해줍니다. 하지만 각각의 라이브러리를 사용해서 개발을 하더라도 실제로 내부적으로 bundling이 어떻게 되는지를 이해하는 것은 중요합니다. 이번 포스팅에서는 브라우저가 html문서를 파싱하는 도중 script 태그를 만났을 때 어떻게 동작하는지, 어떤 옵션을 사용할 수 있는지에 대해서 살펴보려고 합니다. 2. Cross..
2022.04.02 -
Strict Mode
Javascript에서의 Strict Mode와 React에서의 Strict Mode, 그리고 Typescript에서의 Strict Mode는 동일한 이름을 갖지만 각각의 역할과 기능이 다릅니다. 이번 포스팅에서는 이를 정리합니다. Javascript Strict Mode Javascript에서의 Strict Mode(엄격 모드)는 다음과 같은 특징을 갖습니다. 기존에 조용히 무시되던 에러들을 Throwing 한다. Javascript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡는다 ECMAScript의 차기 버전들에서 정의될 문법을 금지한다. Examples 암묵적 전역 선언하지 않은 변수를 참조하면 Reference 에러를 발생시킵니다 'use strict' x = 1; console.log(..
2022.03.27 -
Async / Await Under the Hood
Overview 자바스크립트 ES6부터 비동기 코드 처리를 위해 async / await 문법이 추가되었습니다. ES6(=ES2015) 문법 자체가 도입된 지 꽤 많은 시간이 지났기 때문에 최근의 웹 개발은 async / await 을 통해 대부분의 비동기 처리를 하는 것이 일반적입니다. 서버로 네트워크 요청을 보내고, 그 결과를 가지고 다시 서버에 요청을 보내는 등의 비동기 처리를 할 때, ES6이후의 문법에서는 async / await을 사용해 다음과 같이 처리할 수 있습니다. async function getResult(id) { const result = await getSearchResult(id); const video = await getVideo(result); return video; }..
2021.06.29