translate: 2024-04-18 (#1187)

_i18n/ko/_posts/2024/2024-04-18-next.js-v14.2-farm-v1.0-biome-v1.7-pnpm-v9.md

@@ -0,0 +1,227 @@
+---
+title: "2024-04-18: Next.js v14.2, Farm v1.0, Biome v1.7, pnpm v9"
+author: "azu"
+translator: rewrite0w0
+layout: post
+date: 2024-04-18T05:19:34.848Z
+category: JSer
+tags:
+- Next.js
+- Tools
+- CSS
+- nodejs
+- deno
+
+---
+
+JSer.info #689 - Next.js 14.2가 출시되었어요.
+
+- [Next.js 14.2 | Next.js](https://nextjs.org/blog/next-14-2)
+
+Turbopack RC 출시, Server/Client Components 간 Tree Shaking 대응, CSS 불러오기 순서 문제 수정 등이 있어요.
+Client측에서 Router Cache 기간 설정하는 `staleTimes` 옵션 추가도 있어요.
+
+---
+
+Vite/Rollup 호환 플러그인 다루는 빌드 도구 Farm 1.0가 출시되었어요.
+
+- [Release 🚀 Farm v1.0 is released! · farm-fe/farm](https://github.com/farm-fe/farm/releases/tag/v1.0)
+
+Rust로 작성, 캐시 사용한 Incremental Build, Lazy Compilation, 모듈 그룹화해서 bundle 가능하다는 특징이 있어요.
+또한, dev와 production 빌드에 같은 전략을 써서, 일관성있는 결과를 얻을 수 있도록 설계되었어요.
+
+---
+
+Biome 1.7가 출시되었어요.
+
+- [Biome v1.7 | Biome](https://biomejs.dev/blog/biome-v1-7/)
+- [Release CLI v1.7.0 · biomejs/biome](https://github.com/biomejs/biome/releases/tag/cli%2Fv1.7.0)
+
+ESLint/Prettier 설정에서 마이그레이션 가능한 `biome migrate eslint`와 `biome migrate prettier` 명령어가 추가되었어요.
+Git Staging 파일 체크하는 `biome check --staged` 추가가 있어요.
+
+---
+
+pnpm 9.0가 출시되었어요.
+
+- [Release v9.0.0 · pnpm/pnpm](https://github.com/pnpm/pnpm/releases/tag/v9.0.0)
+
+Node.js 16 지원 종료 및, 기본 설정 몇 몇 변경했어요.
+monorepo 내에 버전 지정 link하는 `link-workspace-packages`를 `false`로 변경, pre/post script 기본값으로 실행되도록 변경되었어요.
+또한, lock 파일의 버전을 v9로 변경, Git 저장소의 서브디렉토리만 설치 가능해요.
+
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">헤드라인</h1>
+
+----
+
+## Next.js 14.2 | Next.js
+[nextjs.org/blog/next-14-2](https://nextjs.org/blog/next-14-2 "Next.js 14.2 | Next.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Next.js 14.2 출시.
+Turbopack RC가 출시, Server/Client Components 간 Tree Shaking 대응, CSS 불러오기 순서 문제 수정.
+Client측 Router Cache 기간 설정하는 `staleTimes` 옵션 추가
+
+
+----
+
+## Release 🚀 Farm v1.0 is released! · farm-fe/farm
+[github.com/farm-fe/farm/releases/tag/v1.0](https://github.com/farm-fe/farm/releases/tag/v1.0 "Release 🚀 Farm v1.0 is released! · farm-fe/farm")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">bundler</span> <span class="jser-tag">Rust</span> <span class="jser-tag">vite</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Vite/Rollup 호환 플러그인 다루는 빌드 도구 Farm 1.0 출시.
+Rust로 작성, 캐시 사용한 Incremental Build, Lazy Compilation, 모듈을 그룹화해서 bundle 가능.
+또한, dev와 production 빌드에 같은 전략을 사용해, 일관적 결과를 얻도록 설계됨.
+
+
+----
+
+## Biome v1.7 | Biome
+[biomejs.dev/blog/biome-v1-7/](https://biomejs.dev/blog/biome-v1-7/ "Biome v1.7 | Biome")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Biome v1.7 출시.
+ESLint/Prettier 설정에서 마이그레이션 가능한 `biome migrate eslint`와 `biome migrate prettier` 명령어 추가.
+Git의 Staging 파일 체크하는 `biome check --staged` 추가
+
+- [Release CLI v1.7.0 · biomejs/biome](https://github.com/biomejs/biome/releases/tag/cli%2Fv1.7.0 "Release CLI v1.7.0 · biomejs/biome")
+
+----
+
+## Release v9.0.0 · pnpm/pnpm
+[github.com/pnpm/pnpm/releases/tag/v9.0.0](https://github.com/pnpm/pnpm/releases/tag/v9.0.0 "Release v9.0.0 · pnpm/pnpm")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">pnpm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+pnpm v9.0.0 출시.
+Node.js 16 지원 종료.
+monorepo 내에 버전 지정 link 하는 `link-workspace-packages`를 `false`로 변경, pre/post script를 기본값 실행하도록 변경.
+lock 파일의 버전을 v9로 변경, Git 저장소의 서브 디렉토리만 설치 가능.
+
+
+----
+
+## Bun v1.1.4 | Bun Blog
+[bun.sh/blog/bun-v1.1.4](https://bun.sh/blog/bun-v1.1.4 "Bun v1.1.4 | Bun Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Bun v1.1.4 출시.
+`bun --filter='*'` 명령어를 병렬 실행 가능하도록, `bun install` 성능 개선, `bun:sqlite`가 `using` 대응
+
+
+----
+
+## Chrome 124  |  Release notes  |  Chrome for Developers
+[developer.chrome.com/release-notes/124](https://developer.chrome.com/release-notes/124 "Chrome 124  |  Release notes  |  Chrome for Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Chrome 124 출시.
+`writingsuggestions` 속성 지원, `Sec-CH-UA-Form-Factors` client hint 지원, Document Render-Blocking 지원.
+WebSocketStream API, `setHTMLUnsafe`와 `parseHTMLUnsafe` 메서드 지원, ReadableStream API가 Async Iterable 대응
+
+- [New in Chrome 124  |  Blog  |  Chrome for Developers](https://developer.chrome.com/blog/new-in-chrome-124 "New in Chrome 124  |  Blog  |  Chrome for Developers")
+
+----
+
+## ECMAScript proposal updates @ 2024-04 | ECMAScript Daily
+[ecmascript-daily.github.io/ecmascript/2024/04/17/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2024/04/17/ecmascript-proposal-update "ECMAScript proposal updates @ 2024-04 | ECMAScript Daily")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">proposal</span> <span class="jser-tag">news</span></p>
+
+2024년 4월 TC39에서 ECMAScript Proposal 스테이지 변경 모음.
+Signals가 Stage 1, `.union()` 같은 집합 연산 Set 메서드가 Stage 4.
+
+
+----
+
+## Release 3.37.0 - 2024.04.17 · zloirock/core-js
+[github.com/zloirock/core-js/releases/tag/v3.37.0](https://github.com/zloirock/core-js/releases/tag/v3.37.0 "Release 3.37.0 - 2024.04.17 · zloirock/core-js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">polyfill</span> <span class="jser-tag">ReleaseNote</span></p>
+
+core-js v3.37.0 출시.
+Set methods Proposal를 Stable에 추가, `Math.sumPrecise` 지원, `Symbol.customMatcher` 지원
+
+
+----
+<h1 class="site-genre">읽을거리</h1>
+
+----
+
+## How we built JSR
+[deno.com/blog/how-we-built-jsr](https://deno.com/blog/how-we-built-jsr "How we built JSR")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">npm</span> <span class="jser-tag">article</span></p>
+
+JSR에 대한 기술적 이야기.
+API 서버는 Rust로 작성, DB에는 Postgres 이용.
+프론트엔드 Fresh 사용해서 Islands 아키텍처.
+Fresh를 작동시키는 Rendering Server는 각지에 디플로이 되지만 API Server는 US 뿐이므로, Server 간 통신에 워터폴이 일어나지 않도록 정리함.
+또한, npm 호환 레이어 tarball 만들 때 .ts에서 .d.ts 생성 처리를 Rust로 작성하고 있는 점에 대해서도 다뤄짐
+
+- [feat: Add fast-check based TypeScript type definition generation by marvinhagemeister · Pull Request #379 · denoland/deno\_graph](https://github.com/denoland/deno_graph/pull/379 "feat: Add fast-check based TypeScript type definition generation by marvinhagemeister · Pull Request #379 · denoland/deno\_graph")
+
+----
+
+## Panda CSS - The Origin Story - Segun Adebayo
+[www.adebayosegun.com/blog/panda-css-the-origin-story](https://www.adebayosegun.com/blog/panda-css-the-origin-story "Panda CSS - The Origin Story - Segun Adebayo")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">CSS</span> <span class="jser-tag">article</span> <span class="jser-tag">Interview</span></p>
+
+Panda CSS가 왜 만들어졌는가에 대한 이야기.
+Chakra UI에서 CSS 성능 향상 테스트하면서, Vanilla Extract에서 PoC 작성, 여기에 같은 테스트를 해 Box Extractor 제작자와 작업을 머지해서 진행함.
+Park UI나 비디오 튜토리얼 제작, 이름을 Panda로 한 이야기 등도 있음
+
+
+----
+
+## Node.js — Trip report: Node.js collaboration summit (2024 London)
+[nodejs.org/en/blog/events/collab-summit-2024-london](https://nodejs.org/en/blog/events/collab-summit-2024-london "Node.js — Trip report: Node.js collaboration summit (2024 London)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">article</span></p>
+
+Node.js collaboration summit 2024에서 다뤄진 주제에 대해.
+
+
+----
+
+## CSS in React Server Components
+[www.joshwcomeau.com/react/css-in-rsc/](https://www.joshwcomeau.com/react/css-in-rsc/ "CSS in React Server Components")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">CSS</span> <span class="jser-tag">React</span> <span class="jser-tag">article</span></p>
+
+React Server Component와 CSS에 대한 글.
+Linaria, Panda CSS, Material UI의 Pigment CSS에 대해
+
+
+----
+
+## 「실전으로 보는 React 테스트 작성 방법」업데이트 하기
+[zenn.dev/cybozu\_frontend/articles/update-test-libraries](https://zenn.dev/cybozu_frontend/articles/update-test-libraries "「실전으로 보는 React 테스트 작성 방법」업데이트 하기")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">article</span></p>
+
+React 관련 도구나 테스트 업데이트에 대해.
+
+
+----
+<h1 class="site-genre">소프트웨어, 도구, 라이브러리</h1>
+
+----
+
+## sonic-technology/catena: Build type-safe APIs with ease
+[github.com/sonic-technology/catena](https://github.com/sonic-technology/catena "sonic-technology/catena: Build type-safe APIs with ease")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">library</span></p>
+
+Express에 Type Safe한 validation나 middleware 구조를 붙이는 라이브러리
+
+
+----
+
+## Layer Cake
+[layercake.graphics/](https://layercake.graphics/ "Layer Cake")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Svelte</span> <span class="jser-tag">SVG</span> <span class="jser-tag">library</span></p>
+
+Svelte 기반 SVG 등 그래피컬 한 데이터 다루는 라이브러리
+
+
+----