2023-12

📚 링크 & 읽을 거리

2023년도 개발자 에코시스템 현황

Jetbrains에서 발표한 2023 개발자 설문조사 결과이다. 올해는 AI 관련 질문을 추가하여 설문 범위를 확대했다고 한다. 프로그래밍 언어, 인구 통계, AI, 라이프 스타일 등의 통계를 제공한다. JavaScript에 대한 내용도 함께 살펴보면 재미있다.

Declarative UI 생각하기

많은 개발자들이 사용하는 기술인 React는 자신을 Declarative 하다고 일컫는다. 그렇다면 혹시 Declarative UI가 무엇인지 알고 있는가? 본 글에서 필자는 Imperative와 Declarative를 비교하고, 현대의 Declarative UI는 어떻게 구성되고 특징을 가지는지 설명한다.

KLED: 한국어를 지원하는 퍼지 검색 라이브러리

지난 2021년 2월호에서 퍼지 문자열 검색 라이브러리 개발에 대한 글을 소개한 적이 있다. 이번에는 알고리즘을 발전시켜 더 '제대로' 만들어 보았다고 한다. 특히 한글도 고려하여 만든 점이 눈에 띈다.

퍼지 문자열 검색: 문자열을 정확히 입력하지 않아도 원하는 문자열을 검색하는 방법. (e.g. ㄱㄴㅇ -> 강남역)

MOBX + STANDARD DECORATORS

얼마 전 MobX가 6.11 버전을 출시하였고, 공식적으로 '다시' decorator를 지원한다고 밝혔다. 3년 전 6.0 버전 발표 당시에는 decorator 대신 makeObservable, makeAutoObservable이란 대안책을 제시했는데, 왜 다시 decorator를 지원하게 되었는지, 또 앞으로의 계획은 어떤지 한번 살펴보자.

UI Design Tips

UI를 구성을 고민할 때 적용해 볼 수 있는 소소한 팁들을 모아둔 곳이다. 가볍게 읽어보면 좋을 듯하다.

OpenNext

Next.js는 자사의 서비스인 Vercel이 아닌 다른 서버리스 플랫폼에서 호스팅하도록 제공되지 않는다는 것을 알고 있는가?

Vercel을 사용하지 않는 경우, Node.js 애플리케이션(Next.js 서버를 실행해 직접 서빙하거나 정적 빌드를 사용)으로 실행해야 한다. 그러나 이 경우에는, Vercel을 사용할 때와 동일하게 동작하지 않는다.

OpenNext는 Next.js 빌드를 패키지화해서 FaaS 플랫폼(현재는 ASW Lambda만 지원)에 배포되게 만들어 주는 어댑터로, 프레임워크에 구애받지 않는 Next.js 용 오픈 소스 서버리스 어댑터를 만드는 것을 목표로 한다.

[참고] Is NextJS A TRAP??? Vendor Lock In Rant

Building towards a new default rendering model for web applications

지난 10월 26일 공개된 Next.js 14에서는 빠른 초기 정적 응답을 제공하는 동적 콘텐츠를 위한 컴파일러 최적화를 위한 PPR(Partial Prerendering) 프리뷰 지원이 추가되었다.

PPR은 ISR(Incremental Static Regeneration)의 신뢰성과 스피드, 그리고 SSR(Server-Side Rendering)의 동적 기능을 혼합한 통합 모델을 제공한다.

PPR이 활성화되면 단일 React 렌더링 트리에서 렌더링이 발생되며, <Suspense /> 경계를 기반으로 정적 셸을 생성한다. fallback으로 지정한 요소는 사전 렌더링 된다.

사용자가 페이지를 방문하면, 정적 셸을 통해 사용을 시작하면 서버(스트리밍 아키텍처로 동적 chunk를 렌더링)와 클라이언트(스크립트, 스타일 시트, 폰트, 마크업 등을 파싱)가 병렬로 작업할 수 있게 된다.

[참고] Partial Prerendering in Next.js 14 (Preview)

performance.now() 2023

지난 11월 2~3일 암스테르담에서 열린 performance.now()는 웹 성능을 다루는 콘퍼런스다. 14개의 세션들을 통해 웹 성능에 대한 인사이트를 들어보고 배울 수 있다.

ESLint: Deprecation of formatting rules

지난 11월 3일 릴리스된 ESLint v8.53.0에서 포매팅 규칙을 deprecate 처리되었고, 이후 v10에서 완전히 제거할 계획을 발표했다.

주된 이유로는 언어적 발전에 따른 구문들의 변화와 프레임워크(주로 React)의 사용이 폭발적으로 증가함에 따라 스타일 규칙을 동결해 관리하고자 했지만, 더 이상 이러한 변화들과 사용자 요구를 따라잡기 어려워졌기 때문이라고 밝히고 있다.

대신 코드의 형식을 관리하고자 한다면, 코드 포매터인 Prettier 또는 Rust 기반의 dprint를 사용할 것을 권장한다.

Design Tools Survey 2023

매해 진행되는 디자인 도구 설문조사로, Front-end 관점에서 몇 가지 흥미로운 부분들에 대한 결과를 엿볼 수 있다.

