HTML 태그의 중요성.

암시적인 웹

A collection of bad practices in HTML, copied from real websites.

심윤섭: 잊을만 하면 찾아오는 웹 접근성에 대한 글입니다. HTML-AAM으로 HTML 태그들은 자동적으로 접근성 API로 매핑되며, 아무리 일반 div나 span 요소를 ARIA 속성과 CSS 속성으로 보조한다고 해도 상황에 맞는 HTML 태그를 사용하는 것이 더 좋다라는 것을 예시와 함께 주장합니다. 최근 우아한형제들에서도 간단한 웹 접근성을 소개하고 있으니 두 글을 예시로 기억하고 있으면 좋습니다.

최원빈: 최근 분산되는 초점을 맞추기 위해 div에 role="button" 등을 넣어야 하는 경우가 있었는데, 역시 정확한 이해를 하고 사용하는 것이 중요한 것 같아요. 진입장벽이 좀 높다 생각은 들지만, 반드시 챙겨야 하는 부분이죠.

김대관: HTML 태그들은 자동적으로 접근성 API로 매핑하는 HTML-AAM이라는 새로운 기술을 배우게 된 글이었습니다. 작년 말에 문서가 최신화된 기술이며, 아직 비표준 기술이지만 앞으로 웹 접근성에 대해 많은 발전이 고민될 것 이라고 생각합니다. Aria-label이나 role과 같은 체계가 어떻게 실제적인 웹 접근성에 기여하는지 알면 좋을 것 같습니다.

JIT이 더 빠르게 되었습니다.

Maglev - V8’s Fastest Optimizing JIT · V8

V8's newest compiler, Maglev, improves performance while reducing power consumption

심윤섭: V8의 JIT 인터프리터 단계에 한 단계가 더 추가되었습니다. SpiderMonkey와 V8 둘 다 4단계의 인터프리터 단계를 가졌다고 볼 수 있습니다(SpiderMonkey). 프론트엔드 개발자에게 이 글이 도움이 되냐고 물어보면 좋지 않다고 생각합니다. 위 글을 보기보다는 이 두 글(1, 1의 한국어, 2, 2의 한국어)를 강조하기 위해 정보성 글로 가져왔습니다.

Promise는 monad가 아니다.

Why JavaScript promises aren’t technically monads | functional fascinations

While I was chomping down on my lunch the other day, I was web browsing when I stumbled on this tweet.

심윤섭: 함수형 프로그래밍의 정수라고 일컬어지는 monad에 대한 설명이 잘 되어있습니다. 쉽게 설명하고 있으므로 한 번 보는 것을 추천드립니다. 모나드가 무엇인지 궁금한 사람이 흥미롭게 볼 만한 주제입니다.

최원빈: 벨로그에도 초기 개념을 이해하기 쉽게 작성해 둔 글이 있어 가져왔습니다. 명시적 타입을 반환하는 함수들로 하여금 체이닝할 수 있게 한다는 개념을 알아두면 좋겠네요.

React에서 상태 불일치

Concurrent React, External Stores, and Tearing

React 18 exposes an API to do concurrent rendering. But when used alongside external stores, this concurrency introduces a theoretical issue called tearing. Let's explore what that means and how to avoid it.

심윤섭: React가 동시 모드로 들어오면서 useState와 useEffect기반으로 만들어진 외부 상태 훅에서 startTransition을 사용하면 렌더링 중에 상태 불일치가 발생되었고, 이를 어떻게 해결하였는지 보여주는 글입니다. useState와 useEffect, useSyncExternalStore와 useContext의 장단점은 주로 라이브러리 개발자가 사용하지만, 알아두면 React의 상태를 다루는데에 좋으므로 보길 권장드립니다.

React 18에서의 불만

React Server Components: the Good, the Bad, and the Ugly

Evaluating Next.js's implementation of React's new server features.

심윤섭: React에서 소개한 Server Component는 새로운 패러다임을 가져올 줄 알았지만 오류는 상당하고 기존 다른 기능들의 레거시는 해결되지 않은 채 사용되고 있습니다. 글쓴이는 이를 바탕으로 React와 Next.js가 갈 길이 멀었으며, 시중에는 레거시를 치운 프레임워크가 많다는 것을 인지해달라는 취지로 글을 썼다고 합니다(비슷한 글). 개인적으로는 React의 넓은 생태계(특히 UI에 결합된)를 대체하지는 못하지만 넓은 생태계를 많이 활용하는 것이 아니라면 다른 프레임워크에 눈독을 들여도 괜찮다고 생각합니다.

React의 flushsync는 무엇인가요?

https://julesblom.com/writing/flushsync

