2022-08

링크 & 읽을거리

Fresh 1.0

Fresh는 Deno에서 동작하는 새로운 full-stack 웹 프레임워크로 Deno 개발팀에서 개발했다. Next.js와 유사한 파일시스템 라우팅이 지원되며, 빌드 과정이 없고 디폴트로 어떠한 JavaScript 코드도 클라이언트로 보내지 않는다. 대부분의 렌더링은 서버에서 이뤄지며, 클라이언트는 상호작용을 위해 작은 영역들(small islands - Island 아키텍처)에 대한 재렌더링을 수행한다.

사실상 Next.js의 Deno 버전으로 볼 수 있으며, Preact를 사용한다.

참고 링크

NEW FRAMEWORK Makes Remix And NextJS Feel Slow?? Fresh by Deno is FAST

a fresh new web framework is out

Fresh: Blazingly Fast React

Between the Wires: An interview with developer and entrepreneur Guillermo Rauch

Next.js를 개발(또한 socket.io, Mongoose도 개발)한 Vercel의 창업자인 Guillermo Rauch에 대한 2017년 인터뷰 내용이다. 아르헨티나 수도인 부에노스아이레스 근교에서 성장했고, 스타 트렉과 엔지니어링에 관심이 많던 아버지로 인해 7살 때 컴퓨터를 처음 사용하기 시작했다고 한다.

이후 16살이 되었을 때, 당시 유명했던 MooTools 코어 개발자로 합류하게 되었고 그 다음 해 스위스 스타트업의 Front-end 애플리케이션 개발 지원을 위해 채용되었고, 이후 샌프란시스코 사무실을 열게 됨에 따라 미국으로 이동하게 되었고 이후 창업을 통해 오늘날에 이르게 되었다고 회고한다.

오늘날 Front-end 씬에서 영향력을 갖는 이의 궤적을 엿보는 것은 언제나 흥미롭다.

추가로 다음의 팟캐스트 인터뷰도 같이 들어보기 바란다.

DevJourney: Guillermo Rauch learned with communities

Remix Conf 2022

지난 5월 24~25일, 처음 개최된 Remix 콘퍼런스 세션들을 확인해 볼 수 있다.

The new wave of React state management

상태 관리 라이브러리가 해결해야 하는 핵심 문제와 모던 라이브러리들이 어떻게 새로운 방법으로 이를 다루고 있는지 설명하는 글이다. 대체적으로 전역 상태 관리 라이브러리는 다음의 문제들을 해결할 수 있어야 한다.

구성 요소 트리의 모든 위치에서 저장된 상태를 읽을 수 있어야 한다.
스토어에서 쉽게 데이터를 읽고 저장할 수 있어야 한다.
렌더링 최적화 메커니즘 제공해야 한다.
메모리 사용을 최적화하는 메커니즘 제공해야 한다.

Nate Moore: WebAssembly in the JavaScript Ecosystem

오늘날 JavaScript 개발에서 사용하는 의존성들 중 얼마나 많은 영역에서 wasm을 배후에서 활용하고 있는지를 안다면 놀랄 것이다.

이 동영상은 JavaScript와 TypeScript 생태계에서 wasm의 주목할 만한 용도를 살펴보고 완전한 네이티브 또는 완전 JavaScript 해법과 비교해 하이브리드 wasm/JS 도구의 이점에 대해 설명한다.

Front-end Web Performance: The Essentials

시리즈로 구성된(아직 완성되지 않은) 글을 통해 저자는 웹 성능을 위해 이해해야 하는 본질적 요소들을 하나씩 설명한다.

첫 번째 시리즈 글에선 브라우저의 렌더링 사이클과 하드웨어 가속, 합성 레이어 등에 대한 전반적인 브라우저의 렌더링 과정을 다루며, 두 번째 글에선 이벤트 루프, 비동기 스케줄링 등을 통해 브라우저의 동작을 블록 하지 않는 것에 대한 설명을 이어 간다.

두 번째 시리즈 글:

Frontend Web Performance: The Essentials [1]

Bun

Bun은 새로운 JavaScript 런타임이면서 동시에 번들러, 트랜스파일러 그리고 패키지 매니저 역할을 수행할 수 있는 all-in-one 도구이기도 하다.

속도에 초점을 맞춰 Node.js나 Deno와는 다르게 WebKit의 JavaScriptCore 엔진을 활용한다. 주요한 Front-end 생태계의 도구와 환경을 모두 지원하며, TypeScript와 JSX, Jest-like 테스트 러너도 빌트인 되어 기본 지원된다. Bun은 로우 레벨 언어인 Zig로 작성되었으며, 엄청나게 많은 시간을 투자해 프로파일링과 최적화 그리고 Zig의 수동 메모리 관리 특성을 최대한 활용해 보다 단순하고 빠르게 만들 수 있었다고 한다.

[참고]

Asesome Bun

한 Bun 써보는 거 어때?

How I Estimate NPM Package Market Share (and how Redux usage compares to other libraries)

