2022-11

링크 & 읽을거리

Next.js Conf 2022

10월 25일 샌프란시스코에서 Next.js 콘퍼런스가 개최되었다. 이번 콘퍼런스에서 가장 주목할 만한 내용은 Turbopack에 대한 소개와 /app Directory의 도입, layout, streaming과 같은 Next.js 13버전의 새로운 기능들이다.

Introducing Turbopack: Rust-based successor to Webpack

Webpack의 창시자인 Tobias Koppers의 주도하에 개발된 번들러. Rust로 작성되었고, JavaScript로 작성되어 태생적 성능의 한계를 가진 Webpack에 비해 상당히 고성능이다. 아티클에 따르면 Next.js 13에 Turbopack를 함께 사용하면 다음과 같은 결과를 낸다고 한다.

Webpack에 비해 700배 빠른 업데이트 속도
Webpack에 비해 4배 빠른 초기 실행 속도
Vite에 비해 10배 빠른 업데이트 속도

지난 10년간 수많은 모듈 번들러 도구들로 부터 도전장을 받음에도 이에 굴하지 않고 무려 30억회 다운로드 되며 웹 생태계 안에서 가장 필수적인 도구로 군림해 왔던 Webpack, 이번 Turbopack의 등장으로 굳건하게 지켜온 왕좌의 자리는 어떻게 될지 귀추가 주목된다.

[참고] Vite 개발자인 Evan You는 이와 관련 Vite vs Turbopack에 대해 직접 수행한 벤치마크 수행 결과를 공개했으며, Turbopack의 주장과는 큰 차이가 있는 것으로 보인다.

https://twitter.com/youyuxi/status/1586042491739860993

Next.js 13

13버전에 새롭게 추가된 여러 기능에 대해 소개하고 있다. Turbopack 과 더불어 다음과 같은 기능들이 추가 및 개선된다고 한다.

app/ Directory
- Layout: 상태를 유지하고 재렌더링을 피하면서 layout.js파일을 통해 레이아웃 UI를 쉽게 공유할 수 있다.
- Server Component: 서버 컴포넌트를 기본으로 사용하고 클라이언트에 전송되는 JavaScript의 양을 줄여 초기 페이지 로딩을 빠르게 한다.
- Streaming: 로딩 상태를 loading.js파일을 통해 표시하며 렌더링 되는 UI 단위로 스트리밍 한다.
- Support for Data Fetching: 비동기적 서버 컴포넌트 사용을 지원하고 데이터가 필요한 컴포넌트 레벨에서 데이터를 가져오고, 캐시하고, 재검증하는 유연한 방법을 제공한다. 이로써 이전 버전의 getServerSideProps, getStaticProps, getInitialProps는 더 이상 사용하지 않는다.
New next/image: 레이아웃 변경 없이 이미지를 쉽게 표시하고 성능 향상을 위해 필요에 따라 파일을 최적화할 수 있다.
New @next/font: 새로운 font 시스템은 자동으로 font를 최적화하고 빌드 시 다운로드해 외부 네트워크 요청을 제거하며, 모든 font 파일에 대해 자체 호스팅을 하고 레이아웃의 변경 없이 로드가 가능하도록 한다.
Improved next/link: 더 이상 <a>태그를 추가할 필요가 없다.

Mixing It Up: Remix Joins Shopify to Push the Web Forward

지난 10월 31일, Shopify는 Remix 프레임워크와 개발진에 대한 인수 소식을 밝혔다.

Shopify는 그간 자사의 스토어 기반 서비스 제공을 위해 React 기반 프레임워크인 Hydrogen과 이를 위한 서버리스 플랫폼인 Oxygen을 개발하고 공개했었고, 지난 Remix Conf에서 Hydrogen UI를 발표하며 Hydrogen 레이어가 다른 프레임워크에서도 사용될 수 있다는 것을 보여줬었다.

이후 몇 달간 Remix 개발팀과의 아이디어를 교류하던 끝에 커머스 개발자가 빠르게 스토어를 쉽게 구축할 수 있도록 지원하는 데 필요한 개념은 Remix에 코드화된 베스트 프랙티스와 동일하며 이를 위해 힘을 합치는 것에 대한 공감대가 형성되었다고 한다.

