Fork me on GitHub

2022-07-04: Next.js 12.2, Fresh 1.0(Deno Web Framework), Vue 2.7(2.x의 최종 minor)

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #599 - Next.js 12.2가 릴리스 됐다.

Middleware와 On-Demand ISR가 안정적(stable)인 기능으로 전환 됐다.
API Route와 SSR을 Cloudflare Workers 기반 Edge에서 동작하게 하는 runtime 옵션 추가.
이와 함께 Edge Runtime을 로컬에서 에뮬레이터 하기 위한 edge-runtime 패키지도 공개 됐다.

그 이로 next/image 개선, SWC 플러그인 지원, React 18 지원 개선 등이 이뤄졌다.
또, next/link가 항상 <a>로 감싸지도록 하는 기능을 opt-in으로 도입할 수 있게 됐다.


Deno로 작성된 웹 프레임워크 Fresh 1.0이 공개됐다.

Fresh는 Preact(JSX)를 사용해 UI를 만드는 식으로 서버 사이드 렌더링을 수행하고, 필요 한 영역만 클라이언트 사이드 자바스크립트를 생성하는 Islands Architecture를 채택하고 있다.

Fresh는 https://deno.land/에서 이용하고 있다.


Vue 2.7가 릴리드 됐다.

Vue 2.7는 Vue 2.x의 최종 minor 업데이트가 되며 Vue 2는 약 1년 6개월 후인 2023년 말에 지원이 종료될 예정이다.
Vue 3에서의 백포트로 defineComponent(), h(), useSlot(), useAttrs(), useCssModules() 지원이 추가 됐다.
또, Vue 3와의 동작 차이에 대해서도 소개하고 있으니 관심 있는 분은 살펴보면 좋을 거 같다.


헤드라인


WebKit/standards-positions: WebKit's positions on emerging web specifications

github.com/WebKit/standards-positions

webkit proposal safari apple

새로운 웹 표준 Proposal에 대한 WebKit 입장(position)을 공유하고 관리하는 저장소.


Blog - Next.js 12.2 | Next.js

nextjs.org/blog/next-12-2

Next.js ReleaseNote

Next.js 12.2 릴리스.
Middleware와 On-Demand ISR이 안정적(stable)인 기능으로 전환됐다.
API Route와 SSR을 Cloudflare Workers 기반 Edge에서 동작하게 하는 runtime 옵션 추가, next/image 개선, SWC 플러그인 지원, React 18 지원 개선 등이 포함됐다.


Fresh 1.0

deno.com/blog/fresh-is-stable

deno React ReleaseNote

Deno와 Preact를 사용한 웹 프레임워크인 Fresh 1.0 릴리스.


Release Notes for Safari Technology Preview 148 | WebKit

webkit.org/blog/12992/release-notes-for-safari-technology-preview-148/

webkit ReleaseNote safari

Safari Technology Preview 148 릴리스.

CSS 관련해서는 :has() 의사 클래스 지원 개선, text-indent 속성에서 each-line 지원, :modal 의사 클래스 지원 등이 이뤄졌다.
이어 <link> 요소에 nonce 속성을 지원하며,
ITP에서 Cookie의 cap이 Script-Writeable Storage와 동일하게 마지막 사용자 상호 작용 후로 부터 7일, 상호 작용이 없는 경우엔 24 시간 후 제거되도록 변경됐다.


Release v6.0.0 · capricorn86/happy-dom

github.com/capricorn86/happy-dom/releases/tag/v6.0.0

JavaScript DOM library ReleaseNote

Happy DOM v6.0.0 릴리스.

여러개의 window 인스턴스를 활용할 때 발생하던 문제 수정, Document.createRange() / Document.getSelection(), Text.splitText() 지원 등.


Date and Time Pickers for All – React Spectrum Blog

react-spectrum.adobe.com/blog/date-and-time-pickers-for-all.html

JavaScript React library ReleaseNote accessibility

