Overview Nextjs가 편리한 점은 웹 사이트 최적화를 위해 고려해야 하는 여러 가지 사항들을 대부분 "미리" 고려해서 default 옵션으로 제공해 주고 있다는 것입니다. 이번 포스팅에서는 Nextjs에서 웹 사이트 최적화를 위해 제공하는 기능 중의 하나인 Next/Image 가 내부적으로 어떻게 동작하는지에 대해 살펴보려고 합니다. 공식 문서에서 찾아볼 수 있는 내용들은 포함되어 있지 않으며, 실제로 nextjs 라이브러리가 어떻게 구현되어 있는지를 소스 코드를 기준으로 설명합니다. Image Optimization next/image 를 사용하려면 html의 img 태그 대신에 다음과 같이 next/image를 import 해서 사용하면 됩니다. 사용법이 굉장히 간단하고, next/image..

Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. 이미지 최적화 Choose the right image format Choose the correct level of compression Use Imagemin to compress images Replace animated GIFs with video for faster page loads Serve responsive images Serve images with correct dimension..

Shared mount points and sharing files 여러 개의 컨테이너에서 동일한 File Set(set of files)을 공유할 수 있도록 하는 기능은 매우 유용합니다. 파일 공유는 이전 포스팅에서 설명한 "Bind Mounts"와 "Docker Volume"의 2가지 방법을 통해 사용할 수 있습니다. Bind Mounts 다음 명령어를 순차적으로 실행해보겠습니다. // Host Machine에 디렉터리를 생성합니다. LOG_SRC=~/web-logs-example mkdir ${LOG_SRC} // plath 라는 이름의 컨테이너를 실행합니다. // Host Machine의 path와 컨테이너의 path를 바인딩합니다. // 로그를 기록합니다. docker run --name pla..

Overview 도커 컨테이너를 통해 애플리케이션을 운영하다 보면, "데이터"를 적절하게 관리할 방법 이 필요합니다. 이를테면 데이터베이스 인스턴스를 컨테이너 안에서 동작시키는 상황에서 인스턴스나 호스트 머신에 문제가 생겨서 데이터베이스 컨테이너를 내려야 하거나, 업데이트를 위해 컨테이너를 재시작해야 한다면, 그러한 경우에도 불구하고 기존에 저장되어 있던 데이터는 유지되어야 합니다. 또한 여러 개의 웹 애플리케이션을 운영하는 경우, 모니터링이나 성능 최적화 등을 위해 다양한 로그들을 남겨야 할 텐데 마찬가지로 이 로그들은 컨테이너가 내려갈 때 같이 사라져서는 안 되기 때문에 별도의 관리 방법이 필요할 것입니다. 이번 포스팅에서는 도커가 파일 시스템을 다루는 방법들을 살펴봄으로써, 실제로 데이터를 어떻게 ..

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

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