앞으로의 프레임워크 점유율에 어떠한 변화가 생기게 될지 몹시 흥미로워지는 지점일듯하다.

The Web’s Next Transition

웹은 25년 전에 시작된 HTTP, HTML, CSS 그리고 JavaScript 기술들로 구성되어 있다. 웹의 진화에 따라 다음의 흐름과 같이 애플리케이션 아키텍처 또한 진화해 왔고, 오늘날 가장 인기 있는 아키텍처는 SPA이다.

MPA(Multi-Page Apps) → PEMPAs(Progressively Enhanced Multi-Page Apps) → SPA(Single-Page Apps)

SPA 이후의 아키텍처 전환은 무엇일까? 글에서는 SPA의 점진적 향상 아키텍처인 PESPAs(Progressively Enhanced Single Page Apps)가 다음 타자가 될 것으로 예측하고 있다.

웹의 역사와 궤를 같이하는 아키텍처들의 기본적 개념과 다음 예측을 한눈에 파악할 수 있는 글이다.

The future of rendering in React

React에서 현재 사용되고 있는 렌더링 패턴(CSR, SSR, SSG, ISR)에는 어떤 문제들이 존재하는지와 그리고 React 18을 통해 새롭게 도입된 패턴이 어떻게 그 문제들을 해결하고자 하는지를 다루는 글이다.

새로운 렌더링 패턴들인 Streaming SSR, Selective Hydration 그리고 Server Component 등을 소개한다.

ViteConf 2022

Vite는 빠르게 웹 개발(메타 프레임워크) 도구로의 입지를 넓혀가고 있으며, 주요 메이저 프레임워크들을 지원하고 있다. 지난 10월 11~12일 첫 번째 온라인 콘퍼런스가 개최되었다.

Vite를 사용해 보지 않았다면, 다음 링크를 통해 브라우저에서 툴체인으로 구성된 개발 환경을 즉시 경험해 볼 수 있다.

https://vite.new

Why We're Breaking Up with CSS-in-JS

유명한 CSS-in-JS 라이브러리 Emotion의 활동적인 메인테이너가 더 이상 CSS-in-JS를 안 쓰고 Sass로 돌아간 이유에 대해서 말하고 있다. 런타임 오버헤드의 추가, 번들 크기의 증가 Emotion을 의존하는 다른 라이브러리와의 충돌 등을 교체의 이유로 들며, CSS-in-JS의 장점은 Sass로 어떻게 가져왔는지 살펴볼 수 있다.

모든 선택이 그러하듯 기술적 선택에도 큰 트레이드오프가 따르기 마련이다. 궁극적으로 이런 장단점을 평가하고 프로젝트에 적합한지를 판단하는 것은 개발자의 몫이다. 어떤 프로젝트에서는 CSS-in-JS의 사용이 더 효율적일 수 있다. 이 글에서 CSS-in-JS의 장단점을 충분히 파악하고 최선의 선택을 하는 데에 도움이 되길 바란다.

LinkedIn’s GraphQL journey for integrations and partnerships: How we accelerated development by 90%

LinkedIn이 새로운 API 플랫폼을 GraphQL을 활용해 성공적으로 구축한 내용을 담은 아티클이다. 기존의 REST API를 재활용할 수 있었지만 새롭게 만들어야 하는 다양한 요청을 추가적인 엔지니어링 없이 빠르게 제공하기 위해 GraphQL을 도입했고 개발 시간을 대폭 줄였다고 한다. REST API를 GraphQL로 어떻게 확장했는지 참고해 보자.

Prometheus: The Documentary

Prometheus가 어떻게 오늘날 k8s의 기본 모니터링 툴이 되었고 그 시작은 어떻게 되었는지를 설명하는 30여 분의 다큐멘터리. SoundCloud에서 시작된 사이드 프로젝트가 오픈소스로 성공함으로써 사실상 매트릭스 기반의 모니터링 표준으로 자리 잡은 이야기를 다루고 있다. 다시 한번 커뮤니티 생태계의 위대함을 살펴볼 수 있다.

