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

진행 사항 - Contact Section 구현 - Nav 버튼 클릭 scrollTo 로직 구현 - 전체적으로 CSS re-sizing Contact Section ScrollTo import React from "react"; import styled from "styled-components"; import theme from "../common/style/themes/default"; import MainLogo from "../assets/images/logo.png"; import GitLogo from "../assets/images/github.png"; import BlogLogo from "../assets/images/tistory.svg"; function MainNav() { //스..

진행 사항 02 [Client]ADD Studies Component - Implement Studies and Modal - Store Studies data in Firestore - Use useState method to convey according datas to Modal component 03 [Client]ADD Works Section - Implement Works Section - Store Works data in Firestore - Use useState method to convey according datas to Modal component Firestore 겹친 영역 이벤터 Studies / Works 의 아이템 클릭 시 모달 창이 뜨는데, 아이템의 어떠한 부분을 클릭해..