TOAST UI

Applications

Chart Editor Grid Calendar Image-editor

Components

App Loader Auto Complete Color Picker Context Menu Date Picker Pagination Rolling Select Box Time Picker Tree

Tools

TOAST UI Doc ESLint Config Release Note

FE Guide

Posts

월간 크롬 이슈 리포트 2023년 7월호

들어가며

프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다.

💡 각 항목은 Chrome Platform Status의 Roadmap과 한 달간의 blink-dev 활동 요약을 바탕으로 정리했다.

💡 각 항목의 🚫는 지원 중단 및 제거(Removed), ⚠️는 지원 중단(Deprecated), ✅는 새로운 기능(Enabled by default), 🧪는 개발자 미리 보기(Trial)를 의미한다.

💡 각 항목 중 기존 서비스에 미치는 영향이 크다고 판단한 항목은 소제목 뒤에 📌 표시를 했다.

💡 지원 중단 및 제거(🚫), 지원 중단(⚠️) 외의 항목은 공유 가치가 있다고 판단한 경우에만 포함했다.

💡 개발자 미리 보기(🧪)는 chrome://flags에서 Experimental Web Platform features 항목을 활성화해 사용할 수 있다.

💡 각 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 Chrome Platform Status를 그대로 인용했다.

Chrome 116
- ✅ CSS Motion Path
- ✅ display, content-visibility의 애니메이션 사용 지원
- ✅ Permission Policy Origins의 와일드카드 기능 확장
- 🧪 SVGUseElement의 data: URL 지원 중단 미리 보기
- 🧪 Cross-Origin-Opener-Policy: restrict-properties 미리 보기
- 🗓️ 배포 예정일
Chrome 117
- ⚠️ CSS -webkit-highlight 속성 지원 중단
- ⚠️ SHA-1 서버 전자 서명 지원 중단 📌
- ⚠️ 비표준 appearance 속성값 지원 중단 📌
- ⚠️ RTCPeerConnection.getStats() 콜백 방식 지원 중단
- ✅ CSS Anchor 배치
- ✅ CSS @starting-style 규칙
- ✅ Iterator 메서드
- ✅ CSS 불연속 속성의 Transition 지원
- 🗓️ 배포 예정일
Chrome 118
- ✅ 스크롤 영역 포커스
- ✅ CSS @scope 규칙
- 🗓️ 배포 예정일
Chrome NEXT
- 🚫 [Chrome 127] Mutation 이벤트 제거 📌
- ⚠️ [Chrome 119] 비표준 shadowroot 속성 지원 중단
- ⚠️ [Chrome 119] WebSQL 지원 중단
- ⚠️ [Chrome LATER] unload 이벤트 지원 중단
- ✅ [Chrome LATER] 내부망에 대한 하위 리소스 요청 규칙 적용

1. Chrome 116

✅ CSS Motion Path

CSS에 offset-path 속성에 사용할 수 있는 함수를 추가한다. offset-path는 offset의 하위 속성으로, 해당 요소가 움직일 경로를 지정하는 속성이다.

motion 예제

(출처: Motion Path Module Level 1)

기존에는 path()로 사용하는 경우가 대부분이었으나, 업데이트 이후에는 각도로 경로를 지정하는 ray(), 원을 그리는 circle(), polygon() 등 다양한 함수를 지원할 예정이다.

circle 예제

(출처: Motion Path Module Level 1)

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 개발 중
Safari: 개발 중
웹 개발자: 의견 없음

참조

✅ `display`, `content-visibility`의 애니메이션 사용 지원

display 속성 및 content-visibility 속성을 CSS 애니메이션에서 사용할 수 있도록 변경한다.

@keyframes slideOut {
  from {
    display: block;
  }
  to {
    transform: translateX(40px);
    opacity: 0;
  }
}

.hide {
  animation: slideOut 0.2s;
  display: none;
}

