Web-performance 6

web-performance
빠른 로딩을 위한 PRPL 패턴
[Apply instant loading with the PRPL pattern](https://web.dev/apply-instant-loading-with-prpl/)을 번역한 글입니다. PRPL은 웹 페이지를 로드하고 인터랙티브 할 수 있게 금 더욱 빠르게 만드는 패턴을 설명하는 약어다. ## 요약 - 중요한 리소스를 미리 로드해라 (Push (...
2020-07-065분
web-performance
왜 CommonJS는 번들사이즈를 크게 하는가?
[How CommonJS is making your bundles larger](https://web.dev/commonjs-larger-bundles/) 를 번역 & 요약한 글입니다. ```toc tight: true, from-heading: 2 to-heading: 3 ``` **요약: 웹 애플리케이션을 확실하게 최적화해서 번들링하기 위해서는, C...
2020-07-0512분
web-performance webpack
프론트엔드 사이즈 줄이기
[이 글](https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size)을 대충 번역했습니다. ```toc tight: true, from-heading: 2 to-heading: 4 ``` ## webpack 4버전 이상의 경우 프로덕션 모드를 사용하...
2020-07-0112분
web-performance javascript
Notion 성능 최적화
[Case Study: Analyzing Notion app performance](https://3perf.com/blog/notion/)를 제멋대로 요약한 글입니다. 왠만하면 저 글을 참고하세요. ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## 자바스크립트의 비용 보통 `로딩 속도`를 이야기하면...
2020-06-2922분
javascript web-performance
자바스크립트에서 http 요청하기 - fetch에 대한 고찰
`toc tight: true, from-heading: 2 to-heading: 3 ` ## 1. 서론 자바스크립트에서 http 요청을 하는 것은 이제 비일비재한 일이 되었다. 서버에서 모든 데이터를 가져와서 static 한 html을 만들어서 보여주고 있는 웹페이지는 아마 찾기 어려울 것이다. 맨 처음 웹을 배울 때, jquery의 ajax ...
2020-01-226분
react javascript web-performance
React count down에서 배운 event-emitter 와 requestAnimationFrame
# 리액트에서 카운트 다운을 만들며 배운 것들 리액트에서 카운트 다운을 만든다고 가정해보자. 가장 먼저 생각나는대로, 빠르게 구현한다면 아래와 같은 느낌이 될 것이다. https://codepen.io/yceffort/pen/BayPyNe 하지만 이 코드는 한가지 문제를 가지고 있다. ## setInterval, setTimeout `setInte...
2020-01-156분
typescript web-performance
typescript debounce
> Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancel m...
2019-10-142분
browser web-performance javascript
Intersection Observer
## Intersection Observer Intersection Observer는 엘리먼트가 viewport에 노출되고 있는지 여부를 확인해주는 API다. 간단히 말해 브라우저의 어떤 요소가 화면에 노출되고 있는지 안되고 있는지를 확인해주는 라이브러리라고 생각하면 될 것 같다. 이 라이브러리가 없이 엘리먼트가 노출중인지 확인하려면 어떻게 해야할까? 이...
2019-06-244분

Page 5 ←