SPA에서 데이터는 어떻게 받아올까

Data Fetching Patterns in Single-Page Applications

심윤섭: React와 Vue에서 일반적 fetch 로직에서 시작해서 loading, suspense, Fetch-On-Render / Fetch-Then-Render, parallel fetching…같은 Fetch에 관련된 거의 모든 개념을 말해주는 글입니다. @tanstack/query를 사용하면서 Fetch 전략을 사용하는 것이 자연스러워졌지만 전략의 개념을 다 설명해주지 않기 때문에 볼 만한 글이라고 생각합니다.

Tanstack Query에서의 메모리 누수

Sneaky React Memory Leaks II: Closures Vs. React Query | Kevin Schiener

How to spot and fix memory leaks in React Query caused by closure scopes.

심윤섭: React에서의 메모리 누수와 같은 저자가 쓴 글입니다. Tanstack Query에서의 누수라고 하지만, 컴포넌트 안에서의 함수 선언을 조심하라는 글과 같다고 생각합니다. 여기서 제공하는 해결방식 말고도 queryOptions라는 해결책도 있습니다.

CSS gap을 사용하세요.

The Gap

An exploration of the pain points that CSS gap solves.

심윤섭: flex가 도입되기 이전에는 요소 사이의 간격을 margin과 CSS 선택자를 활용해 처리했습니다. 검색하면 gap에 대한 답이 많이 안 나오는 것도 한 몫했구요. contrast-color()에 대한 생각들에서 말했듯이, CSS 신 기술이 개발자들에게 닿으려면 오래 걸리지만, 팀원들에게 퍼트려서 사용처를 늘리는게 중요하다고 생각합니다.

DOM depth를 줄이세요.

How Deep is Your DOM? | Frontend at Scale

Is it like the ocean?

심윤섭: 저자의 간단한 실험으로 DOM depth가 커지면 커질수록 HTML 파싱과 CSS 트리 생성에 차질이 생기는 것을 확인하는 글입니다. 항상 신경을 곤두세울만한 부분은 아니지만, 주기마다 한 번씩 체크하는 것은 필요해보이네요.

Micro Frontends…?

Micro Frontends

심윤섭: MSA에 대해서는 HTMX에 대한 의견들에서 단순한 아키텍쳐 방어하기라는 글로만 간접적으로 소개했었는데, 우아한 형제들의 웹 애플리케이션 페이지를 패키지로 개발해 본 경험 공유에서 Micro Frontends의 기법 중 하나인 Module Federation을 소개하길래 그 상위 개념인 Micro Frontends을 정리한 글을 가져왔습니다. Module Federation은 발전하고 있고(이전에도 적용한 강남언니의 사례도 있죠), 네트워크 속도만 충분하다면 이상적이지만 GraphQL과 동일하게 특정 상황을 해결하기 위해 만들어진 도구이니 충분히 고려 후에 적용하는 것이 중요하다고 생각합니다. 또한 MSA는 이제 끝인가요?에서도 말하듯이, MSA는 인프라 뿐만 아니라 서비스, 개발문화, 소통 방식까지 포함되어 있습니다. 많은 것을 고려해야 하겠네요.

Promise의 역사

Promises From The Ground Up

The “Promises” API is a surprisingly tricky part of modern JavaScript. Without the right context, it doesn’t make much sense at all! In this tutorial, you’ll build an intuition for how Promises work by getting a deeper understanding of JavaScript and its limitations.

Promise의 역사에 대해 친절하게 풀어놓은 글입니다. 더 깊게 알아보실 예정이라면 JavaScript Info의 프라미스와 async, await파트를 보시는 것을 추천합니다.

제발 Skip to main content 만들어주세요.

Please support “skip to main content” on your docs site

접근성을 위해 Skip to main content를 만들어달라는 가벼운 글입니다.

Storybook의 type-safe mocking 접근법

Type-safe module mocking in Storybook

A new, standards-based mocking approach

Storybook에서 Jest나 Vitest의 mocking 접근법(mocks 폴더를 탐색하거나 테스트 파일 안에서 mocking 둘 다 허용하는 방식)과 다르지만 표준에 맞춘 접근법을 소개합니다. Mocking이 이루어지는 위치를 분명하게 하고 type-safe도 챙길 수 있다고 소개합니다.

Framer Motion을 대체하는 CSS 신기술

Do you still need Framer Motion? - Motion One Blog

In the five years since Framer Motion was released, CSS animation APIs have come a long way. Do you still need to use Framer Motion?

현재 출시하거나 출시 할 예정인 CSS 기능들을 Framer Motion의 기능과 연결지어 소개하는 글입니다. CSS 신기능은 좋지만 출시하고 안정적이게 되려면 시간이 걸리기 때문에 CSS에 이러한 신 기능이 있을 예정이다만 알고 계시면 좋다고 생각합니다.

SSR에서 JSX 속도 빠르게 하기

Speeding up the JavaScript ecosystem - Server Side JSX

React에서 태그를 React.createElement로 변환하는 것 대신 String으로 만들어서 삽입하는 방식으로 변환해서 변환 속도를 빠르게 하겠다는 글입니다. 가볍게 볼만한 글이네요.

Corepack 사용법

How To Use Corepack | Total TypeScript

Learn how to use `corepack` to configure package managers in Node.js projects, ensuring you always use the correct one.

Corepack은 Node.js 14버전부터 시작된 다른 패키지 매니저를 사용하기 쉽고 패키지 매니저를 고정하는 내장 라이브러리입니다. 간단하게 소개하는 사용법을 보고 사용해보세요. 다른 Node.js 기능을 알아보려면 10가지 모던 Node.js 런타임 기능을 보세요.