브라우저

Etag를 활용한 브라우저 리소스 캐싱

Etag 😎 ETag HTTP 응답 헤더는 특정 버전의 리소스를 식별하는 식별자이다. (보통 지문으로 비유된다) 서버는 각 리소스에 대해서 Etag를 생성하고 버전을 관리한다. 웹 서버가 내용을 확인하고 변하지 않았으면, 웹 서버로 full 요청을 보내지 않기 때문에, 캐쉬가 더 효율적이게 되고, 대역폭도 아낄 수 있게 해준다. 🍎 특정 URL의 리소스가 변경되었을 때 Etag가 변경되어 새로 생성된다. ETag 는 지문과 같은 역할을 하면서 다른 서버들이 추적하는 용도에 이용되기도 한다. ETag 를 비교하여 리소스가 서로 같은지의 여부를 빠르게 판단할 수 있지만, 서버에서 무기한으로 지속될 수 있도록 설정할 수도 있다. 👻 ETag는 주로 웹 캐시 관리에 사용되며, 캐시된 리소스가 여전히 유효한지 확..

브라우저 window.navigation 객체로 히스토리 관리하기

자바스크립트의 Window 객체는 브라우저 창이나 프레임을 나타내는 중요한 객체다. 이 객체는 다양한 속성과 메서드를 제공하며, 그 중 navigation 속성은 브라우저의 이력을 관리하고 탐색하는 데 사용된다. 특히, window.navigation.entries() 매서드는 기존 브라우저에서 보안 문제로 확인할 수 없었던 브라우저 히스토리를 배열로 반환해주는 매소드이다. window.navigation.entries() // (2) [NavigationHistoryEntry, NavigationHistoryEntry] NavigationHistoryEntry는 id, index, key, ondispose, sameDocument, url과 같은 중요한 정보들을 가지고 있다. 그 외에도 back, f..

HTML 작성 시 안티패턴들

HTML 작성 시 피해야 할 안티패턴들 🌈 이러한 패턴들은 코드의 가독성, 유지보수성 및 웹 접근성을 저해할 가능성이 있다. 테이블 레이아웃 테이블 요소를 사용하여 레이아웃을 구성하는 것은 지양해야 한다. 🐳 대신, CSS를 사용하여 레이아웃을 조정하는 것이 권장된다. 테이블 레이아웃은 가독성을 해치고 스크린 리더와 모바일 기기 접근성을 악화시킬 수 있다. 인라인 스타일 HTML 요소 내에 직접 스타일을 적용하는 것보다는 외부 CSS 파일을 사용하여 스타일링하는 것이 좋다. 인라인 스타일은 코드 유지보수를 어렵게 만들 수 있다. 문자 창조 순서 (Character Entity References) 사용 예전에는 특수 문자를 표현하기 위해 문자 창조 순서를 사용하는 경우가 많았다. 하지만 이제는 대부분의 ..

URLSearchParams로 Url Query String 가져오기

바닐라 자바스크립트로 URL의 쿼리 스트링을 가져오는 방법을 알아보았다. React-Router-Dom이나 Next에서는 해당 기능에 대한 훅이 존재하지만, 바닐라 자바스크립트로도 간단히 이를 구현할 수 있다. 우선, window.location.search으로 URL에서 쿼리만 가져올 수 있다. console.log(window.location.search); // '?search=hihihi' 그리고 해당 String을 URLSearchParams의 인자로 전달하면, key-value의 형태로 값을 구조화할 수 있다. const searchParams = new URLSearchParams(window.location.search); for (const [key, value] of searchPara..

import와 require의 차이

⚽️ import (정적 로딩) import 구문은 ES6(ECMAScript 2015)부터 도입된 정적인 모듈 로딩 구문이다. import 구문은 모듈을 정적으로 로딩하며, 코드가 실행되기 전에 모듈 로딩이 이루어진다. 따라서 import 구문은 항상 모듈 로딩을 가장 위로 올려서 먼저 실행되고, 모듈 로딩은 브라우저 환경에서는 비동기적으로 이루어진다. import는 필요한 부분만 가져올 수 있기 때문에 성능 최적화에 있어서 require보다 뛰어나다. (트리 쉐이킹) // 정적 로딩 (ES6) import { add } from './math'; 🏐 require (동적 로딩) require 구문은 Node.js에서 사용되는 CommonJS 모듈 시스템의 모듈 로딩 구문이다. require 구문은 동..

animation 성능 향상 (requestAnimationFrame)

reflow, repaint로 인한 성능저하를 막기 위해서 GPU를 사용하여 애니메이션을 작업하는 것이 좋다. GPU를 사용하는 편이 더 부드러운 애니메이션을 보여줄 수 있기 때문이다. (CPU보다 더 많은 core를 가지기에 단순 작업에 적합하다 / GPU의 하드웨어 가속 기능) 그 방법중 하나인 requestAnimationFrame 메서드에 대해서 알아보았다. 원이 좌우로 이동하는 requestAnimationFrame 예제이다. https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame Window: requestAnimationFrame() method - Web API | MDN 화면에 애니메이션을 업데이트할 준비가 될..

브라우저 인터넷 연결 확인하기 (with Javascript, React 커스텀 훅)

브라우저가 인터넷에 연결되어 있는지는 기본적으로 navigator.onLine 변수를 확인할 수 있다. boolean값으로 인터넷에 연결되어 있는지 확인할 수 있다. 다만, 지속적으로 브라우저가 인터넷에 연결되어있는지 확인하기 위해서는 이벤트 핸들러의 연결이 필요하다. 브라우저에서 지속적으로 인터넷 연결을 확인하는 방법으로 eventListener를 사용할 수 있다. 다음과 같은 간단한 코드를 통해서 인터넷 연결을 확인할 수 있다. window.addEventListener("online", () => console.log("ONLINE! 🐥")); window.addEventListener("offline", () => console.log("OFFLINE... 😿")); 콘솔창에 위의 코드를 입력하고..

HTML 화면 스크린샷 찍기 (html2canvas)

사용자의 브라우저에 보이는 HTML을 스크린샷 찍을 수 있는 방법을 기록하기로 하였다. html2canvas 라는 라이브러리를 사용하여 이를 간단히 구현할 수 있다. npm install html2canvas 함수를 작성하여 기능을 구현해보자면 다음과 같이 작성할 수 있다. import html2canvas from 'html2canvas' ... const copyElement = () => { const root = document.querySelector('#copy-image-div') as HTMLElement if (root) { html2canvas(root, { allowTaint: true }).then((canvas) => { document.querySelector('#copy-roo..