웹 성능 최적화를 위한 Critical CSS with 예제

웹 페이지의 로딩 속도는 사용자 경험과 검색 엔진 순위에 매우 중요한 영향을 미친다. 특히 모바일 기기에서의 웹 사용이 늘어나면서 빠른 페이지 로딩이 더욱 중요해졌다. 만약 당신이 CSS 파일을 불러오면, 이때 렌더링은 멈추게 된다.따라서, 초기에 중요한 CSS와 중요하지 않은 CSS를 구분하여 중요한 CSS를 먼제 제공하고 비동기적으로 중요하지 않은 CSS를 제공하면 더 빠른 웹페이지 로딩이 가능하다. 👻 CSS는 렌더링 차단 리소스: 브라우저는 페이지를 표시하기 전에 CSS 파일을 다운로드하고 파싱해야 한다. 👻 때문에 CSS 파일이 크거나 네트워크 상태가 좋지 않은 경우 CSS 파일을 요청하면 웹페이지를 렌더링하는 데 걸리는 시간이 크게 늘어날 수 있다. 즉, Critical CSS는 웹 페이지..

• format_list_bulleted 기타
• · 2024. 5. 1.
• textsms

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

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

• format_list_bulleted 기타
• · 2024. 4. 15.
• textsms

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

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

• format_list_bulleted JavaScript
• · 2024. 4. 7.
• textsms

TypeScript에서 enum 사용하기: const enum vs as const 객체

TypeScript에서 열거형(enum)은 선호되지 않는다. 어째서일까? TypeScript에서 열거형의 데이터를 표현하는 방법은 여러 가지가 있지만, 최신 버전의 TypeScript에서는 as const 객체를 사용하는 것이 일반적이다. 다만, 다른 언어에서 많이 사용되는 enum 방식의 사용은 공식문서에서도 추천되지 않는데, 이번 글에서는 이 두 가지 방법의 차이와 각각의 장단점을 알아보고 어째서 enum이 추천되지 않는 방식인지 알아보았다. const enum과 일반 enum의 차이 🙌 enum을 표현하는데도 그냥 enum과 const enum이 존재하며 차이점이 있다. 일반 enum은 컴파일된 JavaScript 코드에서도 그대로 존재하며(번들링 사이즈 증가), reverse mapping을 지원..

• format_list_bulleted TypeScript
• · 2024. 4. 1.
• textsms

TypeScript에서 객체 타입 체크하는 방법: in 키워드 활용하기

타입스크립트에서 객체의 타입을 체크하는 것은 종종 필요한 작업이다. 특히, Bird나 Human과 같은 특정한 타입(type alias / interface)을 가진 객체를 다룰 때는 더욱 중요한데, 타입스크립트에서 객체의 타입을 체크하는 방법 중 하나인 `in` 키워드에 대해 알아보았다. typeof로 타입 체크하기 JavaScript에서는 `typeof` 연산자를 사용하여 변수의 데이터 타입을 확인할 수 있다. 일반적으로 이 방법은 원시 타입 (예: 문자열, 숫자, boolean)을 체크할 때 사용된다. 🤷‍♂️ 하지만 객체의 경우 `typeof`는 단순히 `'object'`를 반환하므로 객체의 구체적인 타입을 알 수 없기에 유효하지 않다. const myObject: Bird | Human = ge..

• format_list_bulleted TypeScript
• · 2024. 3. 16.
• textsms

date-fns를 사용하면 간단하게 날짜를 컨트롤할 수 있다.

자바스크립트로 날짜를 다루기 위해서 Date() 객체를 사용한다. 그러나, 다소 불편하고 답답한 사용법 때문에 dayJS나 moment같은 라이브러리를 사용하기도 하는데, 이번에는 날짜를 컨트롤 할 때 불편함을 줄여주는 date-fns라는 라이브러리에 대해서 소개하고자 한다. https://date-fns.org/ Modern JavaScript Date Utility Library date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. date-fns.org date-fns는 node 환경과 브라우저 환경에서 모두 안정적으..

• format_list_bulleted Node
• · 2024. 3. 3.
• textsms