저번주 프론트엔드 볼거리 (#63)

- TypeScript, Go로 다시 만들다.

https://www.totaltypescript.com/typescript-go-rewrite

TypeScript 코드가 Go로 다시 만들어진다는 소식입니다. Rust가 아닌 이유( https://github.com/microsoft/typescript-go/discussions/411#discussioncomment-12476218 )도 흥미롭게 설명하게 설명하고 있으므로 흥미가 생겼으면 링크를 통해 보시길 바랍니다.

- 동기와 비동기 그 사이 어딘가

https://antfu.me/posts/async-sync-in-between

옛날 JS는 동기로 이루어진 코드가 많았습니다. 그래서 현재 비동기 코드를 사용해야 하는 경우, 그리고 동기 코드를 사용하는 경우 어떻게 실행하는지, 위의 경우의 수들을 라이브러리에서 어떻게 대응했는지, 그리고 이를 더 다양한 사람이 쉽게 동기/비동기가 섞여있는 코드를 대응 수 있는 라이브러리인 quansync를 소개하는 글입니다. Node.js 코드를 보면 동기 코드를 종종 볼 수 있는데, 이 때 어떻게 실행되는지, 그리고 quansync를 도입해야 하는지 고민해볼 수 있겠습니다.

- React, Solid, 그리고 htmx가 가는 길

https://bobaekang.com/blog/react-solid-htmx-part-2/

React, Solid, htmx가 흘러온 역사와 어떤 방향을 바라보며 로드맵을 어떻게 제시하는지 소개하는 글입니다. React관련한 상황은 쉽게 찾아볼 수 있지만, Solid.js나 htmx의 근황에 대해 자세하게 알려주는 글은 없기에 근황을 짚어보기에 좋습니다.

- React Native… 그 상대는?

https://lynxjs.org/blog/lynx-unlock-native-for-more

틱톡을 만든 바이트댄스에서 내부에서 사용하던 웹 기술을 사용한 렌더러와 런타임을 소개하였습니다. Rspack이나 여러 웹 기반 모바일 라이브러리를 혼합해서 사용하여 크로스 플랫폼을 구현할 수 있으므로, React Native의 대안이 될 수도 있겠으나, Native를 향한 길은 멀기에 지켜봐야 할 것 같습니다.

- Signal을 React에서 쓰는게 좋은가?

https://www.felgus.dev/blog/signals-in-react

Signal을 적극적으로 도입한 Solid.js가 등장하면서 주목을 받고, Signal을 React에서 사용하고자 하는 시도는 몇 번 있었습니다. 하지만 이는 React의 주요 개념인 single source of truth나 일반적인 JSX에 부딫히기 때문에, 도입을 하려면 요구사항을 깊게 고려해야 합니다.

- JS를 새로 시작하기에 피곤하다.

https://allenpike.com/2025/javascript-fatigue-ssr

JS 생태계에서 레거시를 지양하고, 여러 최신 API나 개념을 적용할 수 있도록 여러가지 시도가 있었지만, 이는 JS 프레임워크를 선택하고 시작하기 어려워졌다는 결과로 이어졌습니다. 이 글은 왜 이런 JS 프레임워크 분화가 있었는지, 그리고 대략적으로 어떻게 JS 프레임워크 선택을 해야 하는지(주관적인 의견)을 제시하는 글입니다. JS 프레임워크가 분화가 일어났고, 처음에는 선택하기 어렵지만, 프레임워크가 왜 생겨났는지, 그리고 어떤 요구사항을 해결하기 위해 어떻게 만들어졌는지를 알게되면 선택에 도움이 됩니다.

- React를 더 잘 이해하기 위한 멘탈 모델

https://jordaneldredge.com/blog/transitions-f-of-state/

"UI = f(state)"( https://daverupert.com/2024/02/ui-states/ )는 리액트의 멘탈 모델로서 유명하고 많은 곳에 적용할 수 있습니다. 저자는 복잡한 어플리케이션에서는 적용이 어렵다고 말하고, UI 보다는 transition 집합을 반환하는 것이 React의 여러가지 예시를 설명하는데 좋다고 설명하고 있습니다. React의 비동기 업데이트나 동시 모드를 이 멘탈 모델을 통해 쉽게 설명하고 있으니 React 18이 이해가 어려우신 분들이 한 번 보시길 추천드립니다.

- 크롬을 앱처럼.

https://developer.chrome.com/docs/css-ui/edge-to-edge

Chrome 135(모바일)부터 meta태그를 통해 inset을 더 넓게 펼쳐서 웹사이트의 경험을 더 좋게 만들 수 있다는 글입니다.

- Redux를 그만 쓸 시간인거 같아.

https://www.bennett.ink/its-probably-time-to-stop-recommending-redux

Redux라고 특정지었지만, 전역 상태 관리 대신 API 캐시 라이브러리(ex. @tanstack/query, SWR)라이브러리를 사용해야 한다는 글입니다. 글의 제목은 자극적이지만, 상태 관리를 조심히 도입해야 하는 것도 맞습니다.

- Progress bar 대신 명확하게 디자인하기

https://cloudfour.com/thinks/truth-lies-and-progress-bars/

Progress bar를 구현할 때 단계를 어떻게 설정해야 할지 어려운 경우가 많기 때문에, 여러 다른 인터페이스를 제안하는 글입니다.

- 이 라이브러리 대체 가능한가요?

https://medium.com/ekino-france/is-biome-ready-to-replace-prettier-eslint-94d56d5aa33f

https://deno.com/blog/typescript-in-node-vs-deno

첫 번째는 Biome팀이 쓴 ESLint/Prettier를 대체할 수 있냐는 질문에 대한 답변과 Biome의 특징을 설명하는 글, 두 번째는 Deno 팀이 NodeJS가 TypeScript 지원이 Deno의 TypeScript 지원과 다른 점을 설명하는 글입니다. 둘 다 Biome보다 ESLint/Prettier, Node.js보다 Deno(TypeScript 네이티브 지원 부분에서)가 좋은 선택이라고 하지만, 미래에 좋은 도구가 될 것이며, 선택의 폭을 넓히는 길이 될 예정입니다.

- CSS만으로 <Rating> 컴포넌트 만들기

https://css-tricks.com/a-css-only-star-rating-component-and-more-part-1/

CSS의 여러 계산 값으로 별점 도구를 만드는 재밌는 구현 글입니다.

- React Native의 현재

https://blog.swmansion.com/wstate-of-react-native-2024-our-key-takeaways-19a7c0039d36

React Native Reanimated를 만든 회사인 Software Mansion에서 State of React Native 2024를 리뷰하는 글입니다. expo가 devtool 경험이 좋고, 계속 사용할 것이라는 지표가 많다는 것이 인상적이네요.

- Math.random 최적화

https://v8.dev/blog/mutable-heap-number

V8엔진에서 Math.random()가 성능 병목 현상이 있었고, 어떻게 해결했는지 해결했는지 다이어그램과 함께 소개하는 글입니다.

- 주목할만한 친구들

https://tanstack.com/blog/announcing-tanstack-form-v1

full Type-safe를 지향하는 Tanstack Form v1 출시 소식입니다.

https://react-spectrum.adobe.com/releases/2025-03-05.html

React aria의 여러 컴포넌트 출시와 usePress()호환성 업데이트 글 등 여러 업데이트에 대한 소식입니다.

https://stately.ai/blog/2025-02-26-xstate-store-v3

Xstate를 더 쉽게 사용할 수 있는 @xstate/store의 v3 출시 소식입니다.

https://re-pack.dev/blog/repack-5-release

React Native 빌드 도구를 rspack 기반으로 대체할 수 있게 해주는 re.pack의 v5 출시 소식 입니다.

https://www.better-auth.com/docs/introduction

여러 프레임워크에서 사용할 수 있는 AuthN, AuthZ 프레임워크입니다.

https://nextjs.org/blog/next-15-2

turbopack 개선이나 오류 UI 개선이 들어간 Next.js 버전 업데이트입니다.

https://github.com/daltonmenezes/electron-app

React, TS, Vite가 포함된 Electron 템플릿입니다. 처음 시작할 때 쓰기 좋아보이네요.

더 오래된 볼 거리를 찾으신다면 https://ones-to-watch.ethansup.net/ 를 참조해주세요. :)