최신 프레임워크는 SPA만 지원하지 않는다.

최신 프레임워크는 SPA만 지원하지 않는다.

What's a Single-Page App? | jakelazaroff.com

The web development community talks a lot about single-page apps, but are we all on a single page? Here's my ontology of web app architectures, organized by rendering and navigation.

심윤섭: 여러가지 프레임워크가 등장하면서 예전에는 프레임워크가 하나의 아키텍쳐과 하나의 방식만 지원했지만, SPA의 등장, 메타 프레임워크의 등장, …이 진행되면서 한 프레임워크가 여러가지 아키텍쳐나 방식을 지원하면서 경계가 애매해졌습니다. 이 글에서는 SPA/MPA, SSR/CSR의 차이를 알고 어떤 프레임워크가 어떤 방식을 지원하는지 소개합니다.

React 19에서 SearchParams 핸들링하기

Managing Advanced Search Param Filtering in the Next.js App Router | Aurora Scharff

When working with React Server Components and other new features and patterns in the Next.js App Router, it can be hard to manage advanced search param filtering. In this blog post, we will explore how to implement advanced search param filtering in the Next.js App Router, utilizing React 19 features like useOptimistic and the library nuqs.

Next.js App router에서 SearchParams와 use훅을 활용해서 간단하게 만들면 라우팅이 바로 안되는 현상을 useTransition, useOptimistic 훅을 활용해서 SearchParams를 활용하면서 로딩 상태 구현, 낙관적 업데이트 구현하는 글입니다. 검색과 필터링을 useSearchParams와 서버상태 라이브러리를 통해 구현하는 글은 있었지만, 신선한 접근이네요.

Barrel File 쓰지 마세요. 제발.

Jason Miller | Scaling Vite at Shopify | ViteConf 2024 - YouTube

Lessons learned from migrating Shopify's largest frontend codebase to Vite.https://ViteConf.org hosted by https://StackBlitz.com

Webpack to Vite 마이그레이션을 통해서 개발/빌드 시간을 단축하는 것이 큰 주제이지만, 많은 내용이 Barrel File이 왜 안 좋은지, 이를 어떻게 해결했는지를 보여주는 발표입니다. (그 외에는 loader 방식 채용과 tree shaking 관련). Barrel File을 사용하면 안되는 이유를 설명한 글 중에서는 Tkdodo의 글도 좋지만, 세세하게 번들링 측면에서 보여줘서 좋은 발표입니다.

데이터 동기화 지표

A Map of Sync

We can categorize sync platforms across nine dimensions: data size, data update rate, the structure of the data, input latency, offline support, numbe...

게임부터 문서 작업, 단순 데이터 프레임워크까지 동기화에 관련된 플랫폼/프레임워크에 대한 지표를 소개합니다. 데이터 동기화는 협업 기능 구현과 관련있기 때문에, 협업 기능 구현을 위한 아키텍쳐 글도 보시면 좋습니다.

CSS reset을 layer로 감싸야 하는 이유

최근 CSS 표준으로 들어온 @layer(Cascade Layers)를 CSS reset을 사용할 때 활용해야 한다고 주장하는 글입니다. 경우에 따라서 명시도 속임수를 통해서 스타일을 변경해야 하는 경우도 생길 수 있으니, 모던 브라우저를 지원한다면 고려해볼만하네요. 이외에도 Cascade Layer에 대한 설명이나 스타일 계산 방식을 알고싶다면 CSS-Trick에서의 소개 글을 보는 것도 좋습니다.

JS generator 소개하기

Why would anyone need JavaScript generator functions?

You can go a long time as a JavaScript developer without ever feeling the need for generators. Hence, it’s natural to wonder: What are they good for? Why would you ever need one? What’s the point? But generators can do some neat tricks. And they may even change the way you approach certain problems.

JS generator를 소개하고, 함수형 프로그래밍에 어떻게 조합되는지를 소개하는 글입니다. 많이 사용되는 패턴은 아니지만, React에서 상태 관리를 위해 가끔씩 보이는 패턴이므로(react-stately, redux-saga) 숙지해둘 필요는 있어보입니다.

HTTP/3 써보실래요?

https://www.cloudflare.com/ko-kr/learning/performance/what-is-http3/

Cloudflare의 HTTP/3의 등장한 이유, 써야 하는 이유를 소개하는 글입니다.