위 예시에서 hide 클래스를 지정한 요소는 애니메이션 없이 바로 화면에서 사라진다. display 속성은 opacity 등의 속성과 달리 중간값을 연산할 수 없는 불연속(discrete) 속성이다. 애니메이션에서 display 속성 자체를 지원하지 않아 display: block; 구문을 무시한 것이다.

업데이트 이후에는 display 및 content-visibility 속성의 중간값을 none | hidden이 아닌 특정 값으로 연산해 해당 속성의 애니메이션 사용을 지원할 예정이다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 의견 없음
웹 개발자: 긍정적

참조

✅ Permission Policy Origins의 와일드카드 기능 확장

Permissions Policy는 특정 웹 사이트의 API를 제한 또는 허용하는 데 쓰인다.

Permissions-Policy: geolocation=()

위 HTTP 헤더는 해당 사이트에서 Geolocation API의 사용을 막는다. Permissions Policy는 앞선 예처럼 HTTP 헤더로 사용하거나, <iframe>의 allow 속성으로 사용할 수 있다.

<iframe src="https://example.com" allow="geolocation 'none'"></iframe>

Permissions Policy는 특정 사이트의 URL을 명시해 사이트 범위를 제한할 수도 있다.

<iframe
  src="https://example.com"
  allow="picture-in-picture 'self' https://a.example.com https://b.example.com"
></iframe>

위 예시는 <origin>인 https://example.com과 https://a.example.com, https://b.example.com에서 PIP API를 허용한다. 하지만 c, b 서브 도메인을 추가하려면 아래 예시처럼 모든 URL을 반복해 적거나, 모든 URL을 허용하는 *을 사용해야 한다.

<iframe
  src="https://example.com"
  allow="picture-in-picture 'self' https://a.example.com https://b.example.com https://c.example.com https://d.example.com"
></iframe>

업데이트 이후에는 위 같은 경우에 와일드카드를 사용해 여러 URL을 한 번에 명시할 수 있다.

<iframe src="https://example.com" allow="picture-in-picture 'self' https://*.example.com"></iframe>

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 의견 없음
웹 개발자: 의견 없음

참조

🧪 `SVGUseElement`의 `data:` URL 지원 중단 미리 보기

SVG의 <use>를 사용하면 외부 SVG 이미지를 불러와 현재 문서에 붙여넣을 수 있다. 강력한 기능이나 보안 문제가 있는 만큼 <use>에는 동일 출처 정책(same-origin policy)이 적용된다. 하지만 data: URL을 사용하는 경우는 항상 동일 출처로 취급하며, 일부 보안 모듈을 거치지 않는다.

기존에 data: URL을 사용했다면 해당 이미지를 동일 출처의 .svg 이미지로 변환하거나, 인라인에서 직접 이미지를 관리하는 방법으로 전환하기를 권장한다.

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#circle" />
</svg>

const url = URL.createObjectURL(blob);
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttribute('href', `${url}#circle`);
svg.appendChild(use);
document.body.appendChild(svg);

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 긍정적
Safari: 긍정적
웹 개발자: 의견 없음

참조

🧪 Cross-Origin-Opener-Policy: restrict-properties 미리 보기

HTTP의 Cross-Origin-Opener-Policy(이하 COOP) 헤더는 웹 사이트가 출처(origin)별로 격리된 공간에서 동작하도록 한다. 예를 들어 아래 https://a.com 사이트의 코드가 아래와 같다고 해 보자.

Cross-Origin-Opener-Policy: same-origin

window.open('https://b.com', '_blank');

https://b.com에서는 window.opener로 상위 문서에 접근할 수 없다. https://a.com가 Cross-Origin-Opener-Policy: same-origin 규칙을 적용해 같은 출처를 가진 문서끼리 별도로 격리된 공간에서 동작하기 때문이다.

