2024-03

📚 링크 & 읽을 거리

It’s Official, Apple Kills Web Apps in the EU

일부 개발자들은 iOS 17.4 베타버전부터 웹앱(PWA) 설치가 제대로 이뤄지지 않는 버그에 대한 리포팅을 하기 시작했으나, 이는 실제로 버그가 아닌 24/3월부터 시행되는 EU 디지털시장법(DMA)에 따른 애플의 의도적 기능의 제한으로 확인되었다.

[참고] 애플의 조치에 대한 설명요약

• Why don’t users in the EU have access to Home Screen web apps? (ORIGINAL 표기 항목의 노트 참고)

간략하게 요약하면, PWA의 시스템 기능(카메라, 마이크 등) 접근과 지원은 직접 구축된 iOS와 WebKit의 보안 아키텍처를 통해 이뤄져왔으나, DMA의 대체 브라우저 엔진 허용 등의 기준에 맞추기 위해 새로운 아키텍처 구축이 필요해졌다. 그러나 HSW의 낮은 채택률을 포함, 이는 현실적으로 어렵기 때문에 지원을 중단한다고 밝혔다.

이후, 애플의 조치에 대한 온라인 청원이 진행되었고, EU 또한 관련 조치에 대한 추가 조사를 진행하고 있다는 소식이 전해지기도 했었다.

• Apple’s decision to drop iPhone web apps comes under scrutiny in the EU

여러 일련의 상황들 때문인지는 알 수 없으나, 결국 애플은 3월 1일 Home Screen web app 설치 제한 결정을 철회한다고 다시 공지했다.

• Why don’t users in the EU have access to Home Screen web apps? (UPDATE 표기 항목의 노트 참고)

Interaction to Next Paint (INP)

INP는 3월 12일부터 새로운 Core Web Vitals 측정 지표로 포함되며, 기존의 FID(First Input Delay)를 대체(FID는 삭제될 예정) 하게 된다. 이는 FID가 프로그램의 반응성 측면을 나타내지만, 웹에서의 상호작용 측면을 포착하지는 못했기 때문이다.

INP는 사용자가 페이지 방문 전체 기간에 발생하는 모든 상호작용의 지연 시간을 관찰하고, 이에 대한 페이지의 전반적인 응답성을 평가하는 측정항목이다.

[데모] Interaction to Next Paint (INP) ⚡ Live Demo

JSR

JSR은 Deno 팀에서 새롭게 공개한 JavaScript/TypeScript 레지스트리다. npm의 슈퍼 셋으로 npm 대체제가 아니며, JSR 모듈은 모든 패키지 매니저와 기존의 node_modules에 설치되는 프로젝트와 호환된다.

몇 가지 특징들은 다음과 같다.

• 사용자 적합 버전 제공: JS 또는 TS 만으로 이뤄진 소스가 퍼블리싱 되더라도, JSR은 사용자에게 필요한 코드 버전을 사용하도록 제공
• JS 트랜스파일 및 Type Definition 제공:
  • 아직 지원되지 않지만 조만간 npm 생태계 대상으로 제공이 될 때, JSR은 트랜스파일된 JavaScript 코드와 Type Definition을 자동으로 제공
• 런타임 인식성:
  • 패키지 개발자가 단일 버전을 퍼블리싱 하더라도, 대상 런타임에 맞는 버전을 제공
• 자동 문서 생성: 퍼블리싱 된 코드를 통해 완벽하게 문서화를 자동으로 제공

[참고]

• JSR first impressions
• JSR: What We Know So Far About Deno’s New JavaScript Package Registry

Introducing SafeTest: A Novel Approach to Front End Testing

넷플릭스는 E2E 테스트 솔루션을 위해 Playwright, Jest/Vitest 및 React를 결합한 새로운 UI 테스트 라이브러리 SafeTest를 공개했다. 여러 UI 라이브러리 및 테스트 실행기와 함께 작동하며 강력한 보고 기능을 제공한다고 한다. 이 SafeTest는 넷플릭스에서 이미 사용 중이며 단위 테스트와 E2E 테스트의 장점을 결합하여 테스트 프로세스를 간소화하는 것을 목표로 하고 있다고 한다.

Designing better target sizes

타겟 크기(UI 요소 내에서 클릭, 터치, 탭 범위)는 사용자 경험에 직접적으로 영향을 주기 때문에 UI/UX 디자인에서도 중요한 요소 중 하나이다. 이 글에서는 타겟에 Fitts의 법칙을 적용하고, 적절한 주위 공간을 확보하고, 시각적인 피드백을 제공하면서 더 나은 사용자 경험을 주는 방법에 대해 소개하고 있다.

100 Unique Website Footer Design Inspirations

Footer 디자인의 영감을 주는 100가지 사이트를 소개한다.

Chromium. Web page rendering using Blink, CC and scheduler

Chromium 엔진 은 수많은 내부 메커니즘, 서브시스템 및 기타 엔진들로 구성된다.

이 글에서는 웹 페이지를 화면에 직접 구성하고 렌더링 하는 과정을 살펴보며, Blink 엔진, Chorme Composer(CC, 또는 콘텐츠 조합자), 작업 스케줄러의 동작을 다룬다.

React Will Be Compiled

React를 사용해 본 사람이라면 useMemo, useCallback 등의 memoization hooks의 중요성에 대해 잘 알 것이다. 이를 적절히 사용해야 원치 않는 rendering을 피해 성능 누수를 막을 수 있다. 하지만 React 입문자들은 어느 경우에 useMemo, useCallback을 적용해야 하는지 헷갈려 하기도 한다.

