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

- useIsomorphicEffect는 없다.


https://smoores.dev/post/no_such_thing_isomorphic_layout_effect/


라이브러리에서 useLayoutEffectuseEffect를 조합해서 useIsomorphicEffect로 사용하는 경우가 종종 있습니다. 하지만 이 경우 useEffect는 아무 역할을 하지 않는 사실을 간과하고 있다는 것을 지적하는 글입니다. 항상 useLayoutEffect사용이 경고에 그치는 이유는, 그저 주의하라는 이야기입니다.

- TypeScript 마이그레이션을 다운타임 없이 완료하기


https://benhowdle.im/migrating-js-to-ts-zero-downtime.html


이전에 소개한 여러 Migration 방식 소개( https://ones-to-watch.ethansup.net/news/post/a50a179e-3bb4-4959-83d9-4f5ed59bba5d#3a6644d1-aec5-404e-bbf8-87d511296f40 )와 같이, 여러 전략 중에 요구사항에 맞게 어떤 방식을 택했는지 소개하는 글입니다. 여러 도구와 함께 소개하고 있으므로, 나중에 요구사항이 다가오면 이 도구 중에 선택하는 것을 고려하는 것도 좋습니다.


- 어플리케이션에서의 HTTP/2의 의미


https://byroot.github.io/ruby/performance/2025/02/24/http2-past-the-load-balancer.html


HTTP/2가 등장한 배경과 어떤 것을 개선했는지, 그리고 왜 어플리케이션 서버에서 HTTP/2의 의미가 퇴색되는지를 소개하는 글입니다. 이전에 소개했던 브라우저의 로딩 매커니즘 ( https://www.youtube.com/watch?v=p0lFyPuH8Zs ) 발표에서 HTTP/2를 어플리케이션 서버에서 제대로 처리하지 않는다는 것에 대한 이유가 될 수 있겠네요.


- React에서 흔히 겪는 성능 문제 해결

https://blog.sentry.io/react-js-performance-guide/


Sentry에서 React 어플리케이션을 만들 때 일반적으로 겪는 성능 문제와 해결하는 다양한 방법을 소개하는 글입니다.


- 모바일 웹 서비스는 별로 없을까


https://adactio.com/journal/21728


모바일 웹 대신 모바일 어플리케이션을 구현하는 문화때문에 모바일 웹의 경험이 많이 나쁘다는 새로운 관점의 글입니다. 딱히 해결책을 제시해주진 않지만, 현재 모바일 웹은 데스크탑 웹만큼 지원을 많이 하고 있어 살펴보는 것을 추천드립니다.

- cache()로 Server Components의 waterfall 방지하기


https://aurorascharff.no/posts/avoiding-server-component-waterfall-fetching-with-react-19-cache/


React 19로 들어오면서 cache()함수로 React에서 데이터 값을 캐시할 수 있는 방법을 제공합니다. Server Components의 waterfall을 근본적으로 해결할 수는 없지만, 캐싱으로 보완할 수 있으므로, 이 글에서 제공하는 cache() 함수를 사용하는 방법과 주의해야 하는 법을 인지하는 것이 좋습니다.

- 대체 텍스트 생성 비교 실험


https://dri.es/comparing-local-llms-for-alt-text-generation


여러 LLM으로 이미지의 Alt text를 자동으로 생성하고 잘 생성했는지 테스트해보는 재밌는 글입니다. 여러 LLM과 그를 보완할만한 방법을 제시하고 있으므로 가볍게 읽어보기 좋습니다.

- Tanstack Router에 대한 고찰


https://gist.github.com/mitsuhiko/555b45f020a8d7e389516b51f6d03534

Tanstack Router의 메타 프레임워크 접근법에 대한 주관적인 고찰을 적은 글입니다. 나오지 않은 기능들과 불편한 통합에 대한 아쉬움과 TypeScript 성능 최적화 ( https://tanstack.com/blog/tanstack-router-typescript-performance )와 타입 추론을 통한 full typesafe에 대한 불만이 주를 이루고 있습니다.


- WeakMap를 어떻게 사용해야 할까

https://jlongster.com/subverting-control-weak-refs

WeakMap은 jotai에서 사용하고 있을 정도 ( https://jotai.org/docs/guides/core-internals )로 일반적이지만, 어플리케이션에서 바로 사용할만큼 친숙하지 않습니다. 이 글은 어떻게 사용해야하는지 예시와 함께 친절하게 소개하는 글입니다.

- JS 개발자와 Rust 플러그인

https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-11/

Rust에서 TypeScript로( https://www.prisma.io/blog/from-rust-to-typescript-a-new-chapter-for-prisma-orm ) 바꾼 Prisma의 결정처럼, Rust 기반 코어 로직에 커스텀 로직을 넣기에는 여러 애로사항이 있기에 Rust를 JS 기반 도구로 사용하기에 어려움이 있습니다. 이 글에서는 Rust 라이브러리에서 JS 플러그인을 성능 저하 없이 실행하는 해결책을 제시합니다.


- 함수형 패러다임은 React의 어디에 있는가


https://www.56kode.com/posts/level-up-react-functional-programming-in-react/


React에서 여러 함수형 패러다임이 적용되었다고 하는데, 왜 적용했고, 어디에 적용되었는지 소개하는 글입니다. 이 글을 통해 함수형 프로그래밍에 관심이 생겼다면, 함수형 프로그래밍 입문하기( https://janhesters.com/blog/unleash-javascripts-potential-with-functional-programming )를 참고하세요.

- 기발한 애니메이션 구현하기


https://www.joshwcomeau.com/blog/whimsical-animations/


글쓴이가 여러가지 기발한 애니메이션을 구현하면서 사용한 여러가지 CSS 속성, svg 방식, 수학적 개념을 소개하는 글입니다.

- INP를 향상하는 수많은 방법들


https://medium.com/preply-engineering/how-preply-improved-inp-on-a-next-js-application-without-react-server-components-and-app-router-491713149875


이전에 소개했던 React에서 INP 개선하기( https://kurtextrem.de/posts/improve-inp-react ) 글의 방법 이외에도 INP를 개선하는 방법은 매우 많습니다. 이 글에서는 어떻게 INP를 측정했는지, 그리고 어떻게 개선했는지 소개합니다.

- WebAuthn 테스트는 어떻게 해야 하죠

https://www.heal.dev/docs/blog/testing-webauthn

WebAuthn이 어떻게 동작하는지, 그리고 WebAuthn을 구현했을 때 테스트는 어떻게 해야 하는지 소개하는 글입니다.


- throw vs return


https://sergiodxa.com/articles/throwing-vs-returning-redirects-in-react-router

React Router에서는 throw로 redirect하는 것을 지원합니다. 이 경우 어느 때 throw로 redirect를 써야하고, return으로 redirect하는 것을 써야하는지 고민해보는 간단한 글입니다.


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

smoores.dev - There’s no such thing as an isomorphic layout effect

smoores.dev

smoores.dev - There’s no such thing as an isomorphic layout effect

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2025년 3월 5일 오후 11:40

댓글 0

    함께 읽은 게시물

    테드(TED) 강의장에 황소가 등장했다. <생각의 공유> 저자 리오르 조레프는 청중에게 황소 무게를 예측해 보라고 제안한다. 그러자 140㎏에서 3t까지 다양한 오답이 쏟아졌다.

    ... 더 보기

    왜 공동체에 집단 지성이 필요한가?

    기호일보 - 아침을 여는 신문

    왜 공동체에 집단 지성이 필요한가?

    MCP 모르면 대체 얼마나 손해 보는 걸까?🤔

    ... 더 보기

    MCP 모르면 대체 얼마나 손해 보는 걸까? | 요즘IT

    요즘IT

    MCP 모르면 대체 얼마나 손해 보는 걸까? | 요즘IT


    코틀린 리액티브 SSE 푸시 By 클루드

    ... 더 보기

    WEBNORI

    wiki.webnori.com

    WEBNORI

    Replit 이용 후기

    최근 Replit를 사용하면서 느낀 점을 남겨봅니다.

    ... 더 보기

    스스로 생각하는 힘

    

    ... 더 보기