Announcing TypeScript 4.9 Beta

마이크로소프트의 기술 블로그에서 TypeScript 4.9 베타 버전이 소개되었다

눈여겨볼 만한 변화들은 다음과 같다

서브타입을 쉽게 다루게 해주는 satisfies 키워드가 추가된다.
- Next.js의 getStaticProps/getStaticPaths/getServerSideProps 타입을 더 안전하게 쓸 수 있게 된다 - 링크
in 키워드가 더 유연해진다
watch 모드가 파일시스템 이벤트를 사용하도록 변경된다 (불가능하다면 기존의 동작 방식으로 작동한다)

React RFC - first class support for promises

RFC(Request for Comments) 문서는 비평을 기다리는 문서라는 의미로, 컴퓨터 네트워크 공학 등에서 인터넷 기술에 적용 가능한 새로운 연구, 혁신, 기법 등을 아우르는 메모를 나타낸다.

React RFC로 올라와서 큰 반응을 얻고 있다. React 컴포넌트에서 더 우아하게 비동기 데이터를 처리하는 방법에 대해 제안한다.

제안된 내용은 새로 나온 Next.js 13버전에서 경험해 볼 수 있다고 한다.

튜토리얼

Shell scripting with Node.js

JavaScript 씬에서 유명한 테크니션인 Axel Rauschmayer의 저서로 Node.js가 어떻게 동작하는지와 생태계 전반 및 npm 패키지를 자세히 다루고 있다. 온라인상의 HTML 버전은 무료로 전체 내용이 제공된다.

A World-Class Code Playground with Sandpack

CodeSandbox의 실시간 코드 편집기인 sandpack을 어떻게 적용하는지 실제로 블로그에 적용한 내용을 경험을 바탕으로 설명하고 있다. sandpack의 React 버전은 링크에서 확인 가능하다.

Nightdrive

어두운 도로에서 운전하는 차를 canvas를 사용해서 시뮬레이션하는 것을 표현한 코드이다. 별다른 라이브러리의 사용 없이 바닐라 JavaScript로 작성되어 있다. JavaScript로 3D를 2D로 표현한다고 했을 때 좋은 참고 자료가 될 수 있을 것이다. (데모링크)

코드와 도구

visx

Airbnb에서 개발한 D3.js기반 React용 시각화 라이브러리

Pokémon Cards Holographic effect in CSS

포켓몬 카드를 사실적으로 보이게 만드는 홀로그래픽 효과를 고급 CSS를 활용해 구현한 모음을 볼 수 있다.

Slash

토스에서 공개한 TypeScript/JavaScript 패키지들이다.

토스 사내에서 사용하는 코드들을 30여 개의 npm 라이브러리 형태로 공개했다.

아래 목록은 그중에서도 눈여겨볼 만한 것들이다.

@toss/use-overlay 는 useOverlay React hook을 제공하여, 오버레이를 선언적으로 관리할 수 있게 해 준다.
@toss/hangul 한글을 다루는 유틸 함수들을 제공한다

Lerna reborn — What’s new in v6?

FE News 2022년 6월 호에서 Lerna의 오너십이 Nrwl로 이전되었다고 소개되었다.

오너십을 이전한 뒤 Nrwl의 개발진은 Lerna를 5버전으로 올리고 Lerna와 Nx의 통합을 진행하였다.

그리고 빠르게 Nx가 기본으로 사용되는 V6을 출시하였다. V6은 이전의 Lerna(V4 이하)에서 쉽게 버전 업그레이드가 가능하다.(업그레이드 Youtube) V6은 캐싱 기능을 사용할 수 있고, task pipeline 기능을 이용해 병렬 작업과 종속성을 함께 고려해 설정이 가능하며, pnpm도 지원한다.

다만 모든 폰트는 영문 한정이니 다국어 혹은 글로벌 향 서비스를 준비하는 분들께 추천한다.