하지만 위 규칙은 제3자 로그인 또는 결제를 적용할 때 걸림돌이 되기 쉽다. COOP는 단순히 상위 문서의 접근 뿐만 아니라 postMessage()의 사용도 제한하기 때문이다.

// https://a.com
window.postMessage('hello there!', 'https://b.com'); // not working

Cross-Origin-Opener-Policy: restrict-properties를 사용하면 COOP를 적용하면서 동시에 postMessage() 등의 제한된 API를 사용할 수 있다.

Cross-Origin-Opener-Policy: restrict-properties

// https://a.com
console.log(crossOriginIsolated); // true
window.postMessage('hello there!', 'https://b.com'); // works!

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 의견 없음
웹 개발자: 의견 없음

참조

🗓️ 배포 예정일

Chrome 116은 2023년 8월 9일에 정식 배포 예정이다. 7월 19일부터 7월 27일 사이에 Chrome 베타 버전에서 해당 기능을 미리 확인해 볼 수 있다.

2. Chrome 117

⚠️ CSS -webkit-highlight 속성 지원 중단

CSS의 -webkit-highlight 속성은 특정 텍스트를 강조하기 위해 고안된 속성이다. 하지만 이 속성은 표준화되지 못했고, 2014년 WebKit 엔진도 이 속성을 제거하였다.

현재 크로미움도 이 속성에 대해 아무런 시각적 표현을 노출하지 않아 해당 속성을 지원 중단한다. 아직 표준은 아니나, 시각적 표현이 있는 대체 방안으로 Highlight Pseudo-elements를 추천한다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 해당 없음
Safari: 해당 없음
웹 개발자: 의견 없음

참조

⚠️ SHA-1 서버 전자 서명 지원 중단 📌

SHA(Secure Hash Algorithm)는 해시 함수의 집합이다. 그 중에서도 SHA-1은 과거 인증서와 전자 서명에 가장 많이 사용하던 해싱 알고리즘으로,1995년에 처음 등장해 2000년대부터 2010년대 초반까지 표준으로 널리 사용했다. 하지만 취약점이 제기되어 2011년에 SHA-2가 새로운 표준 해싱 알고리즘이 되었고, 현재 대부분의 최신 OS, 브라우저에서 SHA-1 알고리즘을 지원하지 않는다.

Chrome도 이미 과거에 SHA-1을 사용한 서버 인증서를 지원 중단했다. Chrome 117부터는 SHA-1을 사용한 서버 전자 서명을 거부할 예정이다. SHA-1을 사용하는 클라이언트의 인증서나 전자 서명은 아직 지원 중단 일정이 없어, 보안을 강화하고자 한다면 서버에서 직접 SHA-1을 사용한 인증서를 거부 처리해야 한다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 긍정적
Safari: 긍정적
웹 개발자: 의견 없음

참조

⚠️ 비표준 `appearance` 속성값 지원 중단 📌

CSS의 appearance 속성은 네이티브 UI의 외형을 변경할 때 사용한다. 기존에 Chrome은 appearance와 -webkit-appearance 속성의 값으로 표준에 없는 값들도 다수 지원했으나, Chrome 117부터는 비표준 속성값을 지원 중단할 예정이다. 아래 속성은 비표준으로 업데이트 이후 사용할 수 없는 속성값이다.

inner-spin-button
media-slider
media-sliderthumb
media-volume-slider
media-volume-sliderthumb
push-button
searchfield-cancel-button
slider-horizontal
sliderthumb-horizontal
sliderthumb-vertical
square-button

<input type="range">에 사용하는 slider-vertical 값만 아직 대체 방안 적용 전이라 대상에서 제외된다. 해당 속성값에 의존하는 UI가 있다면 직접 구현하는 것으로 대체가 필요하다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 배포 완료
Safari: 의견 없음
웹 개발자: 의견 없음

참조

⚠️ `RTCPeerConnection.getStats()` 콜백 방식 지원 중단