저자는 최근 몇 년간 "Redux는 React 앱에서 45~50% 정도 사용되고 있다"와 "Redux는 React 앱에서 가장 널리 사용되는 상태 관리 도구이다"라는 의견을 얘기해 왔었고, 어떻게 그러한 결론을 도출해 낼 수 있었는지에 대한 접근 방법(다양한 참고 지표들)을 소개한다.

글에선 Redux를 대상으로 하지만, 어떤 라이브러리를 사용해야 하는지 결정이 필요한 경우라면 이 경험이 도움이 될 수 있을 것이다.

The Best Solution to Burnout We’ve Ever Heard

Slack, Netfliy 그리고 Ambassador Labs에서 일하는 엔지니어들간의 토론 세션 팟캐스트로 번아웃을 극복하기 위한 가장 좋은 해법이 무엇인지에 대한 얘기를 들어볼 수 있다.

Slack의 수석 엔지니어는 개발 번아웃의 위험성은 정기적인 배포/릴리스 진행을 통해 감소되며, 재작업과 병목현상에 많은 정신적 에너지를 사용하는 것으로부터 발생되며, 개발자들이 코딩하지 못하게 하는 모든 것에 의해 어떻게 번아웃이 발생함을 얘기한다.

<popup> element explainer

MS Edge 웹 플랫폼 팀의 Melanie Richardson은 21년 1월 새로운 <popup> 요소에 대한 제안과 그에 대한 설명(explainer) 문서를 공개했었다.

이 요소는 문서 내의 다른 요소들보다 최상위 레벨에 표현되는 레이어를 생성하고 표현하는 것에 대한 것으로, ESC 키를 통해 숨겨지고 한 번에 한 개의 레이어만 노출되어야 하는 상황에 사용될 수 있는 요소다.

해당 제안은 추가적인 논의 진행을 통해 별도 요소가 아닌, 기존 요소의 속성 형태로 제공되는 새로운 제안(Pop Up API (Explainer))으로 논의가 변경되어 진행 중에 있다.

이에 대한 chromium 구현 진행상황은 Tracking bug for implementation of popup attribute/API을 통해 확인할 수 있다.

CSS in 2022

한글번역

2022년 브라우저에서 사용할 수 있는(또는 지원될 것으로 기대) 다양한 새로운 CSS 기술들을 소개한다.

Container Queries: 컨테이너 크기에 따라 스타일 적용
Cascade Layers: @layer를 사용해 레이어 단위로 우선순위를 지정
Color Functions: 상대적 색상 값, 색상 혼합, 대비 색상을 지정하는 함수들
New Viewport Units: 새로운 뷰포트 단위
- svw/svh: Short Viewport
- lvw/lvh: Large Viewport
- dvw/dvh: Dynamic Viewport
:has(): 특정 자식이 있는 부모 요소를 선택
overscroll Behavior: overscroll 할 때의 동작을 제어
Subgrid: 부모 그리드와 같이 정렬
Accent Color: input 요소에 색상을 지정
Media Query Ranges: 미디어 쿼리의 최대/최소 너비 범위를 지정

CSS Day 2022

지난 6월 9~10일 암스테르담에서 진행된 CSS만을 다루는 콘퍼런스다.

Neubrutalism is taking over the web

19년도부터 자주 언급되던 뉴모피즘(Newmorphism)은 주요한 UI 트렌드가 되었나 물은다면 그 대답은 아직까지는 "NO" 일 것이다. (FE-news 2020년 4월 호 - "뉴모피즘은 새로운 UI 트렌드가 될 수 있을까" 참고) 그렇다 뉴모피즘과 글래스모피즘(Glassmorphism)은 UI를 새로운 방향으로 이끌고자 했지만 크게 흥하지는 못했다고 할 수 있다.

최근에는 위 디자인과 상당히 대비되는 특징의 뉴브루탈리즘(Neubrutalism)이 떠오르고 있다. 특이하면서 채도 높은 색상, 색상 간 고도 대비와 기발한 타이포그래피, 그리고 전통적인 레이아웃이라는 톡톡 튀는 개성을 가지는 뉴브루탈리즘은 새로운 UI 트렌드가 될 수 있을까?

[참고] 뉴브루탈리즘의 다양한 사이트들을 보고 싶다면 다음 글에서 확인 가능하다.

What is the Neubrutalism Web Design Trend?

Why Efficient Hydration in JavaScript Frameworks is so Challenging

Hydration 과정은 서버로부터 전달되고 렌더링 된 HTML에 대해 상호작용을 위한 이벤트 핸들러 설정과 초기 상태 설정 등과 같이 애플리케이션이 동작하기 위해 필요한 처리 과정을 의미한다. 대다수의 모던 JavaScript 프레임워크들에서 이 과정을 위해 상당한 초기 비용이 발생되기 때문에, 어떻게 처리하는지에 따라 사용자 경험에 영향을 큰 영향을 미치게 된다.

이 글은 보다 효율적인 hydration을 위해 다양한 프레임워크들이 채택하고 있는 접근 방법들을 소개하고 있다.