What is Docker? 도커는 프로그램을 빌드하고, 저장하고, 실행하는 방법을 제공하는 오픈소스 프로젝트로, 컨테이너(container)라는 OS Technology를 사용해서 안전하고 가벼운 프로그램 런타임 환경을 제공합니다. Hello World 각 OS환경에 맞는 도커를 설치한 뒤에, CLI(Command Line Interface)에 아래와 같은 명령어를 입력하면, 다음과 같이 여러 개의 레이어를 다운로드한 후에, "hello world"라는 문장을 출력하고 프로그램이 종료되는 것을 확인할 수 있습니다. 실제로 어떤 일이 일어나고 있는지를 조금 더 자세히 살펴보겠습니다. docker run dockerinaction/hello_world "docker run"이라는 명령어는 Docker에게 ..

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