RTCPeerConnection.getStats()는 해당 오디오나 비디오 연결에 대한 통계 자료를 반환하는 API다. 현재 Chrome에서 이 API는 프로미스를 반환하는 최신 버전과, 콜백을 사용하는 구버전 두 가지로 나뉜다.

myPeerConnection.getStats(); // Promise 버전
myPeerConnection.getStats(null, onSuccess, onFailure); // 구버전, Promise 반환 X

콜백 방식은 모던 자바스크립트와 어울리지 않고, 표준 스펙 문서도 없어 장기적으로 지원을 중단할 예정이다. Chrome 113 이상에서는 콜백 방식 사용 시 콘솔에 경고를 노출하며, chrome://flags에서 지원 중단 환경을 미리 체험할 수 있다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 해당 없음
Safari: 해당 없음
웹 개발자: 의견 없음

참조

✅ CSS Anchor 배치

특정 요소에 기반해 현재 요소를 배치할 수 있는 Anchor 배치 모듈을 추가한다. 특히 툴팁 등을 구현할 때 유용한데, absolute 배치와 비슷하나 DOM 구조에 구애 받지 않고 툴팁을 구현할 수 있다는 점이 다르다.

.anchor {
  anchor-name: --tooltip;
}

.tooltip {
  position: fixed;
  anchor-default: --tooltip;
  bottom: anchor(auto);
  left: anchor(right);
  min-width: anchor-size(width);
}

예제처럼 코드를 작성하면 .tooltip은 .anchor 요소의 오른쪽 위에 나타난다. 만약 .tooltip이 브라우저 화면을 벗어난다면 bottom: anchor(auto)에 의해 .anchor 요소의 아래에 배치된다.

anchor-name에는 해당 Anchor의 이름을 선언하며, 해당 Anchor에 배치할 요소에서 이 이름으로 해당 요소의 위치나 크기 등에 접근할 수 있다. anchor() 함수는 해당 Anchor의 위치값을, anchor-size()는 해당 Anchor의 크기값을 반환하는 함수로, 기본적으로 아래처럼 Anchor의 이름을 인자로 받는다.

.tooltip {
  bottom: anchor(--tooltip auto);
  max-width: anchor-size(--tooltip width);
}

만약 해당 요소에 anchor-default를 설정했다면 첫 번째 인자를 생략할 수 있다.

.tooltip {
  anchor-default: --tooltip;
  bottom: anchor(auto);
  max-width: anchor-size(width);
}

@position-fallback 규칙을 선언하면 해당 요소가 브라우저 화면을 벗어날 경우에 대한 스타일을 정의할 수 있다.

@position-fallback --tooltip-position {
  @try {
    top: anchor(--tooltip bottom);
    left: anchor(--tooltip left);
  }

  @try {
    bottom: anchor(--tooltip top);
    left: anchor(--tooltip left);
  }

  @try {
    top: anchor(--tooltip bottom);
    right: anchor(--tooltip right);
  }
}

#tooltip {
  position: fixed;
  position-fallback: --tooltip-position;
}

위 코드는 먼저 Anchor의 왼쪽 아래에 배치를 시도하며, 만약 화면을 벗어나면 Anchor의 왼쪽 위, 마지막으로 Anchor에 오른쪽 아래에 #tooltip을 배치하라는 의미이다.

이 기능은 아직 초안으로 세세한 스펙이나 동작이 바뀔 수 있음에 주의하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 긍정적
Safari: 의견 없음
웹 개발자: 매우 긍정적

참조

✅ CSS @starting-style 규칙

CSS에 @starting-style 규칙을 추가한다. 기존 CSS 트랜지션은 요소가 처음 그려질 때나 display 속성이 none에서 다른 값으로 바뀔 때는 트랜지션을 적용하지 않는다. 현재는 이런 애니메이션을 적용하려면 requestAnimationFrame를 사용하는 등 스크립트 처리가 필요하다.