가령 디자인 시스템을 사용하는지(그리고 관리를 위해 어떤 도구를 사용하는지), 기본 또는 고급 프로토타입을 만들 때 도구는 무엇을 활용하는지 등 다양한 인사이트를 얻을 수 있다.

How to fix nasty circular dependency issues once and for all in JavaScript & TypeScript

프로젝트가 점차 진행될수록 파일들이 많아지고 import, export 관계가 복잡해진다. 이런 경우 어떤 한 파일과 다른 파일이 서로를 참조하는 문제가 발생할 수 있다. 이러한 문제를 '순환 참조(circular dependency) 문제'라고 하는데, 이 문제는 대개 예상 밖의 에러 메시지를 출력하기 때문에 문제를 인식하기도 해결하기도 쉽지 않다.

본 글에서는 이러한 순환 참조 문제를 해결/예방하기 위한 간단한 패턴을 제시한다.

Transition animations: a practical guide

애니메이션과 모션은 제품 디자인의 핵심이지만 이것들을 구성할 때 가장 적절한 균형을 찾기란 여간 쉬운 일이 아니다. 이 글은 애니메이션과 모션 중에서 특히 Transition에 중점을 두고 6가지 원칙과 각 항목에 대한 세세한 예제들을 함께 제시하고 있다. 이를 통해 제품 단계에서 Transition 애니메이션을 적용할 때 고려할 만한 사항에 대한 인사이트를 얻어 보자.

글에서 제시하는 '더 나은 전환 애니메이션을 위한 6가지 원칙'은 다음과 같다.

1. 불투명도(opacity)로 fade in 및 fade out 적용
   
2. 생동감을 더하기 위한 스케일링
   
3. 일관된 방향성 유지
   
4. 속도 균형 맞추기
   
5. 우선순위 지정, 순서 지정 및 그룹화하기
   
6. 공간성 확립하기

🕹 튜토리얼

React Internals Deep Dive

React를 사용하는 개발자는 많지만 React가 내부적으로 어떻게 동작하는지 관심을 갖는 개발자는 생각보다 많지 않다. 총 37개의 글과 영상으로 구성되어 있는 이 사이트는 React가 내부적으로 어떻게 동작하는지 React의 실제 코드 레벨에서 자세히 설명해 준다.

An Interactive Guide to CSS Grid

이 튜토리얼에서는 CSS Grid의 기본부터 사용법까지 대화형 예제로 설명하는 점이 매력적이다. 먼저, 작가는 글에서 현재 CSS Grid는 caniuse 기준 97.8%의 유저를 지원하며, Flexbox는 이보다 0.5%만이 높다고 이야기한다.
CSS Grid는 1차원 Flexbox보다 복잡한 2차원 레이아웃을 쉽게 제어할 수 있는 시스템이다. 때때로 이 두 기술은 함께 사용되어 더 강력한 레이아웃을 만든다. 이제 익혀보도록 하자.

📦 코드와 도구

SST

애플리케이션이 AWS 서비스를 사용해 운영되게 하기 위해선 단순히 애플리케이션만을 잘 만드는 것으로 끝나지 않는다. AWS에 필요로 하는 인프라를 AWS 콘솔을 통해 구성해야 하며, 또한 로컬에서 테스트와 디버깅을 하는 것도 쉽지 않다.

SST는 이러한 문제를 해결하기 위해 IDE에서 직접 디버깅과 웹 기반의 대시보드를 사용해 애플리케이션을 관리하고 코드로 표현된 AWS 인프라를 AWS CDK를 통해 사용할 수 있도록 한다.

[참고] SST in 100 seconds

jsvu

jsvu는 "JavaScript (engine) Version Updater"라는 의미를 갖고 있으며, 다양한 JavaScript 엔진들의 소스를 컴파일할 필요 없이 최신 버전들을 설치할 수 있도록 도와주는 도구다.

LLM Visualization

이 도구는 LLM(Large Language Model)이 실제로 어떻게 작동하는지 기초부터 알아볼 수 있도록 시각화해 보여주며, PyTorch의 최소 GPT 구현인 minGPT 프로젝트에서 영감을 얻었다고 한다.

학습보다는 추론에 초점을 맞추고 있으며, toy 모델의 가중치를 미리 학습하고 추론 프로세스를 사용하여 출력을 생성해 준다. FE 관점에서는 내용 자체보다는 가이드의 구현(wasm을 사용)과 구성 측면에서 흥미롭게 볼 수 있을 것이다.

package-majors

이 웹서비스 도구는 NPM 패키지들의 메이저 버전들의 다운로드를 차트로 확인할 수 있게 한다.

단순히 다운로드 수에 집중한다기보다는 사용자들이 다음 메이저 버전으로 업그레이드를 얼마큼 하고 있는지를 확인할 수 있게 해, 자신의 서비스에서 사용되는 패키지의 메이저 버전으로의 업그레이드 고려 시 참고 자료로 활용할 수 있다.

ts-remove-unused

사용하지 않는 TypeScript 코드를 찾아서 삭제해 주는 도구이다. CLI로 실행할 수 있다.