React 팀에서 Compiler를 만들고 있다고 한다. useMemo, useCallback 등의 성능 최적화 작업을 React Compiler가 컴파일 단계에서 자동으로 처리할 예정이라고 한다.

Frontend Application Security: Tips and Tricks

프런트엔드 애플리케이션 또한 보안이 중요하다.

프런트엔드 보안과 관련된 수많은 문제가 있지만, 이 글은 가장 일반적인 6개의 문제를 제시하고 어떤 식으로 보안 취약점이 발생하는지 설명한다.

보안 취약점이 왜 발생하는지 원인을 이해하고 이를 방지하기 위한 팁과 요령에 대해 살펴보자.

8 repos used by the top 1% of React devs

React 개발자 중 상위 1%가 GitHub star를 누른 저장소는 무엇일까? 오픈소스 기여도를 기반으로 상위 1%의 개발자가 저장소에 star를 표시할 가능성과 하위 50%의 개발자가 star를 표시하지 않을 가능성을 비교해서 추렸다고 한다. JSX에서 스타일을 간편하게 해주는 jsxstyle/jsxstyle, 코드 하이라이팅을 도와주는 wooorm/refractor, Jest에서 snapshot diff를 주는 jest-community/snapshot-diff 등을 살펴볼 수 있다.

🕹 튜토리얼

Syntax Highlighting code snippets with Prism and the Custom Highlight API

일반적으로 문법 강조(Syntax Highliter)를 적용하려면, 각 토큰들을 <span> 요소로 감싼 후 토큰 유형에 따라 적절한 스타일(클래스나 색상 등)을 적용하게 된다.

CSS Custom Highlight API와 토큰화를 위한 Prism.js를 사용하면 스타일링을 위해 DOM 트리를 여러 개의 <span>으로 뒤섞는 단계를 건너뛸 수 있다.

The New CSS Math: pow(), sqrt(), and exponential friends

CSS는 calc()과 같은 기존 함수들을 보완하기 위해 많은 새로운 Math 함수들이 추가되었다. 이 함수들은 모두 궁극적으로 숫자 값을 나타내지만, 작동 방식의 뉘앙스는 명확하지 않다.

이 글에서는 간단하게 다음의 Math 함수들을 소개하고 예제를 제공한다. 현시점에서 모든 모던 브라우저들에서 바로 사용이 가능하다.

• pow(): base 에 exponent를 제곱한 값을 반환
• sqrt(): 숫자의 제곱근을 반환
• exp(): x를 인수로 하는 e^x 값을 반환
• log(): 자연 로가리즘은 (e 를 기초) 의 수를 계산
• hypot(): 제곱합의 제곱근을 반환

line-height: pow(3, 2); /* 3 * 3 = 9 */
line-height: sqrt(9); /* 3 */
width: calc(100px * exp(1)); /* 100px * 2.718281828459045 = 217px */
width: calc(100px * log(7.389)); /* 200px */
width: hypot(30px, 40px); /* 50px */

📦 코드와 도구

htmz

htmz는 미니멀 HTML 마이크로 프레임워크로 어떠한 의존성 없이 플레인 HTML만을 사용해 페이지 내 요소에 다른 HTML을 로딩하는 기능을 제공한다.

• 어떻게 동작하나? htmz는 사실, htmz 이름을 갖는 <iframe>으로, <iframe>을 통해 리소스를 요청하고 로딩이 완료되면 onload 이벤트 핸들러를 통해 결괏값을 지정한 요소에 삽입한다.

<!-- 1. htmz 구성 -->
<iframe
  hidden
  name="htmz"
  onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>

<!-- 2. GET /flower.html 를 #my-element 에 삽입 --->
<a href="/flower.html#my-element" target="htmz">Flower</a>

openv0

openv0은 생성형 UI 컴포넌트 프레임워크로, 프롬프트(반복적인)를 통해 UI 컴포넌트를 생성하며, 라이브 프리뷰도 제공된다.

{JSON} Placeholder

프로토타입 또는 개발 테스트를 위한 페이크 JSON API를 제공한다. 6개 유형의 리소스를 제공하며, CRUD 테스트를 위한 모든 HTTP 메서드를 지원한다.

// 사용 예
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => response.json())
  .then((json) => console.log(json));

PGLite

import { PGlite } from '@electric-sql/pglite';

const db = new PGlite();
await db.query("select 'Hello world' as message;");

브라우저, Node.js 및 Bun에서 Postgres를 실행할 수 있게 해주는 TypeScript 라이브러리이다.

기존의 브라우저에서 실행되는 Postgres 프로젝트들과 다르게, 가상 리눅스 머신을 사용하지 않는 "Postgres in WASM"이다.

기타 종속성이 없으며, 용량은 3.7Mb(gzipped)로 부담스러울 수 있는 크기이다.

jQuery 4.0.0 beta

오랫동안 작업한 jQuery 4.0.0의 베타버전이 공개되었다.

주요 변경사항으로는

• IE 10 이하 브라우저에 대한 지원이 중단
• 구현 브라우저 지원 중단에 따른 번들 사이즈 감소
• Deprecated API들의 제거
• array push/sort 등 Javascript에 기본적으로 포함된 기능 제거
• jQuery 소스코드의 ESM 전환

등이 있다.