분류 전체보기 (33) 썸네일형 리스트형 article vs. section: How To Choose The Right One (한글) (1) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/ 저작권 정보: https://www.smashingmagazine.com/ 요약 이 글에서 Olushuyi(필자)는 문서를 작성할 때 요소와 요소 중 어느 것을 사용할지 결정하는 데 도움이 되는 기준을 알아본다. 콘텐츠를 그룹으로 묶는 것이 접근성에 어떤 영향을 미치는지, 그리고 어떻게 하면 사용자가 모든 것을 고려하게 할 수 있는지 살펴본다. " 요소를 사용해야 할까요? 아니면 요소를 사용해야 할까요?" 컨테이너 요소 내에서 콘.. Inside look at modern web browser (part 1) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://developer.chrome.com/blog/inside-browser-part1 저작권 정보: https://developer.chrome.com/blog CPU, GPU, Memory, 그리고 멀티 프로세스 아키텍처 4부작으로 된 이 블로그 시리즈에서는, 크롬 브라우저의 내부를 고수준의 아키텍처부터 렌더링 파이프라인의 구체적인 내용까지 살펴볼 것이다. 브라우저가 당신이 짠 코드를 어떻게 기능적인 웹사이트로 바꾸는지, 혹은 왜 특정 기술이 성능 향상을 위해 추천되고는 하는지 잘 모르겠다면, 바로 이 시리즈를 보면 된다. 시리즈의 파트 1 에서는, 컴퓨터의.. 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.. Towards an animation smoothness metric (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://web.dev/smoothness/ 저작권 정보: https://creativecommons.org/licenses/by/4.0/ 애니메이션을 측정하는 것, 애니메이션 프레임에 관해 생각하는 방법, 그리고 전반적인 페이지 동작을 부드럽게 하는 것에 대해서 알아봅시다. 당신은 아마 페이지가 스크롤 중에나 애니메이션을 보여주는 도중에 “버벅”거리거나 “정지” 되는 것을 경험해 봤을 겁니다. 우리는 이런 경험들을 부드럽지 않다고 얘기하곤 하죠. 이런 유형의 문제들을 해결하기 위해서, 크롬 팀은 애니메이션 감지를 위한 실험 도구에 더 많은 지원을 추가하고, Chro.. Overview of OOP patterns implementation in JavaScript (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1495/js-design-patterns 저작권 정보: JavaScript에서의 OOP 패턴 구현 개요 이제 'Gang Of Four'에서 설명한 OOP의 설계 패턴을 살펴보고 JavaScript에서 구현되는 방식을 살펴보겠습니다. 디자인 패턴이란? 먼저 디자인 패턴의 진정한 정의를 이해해야 합니다. 소프트웨어 개발자는 어떤 방법으로든 코드를 작성할 수 있습니다. 단, 코드를 유지하는 방법에 큰 차이가 있습니다. 최대한 고려되어 작성된 코드는 아마추어보다 오래갈 것입니다. 따라서 올바른 코딩 스타일을 선택할 때 확장성이나 유.. 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)이 있습니다. 이는 구문 분석.. The Complete Guide to Lazy Loading Images - 2 (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://css-tricks.com/the-complete-guide-to-lazy-loading-images/ 저작권 정보: https://css-tricks.com Lazy Loading Images – The Complete Guide Lazy loading images that are not in the viewport improves initial page load performance and user experience. This is an in-depth guide to everything about lazy loading of images includi.. React XSS Guide:Examples and Prevention (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://www.stackhawk.com/blog/react-xss-guide-examples-and-prevention/ 저작권 정보: XSS(cross-site 스크립팅)가 무엇인지와 React 응용 프로그램에 대한 XSS 공격을 방지하는 방법을 이해합니다. 웹은 수년간 기술, 프레임워크, 복잡성 및 유틸리티 측면에서 크게 성장해 왔습니다.오늘날, 10억 명 이상의 사람들이 매일 수천 개의 웹사이트를 방문합니다.그 결과 인터넷에는 항상 사용자 자격 증명, 신용카드 상세 내역 등의 민감한 데이터가 넘쳐납니다. 따라서 개발자는 해커가 사용자의 데이터를 오용하기 위해 .. 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 정의 이제 모듈에 좀 더 친숙해졌으니, 이 섹션 제목의 개념들을 설명해보겠습니다. 모듈이 무엇인지 한 번 더 .. 이전 1 2 3 4 다음