React Aria와 React Spectrum에서 날짜 입력 UI를 지원한다.
접근성, 국제화, 사용자 정의 편의성 등을 제공하는 날짜 입력 필드 / 캘린더 UI 컴포넌트를 제공.
또, 다중 캘린더 시스템과 로케일을 지원하는 날짜 라이브러리도 함께 공개했다.


Release v1.23.0 · microsoft/playwright

github.com/microsoft/playwright/releases/tag/v1.23.0

JavaScript browser testing library ReleaseNote

playwright v1.23.0 릴리스.
har 파일을 사용한 Network Replay 기능 추가, <select multiple>에 대응하는 toHavevalues() 추가, 텍스트 매치 시 사용할 수 있는 ignoreCase 옵션 추가 등.


Release 4.0.0 · prisma/prisma

github.com/prisma/prisma/releases/tag/4.0.0

JavaScript database library ReleaseNote

Prisma 4.0.0 릴리스
extendedIndexes / filterJson / improvedQueryRaw를 GA(General Availability)로 이동.
Node.js 12 지원 종료, DbNull / JsonNull / AnyNull을 object 타입으로 변경.
statement cache size의 기본 값 변경.


Release v7.4.0 · pnpm/pnpm

github.com/pnpm/pnpm/releases/tag/v7.4.0

npm pnpm ReleaseNote

pnpm v7.4.0 릴리스.
의존 패키지에 patch 파일을 덧댈 수 있는 patchedDependencies 필드와 pnpm patch 명령어 추가.
production 의존만 설치하고 디플로이 용으로 복사하는 pnpm deploy 명령어 추가 등.


Vue 2.7 "Naruto" Released | The Vue Point

blog.vuejs.org/posts/vue-2-7-naruto.html

Vue ReleaseNote

Vue 2.7 릴리스.
Vue 2.x의 마지막 minor 업데이트이며, Vue 2는 약 1년 6개월 후인 2023년 말에 지원이 종료될 예정.


아티클


브라우저, Node, Cloudflare 에서도 동작하는 Deno 모듈 개발하기(일본어)

zenn.dev/dajiaji/articles/c5340c38d11d4d

deno node.js cloudflare library article

Deno 용 코드를 기반으로 하며, dnt를 사용해 Node.js 용 패키지를 생성, Cloudflare Workers에서 동작 하는지 테스트 할 수 있는 패키지 개발 방식 소개.


jest로 DB 있는 테스트를 고속화하기 | kohsweblog

blog.koh.dev/2022-07-02-jest-speedup/

JavaScript testing performance article

Jest로 개선한 테스트 성능을 주제로 한 글.
로컬 에서는 maxWorkers, CI는 shard를 사용해 테스트를 병렬로 실행하는 것으로 시행 시간을 단축 하는 방법을 소개한다.


세로 쓰기 HTML에 있어 문자 방향은 어떻게 정해지는가 - 드완고 교육 서비스 개발자 블로그

blog.nnn.dev/entry/2022/07/01/180000

HTML CSS font article

세로 쓰기 HTML 표시를 주제로 한 글.
CSS의 writing-modetext-orientation로 문자 방향 다루기, 폰트와 Vertical_Orientation 별 표시 차이, 브라우저의 구현 차이 등에 대해서 이야기 한다.


사이트, 서비스, 문서


니코니코 생방송 웹 프런트엔드의 Kubernetes 마이그레이션 핸드북 2022(일본어)

dwango.github.io/nicolive-kubernetes-migration-handbook-2022/

kubernetes document

니코니코 생방송 웹 프론트엔드를 Docker Swarm에서 Kubernetes로 이전하면서 배운 것, 느낀 것, 운용 방법, 모니터링 등을 정리하여 공개.
Kubernates 환경에서의 프런트엔드 서비스 관리 가이드 문서.


소프트웨어, 도구, 라이브러리


codemix/deprank: Use PageRank to find the most important files in your codebase.

github.com/codemix/deprank

JavaScript Tools

dependency-cruiser를 사용하여 의존 그래프를 만들고 페이지 랭크를 출력하는 도구.


Pull Request to this article
JSer.info Slackに参加する