심윤섭: flushsync는 비동기적으로 업데이트하는 set를 즉시 업데이트하도록 강제하는 함수입니다. 이 글에서는 flushsync가 어떻게 동작하는지 시각적으로 보여주고, 어디에 쓰이는지 알려줍니다. 글에서 보여준대로 form에서 많이 사용될 것으로 보입니다. 하지만 언제나 악용은 좋지 않습니다. 잠깐 나오는 개념인 render - commit개념을 알고싶다면 이 글을 참고해주세요.

React의 form hook 생성

Understanding React’s useFormState and useFormStatus Hooks - LogRocket Blog

React released two Hooks intended to help with forms: useFormState and useFormStatus. Learn how to use them in your forms in this post.

심윤섭: 실험 기능인 useFormState와 useFormStatus를 소개합니다. 이런 기능도 있다라는 것만 알아두고 실제 기능을 사용할 것이라면 react-hook-form을 사용하세요 🙂

Next.js의 신기능

Next.js 14 Intercepting Routes

Get a handle on intercepting routes in Next.js 14. Use intercepting routes to display parts of your app on any page, without changing context for your users.

Next.js 14 Parallel Routes: A Detailed Guide

Use the power of parallel routes to build a dashboard that displays multiple pages at the same time. Learn about independent route handling and sub-navigation.

심윤섭: Next.js의 신기능은 항상 새롭습니다. 저는 둘 중에 intercepting routes에 더 관심이 갑니다. 매끄러운 UX와 함께 웹을 사용하게 하려면 Modal을 열었을 때 URL 변경이 필요한 경우가 있는데(ex. 인스타그램의 게시물) 이를 구현하기 위해 많은 노력이 필요한데, 이를 기능으로 출시했다는 것이 좋은 부분이라고 생각합니다.

김대관: NextJS를 활용하면서 page라는 분할 방식을 다양하게 할 수 있는 기능들을 소개하는 내용입니다. 저는 Parallel Route 기술에 더 흥미가 갑니다. 제가 보았을 때에는 Parallel Route는 page를 컴포넌트처럼 처리할 수 있는 방식이라고 생각됩니다.어떤 개발 상황에 따라서, 성능적으로 단순 컴포넌트가 좋을지? page에서 parallel Route를 통해 하면 좋을지? 다양한 상황에서의 성능 비교를 통해 앞으로 NextJS에서의 기능을 최적화할 수 있을지가 기대가 됩니다

동형 매핑 타입이 무엇인가요?

What the heck is a homomorphic mapped type? · andrea simone costa

Let's try to understand what the TypeScript guys mean when they talk about homomorphic mapped types

심윤섭: TypeScript의 고급 기능을 사용하려면 이해해야 할 개념 중 하나를 소개하고 있습니다. 이해하기 힘들더라도 유틸리티 타입이 제너릭 안에 들어가는 타입에 따라 어떻게 동작하는지만 알고 있으면 좋습니다.

토스의 로깅 개발 일지

프론트엔드 로깅 신경 안 쓰기

프론트엔드 개발자라면 한 번쯤 고민해봤을 클라이언트 로깅 개선 과정을 공유합니다.

심윤섭: 이 글을 가져온 이유는 "라이브러리를 사용하는 개발자는 어디까지 알고있어야 하는가"에 대한 고민이 잘 녹아들어 있어서 가져왔습니다. 마지막이 정답이라는 것이 아니고, 항상 결정(여기서는 암시적으로 실행하는 것과 명시적으로 실행하는 것)에 대한 장단점을 고려하면서 결정해야 한다는 것을 알면 좋겠다는 취지에서 가져왔습니다. 물론 무엇이든 문서화를 잘 해놓으면 상쇄되겠지만요.

김대관: 저는 글의 내용에서 저의 문제점을 찾게 되었습니다. 웹페이지 로깅 관련한 개발하면서 로깅 코드들만 따로 분리해서 관리한다는 막연한 생각으로 했었는데, 토스에서는 어떻게 관심사를 분리하여 처리하는 것에 집중하는 가에 대해 알게되었습니다. 제가 로깅하는 서비스를 관리하는 토스에 비해서 로깅하는 양이 많지 않아 단순 코드 분리를 해도 큰 무리가 없지만, 앞으로의 확장성과 관련하여 로깅에 대한 관심사 분리를 어떻게 할지 한번 더 생각해볼 필요가 있겠습니다.

TypeScript 오류 해결 튜토리얼

Solving TypeScript Errors Tutorial | Total TypeScript

TypeScript boosts productivity but faces pitfalls like type mismatches, null values, & puzzling errors. Learn to spot & solve these for swift progress.

기사는 아니고 타입스크립트 입문에 도움이 될만한 튜토리얼이라고 생각해서 가져왔습니다. 오류를 any나 @ts-ignore로 무시하는 것은 보통 좋지 않습니다.