JavaScript (9) 썸네일형 리스트형 JavaScript Proxy 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://www.javascripttutorial.net/es6/javascript-proxy/ 저작권 정보: https://www.javascripttutorial.net/es6/javascript-proxy/ 개요 : 이 튜토리얼에서는 ES6의 JavaScript Proxy 개체에 대해 설명합니다. JavaScript Proxy 개체란 JavaScript Proxy는 다른 개체(타깃)를 랩하여 대상 개체의 기본 작업을 가로채는 객체입니다. 기본 연산은 속성 조회, 할당, 열거 및 함수 호출 등이 될 수 있습니다. 프록시 개체 생성 새 프록시 개체를 만들려면 다음 .. 101 Javascript Critical Rendering Path (한글) (2) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 예제 코드에서 오타로 보이는 부분을 일부 수정했습니다. 필요한 경우, 원문을 확인해주세요. 원문: https://indepth.dev/posts/1498/101-javascript-critical-rendering-path 저작권 정보: https://indepth.dev/ 렌더 차단 자원 CSS 줄이는 방법 어떤 웹 페이지이든, 첫 스크롤 지점(fold) 이전에 있는 콘텐츠와 스크롤 지점 이후에 있는 콘텐츠가 있습니다. fold 이전에 있는 콘텐츠는 신중하게 선정해야 합니다. fold 전에 있는 모든 콘텐츠는 스타일을 로드해야만 합니다. 즉, 이것들은 Critical Style.. 101 Javascript Critical Rendering Path (한글) (1) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1498/101-javascript-critical-rendering-path 저작권 정보: https://indepth.dev/ 이 글에서는 주요 렌더링 경로의 과정을 살펴보겠습니다. 정의상, 주요 렌더링 경로는 브라우저가 HTML 페이지를 가져와서 사용자에게 웹페이지를 시각화하는 동안 경로를 만드는 몇 가지 단계의 모음에 불과합니다. 이 과정에서, 우리는 브라우저가 수행하는 단계를 최적화해야 합니다. The Document Object Model 우선, 모든 웹페이지에는 문서 객체 모델(DOM)이 있습니다. 이는 구문 분석.. An in-depth perspective on webpack's bundling process (한글) (2) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1482/an-in-depth-perspective-on-webpacks-bundling-process 저작권 정보: https://indepth.dev/ 1편: https://front-end-news.tistory.com/entry/An-in-depth-perspective-on-webpacks-bundling-process-1-%ED%95%9C%EA%B8%80 Chunk, ChunkGroup, EntryPoint 정의 이제 모듈에 좀 더 친숙해졌으니, 이 섹션 제목의 개념들을 설명해보겠습니다. 모듈이 무엇인지 한 번 더 .. An in-depth perspective on webpack's bundling process (한글) (1) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1482/an-in-depth-perspective-on-webpacks-bundling-process 저작권 정보: https://indepth.dev/ 웹팩은 오늘날 웹 개발자들이 그들의 애플리케이션을 만드는 데 사용하는 필수적인 요소로 간주될 수 있는 매우 강력하고 흥미로운 도구입니다. 하지만, 많은 사람들은 그것의 복잡성 때문에 웹팩을 가지고 일하는 것은 꽤 도전적인 일이라고 주장합니다. 이 시리즈 글에서 웹팩으로 일하는 것이 좀 더 쉬워지길 바라면서 웹팩의 내부 작업에 대한 여러 세부 사항을 공유하고자 합니다. 이 .. You Can Label a JavaScript `if` Statement (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://css-tricks.com/you-can-label-a-javascript-if-statement/#top-of-site 저작권 정보: https://css-tricks.com/license/ Labels는 자바스크립트 생성 이후 존재해온 기능이다. 그들은 새롭지 않아! 나는 많은 사람들이 그것에 대해 알고 있다고 생각하지 않고 그들이 약간 혼란스럽다고 주장할 수도 있다. 그러나, 우리가 보게 될 것처럼, 라벨은 매우 특정한 경우에 유용할 수 있다. 그러나 먼저 자바스크립트 Labels는 HTML의 와 혼동되어서는안 된다. 이것은 완전히 다른 것이다! 자바스.. Deep-copying in JavaScript using structuredClone (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://web.dev/structured-clone/ 저작권 정보: https://creativecommons.org/licenses/by/4.0/ 오랫동안, 자바스크립트의 값을 깊게 복사하려면 별도의 해결 방법에 의지하거나 라이브러리를 사용해야만 했습니다. 이제 깊은 복사를 위한 내장기능으로 structuredClone()이 제공됩니다. 지원 브라우저: Chrome X / Firefox 94 / Edge X / Safari preview 출처 글 작성 당시, 모든 브라우저에서 일일 배포(nightly releases)로 이 API를 구현했으며, Firefox는 F.. Building A Dynamic Header With Intersection Observer (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/ 저작권 정보: https://www.smashingmagazine.com/privacy-policy/ 빠른 요약 ↬ 뷰포트 내의 특정 임계값으로 스크롤할 때 페이지의 일부 구성요소가 요소에 응답해야 하는 UI를 구축해야 하는 경우 또는 뷰포트 자체 내부 및 외부 UI를 구축해야 하는 경우 자바스크립트에서, 스크롤에 콜백을 계속 발사하기 위해 event listener를 부착하는 것은 성능 집약적일 수 있으며, 현명하지 못한 방법으로 .. Implementing Private Fields for JavaScript (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://hacks.mozilla.org/2021/06/implementing-private-fields-for-javascript/ 저작권 정보: https://creativecommons.org/licenses/by-sa/3.0/ 이 게시물은 Matthew Gaudet의 블로그에서 교차 게시되었습니다. JavaScript용 언어 기능을 구현할 때, 구현자는 사양의 언어가 구현에 매핑되는 방법에 대한 결정을 내려야 합니다. 때로는 사양과 구현이 동일한 용어와 알고리즘의 대부분을 공유할 수 있는 상당히 간단한 방법이기도 합니다. 또한 구현에 대한 압박으로 인해 구현 .. 이전 1 다음
