What is Service Worker: A service worker is a script that runs independently in the browser background. On the user side, it can intercept its network requests and decide what to load (fetch). Service workers mainly serve features like background sync, push notifications and they are commonly used for’offline first’ applications, giving the developers the opportunity to take complete control ove..

CDN Content Delivery Network 웹페이지, 이미지, 동영상 과 같은 컨텐츠를 서버에서 사용자에게 전송하는 것 기존 단 하나의 서버의 문제점 클라이언트가 겪는 불편함: 전 세계에서 서버에 요청을 보내는 경우, 각 나라와의 서버의 거리가 멀 경우(물리적인 이유), 서버에서 컨텐츠를 받아오는 시간이 오래걸린다. 서버가 겪는 불편함: 수많은 요청들을 처리해야 한다는 점. CDN 서버는 컨텐츠 전달이라는 용도에 특화되어 서버의 요청 처리를 분산한다. CDN 업체가 전세계 곳곳에 서버를 두고 있다면, 요청을 클라이언트에게 가장 빠르게 서비스를 제공할 수 있는 CDN 서버에서 해당 요청을 처리하는 것이다. 이 CDN 서버에는 해당 서비스 사이트의 각종 이미지, 기타 정적 요소들이 저장, 캐싱 되어..

PWA Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications. Progressive Web Apps are a useful design pattern, though they aren't a formalized standard. PWA can be thought of as similar to AJAX or other similar patterns that encompass a s..

Single Page Application html 문서 전체가 아니라 json 과 같은 포맷으로 서버에서 필요한 데이터만 받아올 수 있다. 이 데이터를 javascript 를 이용해 동적으로 html 요소를 생성해 페이지를 업데이트하는 방식이다. 이 방식이 AJAX 라는 이름으로 공식적으로 인정되는데, 이 것이 Single Page Application 이다. Table of Contents: Client Side Rendering(CSR) Server Side Rendering(SSR) TTV(Time To View) & TTI(Time To Interact) Static Site Generation(SSG) Conclusion Client Side Rendering(CSR) JS + Framewor..

Browser Rendering: JS + DOM + CSSOM There's a thing called the Critical Rendering Path (CRP), which is the pipeline for rendering a page. In other words, it's the steps the browser needs to take to create pixels into the screen from your HTML, CSS, and JavaScript code. Now, CSS and HTML are so-called render-blocking resources, meaning, they need to be fetched and fully parsed before we can rende..

출처: https://knulab.com/archives/1185 배경이미지 브라우저에 꽉 채우기 – KNULAB 브라우저 뷰포트에 배경이미지가 꽉 차게 보여지려면 아래와 같이 min-height 값을 설정한다. Full Background Cover body, html { margin: 0; padding: 0; height: 100%; } .bgimg { border: 0; padding: 0; background-image: url('ima knulab.com 브라우저 뷰포트에 배경이미지가 꽉 차게 보여지려면 아래와 같이 min-height 값을 설정한다. Full Background Cover 첫번째 방법 html { background: url(images/bg.jpg) no-repeat cen..