주요 렌더링 경로 - 브라우저의 원리를 이해하고 최적화 하기
[Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=ko)를 요약했습니다. 이글을 보는게 더 나아요 사실 ```toc tight: true, from-heading: 2 to-heading: 3 ``` 성...
08 POSTS
Browser 3
빠른 로딩을 위한 PRPL 패턴
[Apply instant loading with the PRPL pattern](https://web.dev/apply-instant-loading-with-prpl/)을 번역한 글입니다. PRPL은 웹 페이지를 로드하고 인터랙티브 할 수 있게 금 더욱 빠르게 만드는 패턴을 설명하는 약어다. ## 요약 - 중요한 리소스를 미리 로드해라 (Push (...
자바스크립트에서 http 요청하기 - fetch에 대한 고찰
`toc tight: true, from-heading: 2 to-heading: 3 ` ## 1. 서론 자바스크립트에서 http 요청을 하는 것은 이제 비일비재한 일이 되었다. 서버에서 모든 데이터를 가져와서 static 한 html을 만들어서 보여주고 있는 웹페이지는 아마 찾기 어려울 것이다. 맨 처음 웹을 배울 때, jquery의 ajax ...
React count down에서 배운 event-emitter 와 requestAnimationFrame
# 리액트에서 카운트 다운을 만들며 배운 것들 리액트에서 카운트 다운을 만든다고 가정해보자. 가장 먼저 생각나는대로, 빠르게 구현한다면 아래와 같은 느낌이 될 것이다. https://codepen.io/yceffort/pen/BayPyNe 하지만 이 코드는 한가지 문제를 가지고 있다. ## setInterval, setTimeout `setInte...
Chrome Samesite 쿠키 정책
# 문제의 시작 지난 주말, 엄청나게 급하게 빠른 속도로 프로젝트를 heroku에 올릴 일이 있었다. DB도 새로만들어야하고, 로그인도 필요한 사이트라 DB는 Heroku의 Clean DB를, 로그인은 [google sign-in for websites](https://developers.google.com/identity/sign-in/web)을 사용하...
브라우저 히스토리 조작
브라우저 히스토리 조작하기
브라우저는 어떻게 동작하는가? - 모던 웹브라우저가 동작하는 방법
### 🚧작성중 🚧 [원문-How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) > 이 글을 요약/번역한 더 좋은 글이 [네이버 d2](https://d2.naver.com/...
Intersection Observer
## Intersection Observer Intersection Observer는 엘리먼트가 viewport에 노출되고 있는지 여부를 확인해주는 API다. 간단히 말해 브라우저의 어떤 요소가 화면에 노출되고 있는지 안되고 있는지를 확인해주는 라이브러리라고 생각하면 될 것 같다. 이 라이브러리가 없이 엘리먼트가 노출중인지 확인하려면 어떻게 해야할까? 이...