JSer.info #558 - Deno 1.14가 릴리스 됐다.
deno lint와 deno fmt가 옵션을 지원하여 quote나 indent 등의 설정을 가능하도록 개선.
URLPattern 지원, fetch에서 Mutual TLS를 지원한다.
또, unstable한 기능으로 File locking APIs 지원이 추가됐다.
그 외로 URL parsing과 std/http 모듈의 성능 개선이 이뤄졌다.
Chrome의 User-Agent 문자열 축소 일정이 다시 공개됐다.
navigator.userAgent, @navigator.appVersion, navigator.platform 등의 장보량을 줄이거나 고정하여 핑거프린팅과 스니핑 등으로 악용될 리스크를 줄이는데 목적이 있다. 과거 사용해오던 API는 비추천되며 대신 User Agent Client Hints를 사용하길 권고한다.
UA 문자열 축소 등은 다음과 같은 일정으로 진행된다.
- Chrome 92: 콘솔에서 경고 출력
- Chrome 95에서 100: Origin Trial 실시
- Chrome 100: Reverse Origin Trial 실시
- Chrome 101에서 110: 축소를 단계적으로 실행
- Chrome 113: 완료
Vue2 기반 프로젝트를 Vue3로 이전하다(일본어)에는 @vue/compat를 사용하여 Vue2로 작성된 애플리케이션을 Vue3로 점차 이전하는 방법을 이야기한다.
Vue2 애플리케이션에 @vue/compat과 eslint-plugin-vue를 도입하고 경고 메시지를 살펴보면서 진행하여 최종적으로 @vue/compat를 제거까지의 흐름을 소개한다.
헤드라인
Material-UI is now MUI! - MUI
mui.com/blog/material-ui-is-now-mui/
머티리얼 디자인의 React 구현으로 시작한 Material-UI가 MUI로 이름이 변경됐다.
이에 따라서 패지키 역시 @material-ui에서 @mui로 변경됐고 웹사이트도 개편됐다.
Is Nuxt 3 Ready?
Nuxt 3는 2021년 10월 12일에 릴리스될 예정이다.
Deno 1.14 Release Notes | Deno Blog
Deno 1.14 릴리스.
deno lint와 deno fmt에서 옵션 지원, URLPattern 지원, fetch에서 Mutual TLS 지원.
또, unstable한 기능으로 File locking APIs 지원, URL parsing과 std/http 모듈 성능 개선.
그 외로 TypeScript 44, V8 9.4로 갱신됐다.
아티클
Chromium Blog: User-Agent Reduction Origin Trial and Dates
blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html
Chrome의 User-Agent 변경 일정 공개.
Chrome 95 부터 Origin Trial 기반으로 옵트인으로 도입, Chrome 100 부터 서서히 축소된 포멧으로 전환, Chrome 113에서 UA와 관련 API의 데이터 축소 완료.
프런트엔드 스택 개편을 위해 DevTools를 만들어 개발 환경 개선하기 - Cybozu Inside Out | 사이보으즈 엔지니어 블로그(일본어)
blog.cybozu.io/entry/2021/09/13/080000
Closure Tools 용 DevTools를 왜 개발했고 어떻게 활용하는지 소개.
Vue의 리렌더링된 컴포넌트를 하이라이트하는 Chrome 확장을 만들었다(일본어)
zenn.dev/yuichkun/articles/e4e8c7e633439c
React DevTools 처럼 렌더링된 요소를 하이라이트하는 Vue 용 디버깅 확장 소개
Vue2 기반 프로젝트를 Vue3로 이전하다(일본어)
zenn.dev/azukiazusa/articles/c8d76eb56f5fd8
vie-cli를 사용하고 있는 프로젝트를 Vue2에서 Vue3로 이전하는 튜토리얼 글.
@vue/compat, eslint-plugin-vue를 이용해 각 비호환 API에 대응하고 @vue/compat을 제거하기 까지의 과정을 소개한다.
The Future of CSS: Cascade Layers (CSS @layer) – Bram.us
www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/
CSS의 @layer 소개.
Specificity와 Order Of Appearance 전에 Layer를 평가하여 캐스케이드를 제어할 수 있도록 하는 Cascade Layers 사양.
레이어가 Specificity 보다 우선되기 때문에 의도하지 않은 스타일 덮어쓰기 등을 제어하기 쉬워진다.
Small Bundles, Fast Pages: What To Do With Too Much JavaScript | Calibre
calibreapp.com/blog/bundle-size-optimization
JavaScript의 bundle size를 어떻게 작게 유지할 수 있을까?
bundle size와 성능 영향, bundle size 가시화, 특정 패키지의 사용을 ESLint로 금지하는 방법, Modern Browser 용 빌드 분리 방법 등 소개.
What's New In DevTools (Chrome 95) - Chrome Developers
developer.chrome.com/blog/new-in-devtools-95/
Chrome 95 개발자 도구의 변경 사항 정리.
CSS Unit 선택 UI 추가, Isssues 탭 개선, Lighthouse 8.4 지원
슬라이드, 영상
iframe sandbox에서 사용자 입력 스크립트 실행하기 - Speaker Deck(일본어)
speakerdeck.com/syumai/iframe-sandboxdeyuzaru-li-sukuriputowoshi-xing-suru
iframe을 사용한 사용자 입력 스크립트 실행 방법.
Cross Origin 상황에서 Window Object를 사용해 코드를 실행하고 postMessage로 그 결과를 전달 받는 방법.
또, postMessage의 origin과 source 체크에 대해서도 이야기한다.
사이트, 서비스, 문서
CSS Almanac | CSS-Tricks
CSS 레퍼런스 페이지
CSS의 셀렉터, 프로퍼티 별 설명이 잘 정리돼 있다.
Intro to D3.js
yangdanny97.github.io/intro-to-d3/
D3 v5+ 버전에 대응한 D3 튜토리얼
소프트웨어, 도구, 라이브러리
typicode/xv: A simple, fast and small test runner with native ESM support
ESM으로 다루는 테스트 프레임워크.
각 테스트 케이스를 export 구문으로 export 하며 각 테스트 케이스를 실행하고 결과를 표시하는 CLI를 제공한다.
