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는 사이트를 로드하는 ..

Overview 아무리 복잡한 웹 애플리케이션이라도 모든 것은 HTML 문서를 로딩하는 것부터 시작됩니다. 로딩된 문서는 자바스크립트를 실행하기 위한 태그, CSS style이나 image 등을 가져오기 위한 태그들을 포함하는 경우가 대부분이며, 브라우저는 HTML 문서를 받아온 뒤 이를 파싱 하면서(혹은 파싱 한 후에) 해당 태그들이 포함하는 리소스들을 가져옵니다. 기본적으로 브라우저는 Critical Rendering Path를 기준으로 삼아 fetch 해야 하는 리소스에 우선순위를 부여합니다. 브라우저의 경우 도메인마다 2~6개(Chrome브라우저의 경우 도메인마다 최대 6개)의 커넥션을 맺을 수 있고, 최대 커넥션의 개수를 넘어서는 요청은 이전 요청이 끝나야 이루어질 수 있습니다. 따라서 같은 도..

Overview React, Nextjs와 같은 Javascript 라이브러리를 사용해서 개발을 하면, 대부분의 경우 build 옵션에 대해서 큰 신경을 쓸 필요가 없습니다. React의 경우 react-scripts를 기반으로 하는 Create React App(CRA)가 기본적인 웹팩 설정을 해주고, Nextjs의 경우 내부적으로 next build 커맨드를 통해서 모듈 번들링을 지원해줍니다. 하지만 각각의 라이브러리를 사용해서 개발을 하더라도 실제로 내부적으로 bundling이 어떻게 되는지를 이해하는 것은 중요합니다. 이번 포스팅에서는 브라우저가 html문서를 파싱하는 도중 script 태그를 만났을 때 어떻게 동작하는지, 어떤 옵션을 사용할 수 있는지에 대해서 살펴보려고 합니다. 2. Cross..

Overview Nextjs 공식문서에 따르면 next v9 이후 버전부터는(현재 기준 release 버전은 12.1.1) getInitialProps 대신에 getStaticProps와 getServerSideProps를 사용하도록 권장합니다. 이는 getInitialProps가 Client Side와 Server Side에서 모두 동작하는 특징을 갖고 있기 때문입니다. 이번 포스팅에서는 Nextjs의 getInitialProps의 구현을 살펴보며 실제로 어떤 식으로 동작하는지를 살펴보도록 하겠습니다. Official Documents getInitialProps를 설명한 공식문서를 보면 다음과 같은 설명을 확인할 수 있습니다. getInitialProps enables server-side rende..

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(..

Overview Web.dev에서 소개하는 Network에 대한 내용들을 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents 네트워크 안정성을 측정하는 방법 # What is network reliability and how do you measure it? Identify resources loaded from the network Measuring offline usage 캐싱 도구 상자의 옵션 # Prevent unnecessary network requests with the HTTP Cache Love you..