.box {
  transition: background-color 0.3s;
  background-color: pink;
}

.box-entered {
  background-color: lime;
}

window.requestAnimationFrame(() => {
  document.querySelector('.box').classList.add('.box-entered');
});

Chrome 117에서 추가 예정인 @starting-style을 사용하면 간편하게 요소의 초기 스타일을 지정할 수 있다.

.box {
  transition: background-color 0.3s;
  background-color: lime;
}

@starting-style {
  .box {
    background-color: pink;
  }
}

위 코드에서 .box는 앞선 예시와 마찬가지로 요소가 처음 그려질 때 pink에서 lime으로 배경색이 전환된다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 의견 없음
웹 개발자: 의견 없음

참조

✅ Iterator 메서드

Iterator 객체에 prototype 및 각종 메서드를 추가한다. 이번에 추가되는 메서드는 .map(mapperFn), .filter(filtererFn), .find(fn), .forEach(fn) 등으로 기존에 배열에서 사용하던 메서드와 기능적으로 유사하다.

function* naturals() {
  let i = 0;
  while (i < 10) {
    yield i;
    i += 1;
  }
}

const mapResult = naturals().map((v) => v * 10);
mapResult.next(); // {value: 0, done: false}
mapResult.next(); // {value: 10, done: false}
mapResult.next(); // {value: 20, done: false}

const filterResult = naturals().filter((v) => v % 2 === 0);
filterResult.next(); // {value: 0, done: false}
filterResult.next(); // {value: 2, done: false}
filterResult.next(); // {value: 4, done: false}

naturals().find((v) => v > 1); // 2

naturals().forEach((v) => {
  console.log(v);
});
// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 긍정적
Safari: 긍정적
웹 개발자: 긍정적

참조

✅ CSS 불연속 속성의 Transition 지원

CSS 불연속(discrete) 속성이란 중간값을 연산할 수 없는 display, visibility 등을 말한다. 이들은 중간값을 연산할 수 없어 transition 속성과 함께 사용할 수 없었다.

기존에는 특정 애니메이션이 끝난 후 display: none; 속성을 적용하려면 자바스크립트로 직접 스타일을 변경해야 했다.

.hide {
  transition: opacity 0.3s;
  opacity: 0;
  /* display: none; */
}

const target = document.querySelector('#target');

target.addEventListener('transitionend', () => {
  target.style.setProperty('display', 'none');
});

target.classList.add('hide');

Chrome 117부터는 transition-property 속성에 불연속 속성을 사용을 지원할 예정이다.

.hide {
  transition: opacity 0.3s, display 0.3s;
  opacity: 0;
  display: none;
}

const target = document.querySelector('#target');

target.classList.add('hide');

주의해야 할 점은 all은 여전히 불연속 속성을 포함하지 않는다는 점이다. 불연속 속성을 transition의 대상으로 지정하려면 해당 속성을 명시적으로 transition-property에 작성해야 한다.

/* 애니메이션 없이 바로 사라진다. */
.hide {
  transition: all 0.3s;
  opacity: 0;
  display: none;
}

/* 0.3초 후 사라진다. */
.hide {
  transition: display 0.3s, opacity 0.3s;
  opacity: 0;
  display: none;
}

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 의견 없음
웹 개발자: 의견 없음

참조

🗓️ 배포 예정일

Chrome 117은 2023년 9월 6일에 정식 배포 예정이다. 8월 16일부터 8월 24일 사이에 Chrome 베타 버전에서 해당 기능을 미리 확인해 볼 수 있다.

3. Chrome 118

✅ 스크롤 영역 포커스

스크롤 가능한 요소에 tabindex가 없더라도 자동으로 초점을 맞추도록 변경한다. 이는 마우스가 없는 환경에서 접근성을 높이기 위한 조치로, 스크롤 영역에 초점을 맞추고 화살표 키로 요소를 스크롤할 수 있다.

다만 실제 페이지에서 이 기능이 동작하는 경우는 찾기 어려울 것으로 보인다. 해당 기능은 자식 요소에 초점을 맞출 수 있는 요소가 없을 때만 적용되기 때문이다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 배포 완료
Safari: 의견 없음
웹 개발자: 긍정적

참조

Feature: Keyboard-focusable scroll containers

✅ CSS `@scope` 규칙

CSS 표준으로 제안 중인 @scope 규칙을 적용한다. @scope는 CSS 규칙을 특정 구간에만 적용할 수 있는 문법으로, CSS에 스코프라는 새로운 개념이 생기는 셈이다.

@scope 규칙을 단순하게 사용하면 다음과 같다.

@scope (.red-theme) {
  span {
    color: red;
  }
}

@scope (.blue-theme) {
  span {
    color: blue;
  }
}

위 문법은 아래처럼 일반 선택자로 구현할 수도 있으나, 꽤 큰 차이가 있다.

.red-theme span {
  color: red;
}

.blue-theme span {
  color: blue;
}

예를 들어 아래와 같은 페이지가 있다고 해 보자.

<div class="blue-theme">
  <span>this is blue-theme</span>

  <div class="red-theme">
    <span>this is red-theme</span>
  </div>
</div>

일반 선택자로 구현한 스타일을 적용하면 두 <span> 텍스트는 모두 파란색으로 나타난다. .blue-theme span과 .red-theme span의 CSS 우선 순위가 같아 나중에 선언한 .blue-theme span의 스타일이 .red-theme span의 스타일을 덮어씌우기 때문이다.

@scope 규칙으로 작성한 스타일을 적용하면 의도대로 첫 번째 <span>은 파란색, 두 번째 <span>은 빨간색으로 나타난다. @scope는 @scope에 선언한 상위 스코프에 해당 요소가 가까울 수록 우선 순위가 높다. 때문에 두 번째 <span>에 스타일을 적용할 때 @scope (.blue-theme)에서 선언한 규칙보다 @scope (.red-theme)에서 선언한 규칙이 우선 순위가 더 높아 color: red; 스타일이 color: blue; 스타일을 덮어 씌운다.

또한 @scope A to B 규칙을 사용하면 아래처럼 스타일의 적용 범위를 설정할 수 있고,

@scope (.article) to (.comment) {
  p {
    margin: 12px 0;
  }
}

& 선택자 또는 :scope 가상 선택자를 이용하면 현재 상위 스코프 요소를 선택할 수 있다.

@scope (.light-theme) {
  & {
    background-color: white;
  }
}

@scope (.dark-theme) {
  :scope {
    background-color: black;
  }
}

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 검토 중
Safari: 긍정적
웹 개발자: 긍정적

참조

🗓️ 배포 예정일

Chrome 118은 2023년 10월 4일에 정식 배포 예정이다. 9월 13일부터 9월 21일 사이에 Chrome 베타 버전에서 해당 기능을 미리 확인해 볼 수 있다.

4. Chrome NEXT

🚫 [Chrome 127] Mutation 이벤트 제거 📌

MutationEvent는 DOM 요소에 변경이 있을 때 발생하는 이벤트로, DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved 등이 있다.

element.addEventListener(
  'DOMNodeInserted',
  (event) => {
    console.log('새로운 요소를 감지했습니다.', event.srcElement);
  },
  false
);

element.append(document.createElement('span'));

// 새로운 요소를 감지했습니다. <span></span>

이 이벤트를 사용하면 DOM 변경을 추적할 수 있으나, 설계상 결함과 치명적인 성능 문제를 이유로 2011년에 표준에서 퇴출되었다.

2012년에 더 안정적인 MutationObserver가 등장하여 현재 대부분의 브라우저에서 이 이벤트 사용 시 콘솔에 경고를 노출한다. 아직 MutationEvent를 사용한다면 MutationObserver로 전환할 것을 적극 권장한다.

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      console.log('새로운 요소를 감지했습니다.', ...mutation.addedNodes);
    }
  }
});

observer.observe(element, { childList: true });
element.append(document.createElement('span'));

// 새로운 요소를 감지했습니다. <span></span>

Chrome 115부터는 Mutation 이벤트 사용 시 좀 더 강력한 경고를 노출하며, 내년 7월 말 배포 예정인 Chrome 127부터는 아예 해당 API를 제거할 예정이다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 긍정적
Safari: 의견 없음
웹 개발자: 의견 없음

참조

⚠️ [Chrome 119] 비표준 `shadowroot` 속성 지원 중단

선언적 Shadow DOM은 <template> 요소에 shadowroot 속성을 지정해 템플릿에서 직접 Shadow DOM을 활성화할 수 있는 기능이다. 표준에서 이 속성에 대한 이름을 shadowrootmode로 변경함에 따라 기존 shadowroot 속성을 지원 중단한다. shadowroot는 Chrome에서 그대로 동작하나, Chrome 111에서 추가된 스트리밍 기능을 사용할 수 없다. shadowrootmode는 Chrome 111 이상에서 사용할 수 있으며, 다른 브라우저에서도 지원 예정이므로 shadowrootmode 속성을 사용하는 것이 좋다.

<host-element>
- <template shadowroot="open">
+ <template shadowrootmode="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Chrome 112에서 shadowroot 속성에 대한 지원 중단 미리 보기를 추가했다. Chrome 112 이상에서 chrome://flags에서 해당 기능을 활성화해 속성 지원 중단을 미리 체험할 수 있다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 의견 없음
웹 개발자: 의견 없음

참조

⚠️ [Chrome 119] WebSQL 지원 중단

WebSQL은 과거 브라우저에 데이터를 저장하기 위해 제안된 API로, Webkit 기반의 일부 브라우저에서만 사용이 가능했다. 하지만 이 프로젝트는 보안 구현 등의 어려움으로 1년 만에 폐기되었고, Webkit도 2019년에 이 API를 지원 중단했다.

이미 대부분의 브라우저에서 Web Storage API, IndexedDB API 같은 최신 저장소 API를 사용할 수 있어 이 API를 지원 중단한다. 이미 Chrome 97에서 제3자 컨텍스트에서 WebSQL을 제거했으며, Chrome 105에서는 보안 연결을 사용하지 않는 페이지에서의 사용을 지원 중단했다.

웹에서 SQL을 계속 사용하려면 웹 어셈블리를 이용한 SQLite가 공식 대안이므로 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 해당 없음
Safari: 배포 완료
웹 개발자: 의견 없음

참조

⚠️ [Chrome LATER] unload 이벤트 지원 중단

unload 이벤트는 해당 문서 또는 자식 문서를 해제할 때 발생하는 이벤트이다. 이 이벤트를 이용하면 사용자가 페이지를 종료하기 전에 특정 동작을 실행할 수 있다.

window.addEventListener('unload', (event) => {
  navigator.sendBeacon('/api/log', 'unload!');
});

하지만 unload 이벤트는 beforeunload 이벤트와 달리 기본 동작을 취소(event.preventDefault())할 수 없어 이벤트가 아예 발생하지 않기도 한다. W3C의 통계에 따르면 unload 이벤트가 제대로 발생하는 경우가 Chrome 데스크탑에서는 95%, 모바일에서는 57% ~ 68% 정도로, 이는 모바일 환경의 특성상 브라우저가 아닌 다른 앱을 보다가 브라우저 자체를 종료하는 경우가 빈번하기 때문이다.

이 항목은 제안 중으로 적용 여부는 확실하지 않으나, 기존에 unload 이벤트에 의존하는 코드가 있다면 관심을 가지고 지켜볼 필요가 있다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 의견 없음
웹 개발자: 긍정적

참조

✅ [Chrome LATER] 내부망에 대한 하위 리소스 요청 규칙 적용

내부망 접근 규칙(Local Network Access) 적용의 일부로 하위 리소스(.js, .css 등)를 요청할 때 내부망(사설 IP, localhost)에 대한 접근 제한을 검토 중이다. 정식 적용 일정은 불투명하나, 미리 보기로 일부 기능을 체험할 수 있다.

공개 웹 사이트의 내부망 하위 리소스 접근 제한

공개 웹 사이트(공개 IP로 접근 가능한 사이트)에서 내부망에 하위 리소스(.js, .css 등) 요청 시 반드시 보안 컨텍스트(HTTPS)를 사용하도록 제한한다. 내부망의 하위 리소스에 접근하려면 보안 컨텍스트를 사용하도록 변경해야 한다.

Chrome 86 이상의 chrome://flags에서 해당 기능을 활성화해 접근 제한을 미리 체험할 수 있다.

내부망에 하위 리소스 요청 시 사전 요청 발송

내부망에 하위 리소스 요청 시 사전 요청을 보내 연결 허용 여부를 먼저 묻는다. 현재는 사전 요청 실패 시 개발자 콘솔에 경고만 노출한다.

참조

#browser

#toastui

이원표2023.07.20

Back to list

Applications

Chart Editor Grid Calendar Image-editor

Components

App Loader Auto Complete Color Picker Context Menu Date Picker Pagination Rolling Select Box Time Picker Tree

Tools

TOAST UI Doc ESLint Config Release Note

FE Guide

Posts

TOAST UI

월간 크롬 이슈 리포트 2023년 7월호

들어가며

목차

1. Chrome 116

✅ CSS Motion Path

참조

✅ display, content-visibility의 애니메이션 사용 지원

참조

✅ Permission Policy Origins의 와일드카드 기능 확장

참조

🧪 SVGUseElement의 data: URL 지원 중단 미리 보기

참조

🧪 Cross-Origin-Opener-Policy: restrict-properties 미리 보기

참조

🗓️ 배포 예정일

2. Chrome 117

⚠️ CSS -webkit-highlight 속성 지원 중단

참조

⚠️ SHA-1 서버 전자 서명 지원 중단 📌

참조

⚠️ 비표준 appearance 속성값 지원 중단 📌

참조

⚠️ RTCPeerConnection.getStats() 콜백 방식 지원 중단

참조

✅ CSS Anchor 배치

참조

✅ CSS @starting-style 규칙

참조

✅ Iterator 메서드

참조

✅ CSS 불연속 속성의 Transition 지원

참조

🗓️ 배포 예정일

3. Chrome 118

✅ 스크롤 영역 포커스

참조

✅ CSS @scope 규칙

참조

🗓️ 배포 예정일

4. Chrome NEXT

🚫 [Chrome 127] Mutation 이벤트 제거 📌

참조

⚠️ [Chrome 119] 비표준 shadowroot 속성 지원 중단

참조

⚠️ [Chrome 119] WebSQL 지원 중단

참조

⚠️ [Chrome LATER] unload 이벤트 지원 중단

참조

✅ [Chrome LATER] 내부망에 대한 하위 리소스 요청 규칙 적용

공개 웹 사이트의 내부망 하위 리소스 접근 제한

내부망에 하위 리소스 요청 시 사전 요청 발송

참조

✅ `display`, `content-visibility`의 애니메이션 사용 지원

🧪 `SVGUseElement`의 `data:` URL 지원 중단 미리 보기

⚠️ 비표준 `appearance` 속성값 지원 중단 📌

⚠️ `RTCPeerConnection.getStats()` 콜백 방식 지원 중단

✅ CSS `@scope` 규칙

⚠️ [Chrome 119] 비표준 `shadowroot` 속성 지원 중단