OTW for FE

정말 다른 언어로 바꿔야 하나요?

2024. 11. 1.

정말 다른 언어로 바꿔야 하나요?

Why I’m skeptical of rewriting JavaScript tools in “faster” languages | Read the Tea Leaves
I've written a lot of JavaScript. I like JavaScript. And more importantly, I've built up a set of skills in understanding, optimizing, and debugging JavaScript that I'm reluctant to give up on. So maybe it's natural that I get a worried pit in my stomach over the current mania to rewrite every Node.js tool in…

심윤섭: JS 도구들이 최근 다른 언어로 재작성하는 것이 많아졌습니다. 하지만 JS도 충분히 빠를 수 있고, 다른 언어로 작성된 JS 도구의 오류가 고치기 어렵다는 것은 어떤 도구를 선택할지 고민해야 할 부분이라고 생각합니다. 빠른 것은 좋지만, 디버깅/호환성… 같은 단점은 감수해야합니다.

Vercel과 마이크로프론트엔드

How Vercel adopted microfrontends - Vercel
Learn how Vercel cut build times and improved developer velocity while maintaining a smooth user experience with microfrontends.

심윤섭: Vercel에서 본 마이크로프론트엔드의 접근 방식, 그리고 어떤 방식으로 마이그레이션했는지를 간단하게 소개하는 글입니다. 마이크로프론트엔드 관련 개념과 최신 기술을 통해 단점을 보완하는 방법을 배울 수 있습니다.

추상화와 간접적인 레이어의 차이

That's not an abstraction, that's just a layer of indirection
fhur's blog

추상화에 대한 간단한 생각을 펼친 글입니다. 좋은 추상화는 효율적이라는 것은 누구나 알지만, 추상화라고 생각했는데 래퍼일 수도 있고, 추상화가 복잡하게 되서 안하느니만 못해지는 경우도 있습니다. 여러가지 글(추상화는 적절하게, DRY가 잘못되어가는 방식)을 살펴보고 접근 방식을 생각해보면 좋습니다.

컨테이너에 딱 맞게 텍스트 표시하기

Perfectly Fitting Text to Container in React
Building a React component that automatically updates its font size to fill its parent element as fully as possible.

DOM과 관련된 정보를 React에서 모두 관리하는 접근방식과, 외부에서 접근하는 방식을 소개하며 장단점과 주의해야 할 점을 모두 소개합니다. React에서 DOM에 접근하는 방식을 배워볼 수 있습니다.

useCallback에서 외부 콜백 다루기

Creating a Keyboard Shortcut Hook in React (Deep Dive) | Tania Rascia's Personal Website
Recently I needed to add some keyboard shortcuts to an app I was working on. I wrote up some example code and decided to write this article…

키보드 단축키를 다루는 훅을 만들면서 useCallback을 사용하면서 생기는 클로저 문제를 해결하는 트릭을 소개하는 글입니다.

RN New Architecture 대비하기

React Native’s New Architecture: The Tricky Parts (1/2) | by Jakub Piasecki | Oct, 2024 | Software Mansion
It’s been a long time coming — with the release of React Native 0.76, the New Architecture will be the default way of creating applications. If you have not heard of it by now, check out this page in…

React Native에서 0.76버전을 출시하면서 New Architecture이 기본 옵션으로 변경되었습니다. 그로 인해 바꿔야 할 점을 소개하는 글입니다. 이외에도 New Architecture을 적용한 과정을 소개한 글도 있으니 관심있으면 보세요.

NextJS(App router)의 캐시 전략

Server Side State management in NextJS: a deep dive into React Cache
In previous posts, I explored how Server Components in NextJS improve performance by offloading more rendering to the server. Managing server-side state differs from client-side, as it’s static and immutable during a single render. NextJS provides tools like cache, unstable_cache, and patched fetch to manage this state efficiently, reducing prop drilling and simplifying code. These tools offer caching across requests, but require a shift from traditional client-side approaches for better performance

NextJS에서 서버측 상태를 관리하는 방법과, React 19에서 제공하는 cache함수를 사용할 때 주의할 점을 소개합니다.

CSS 구문 표준을 어떻게 정해야 하는가

Help us choose the final syntax for Masonry in CSS | WebKit

내용은 Grid Masonry에 대한 생각에서 나온 구문에 대한 Webkit 측의 입장을 정리해 놓은 글입니다. 하지만 W3C 워킹 그룹이 언어 구문에 대해 선택하는 기준에 대해 소개하기에 이를 기능 만드는데에 재사용성과 코드 구성하는 데에 적용해볼 수 있을듯하네요.

신 기능/기술 소개

Smarter than 'Ctrl+F': Linking Directly to Web Page Content
Discover how text fragments revolutionize web navigation. Learn to link directly to specific text on any web page, surpassing traditional 'Ctrl+F' searches. Explore this powerful, user-friendly feature for precise content sharing and improved web experiences.
Next.js 15 | Next.js
Next.js 15 introduces React 19 support, caching improvements, a stable release for Turbopack in development, new APIs, and more.

첫번째 글은 검색한 단어를 강조하는 기능(URL Text Fragments)을 소개하는 글입니다. 두번째 글은 NextJS 15 버전 출시를 소개하는 글입니다. 업그레이드를 위한 자동 코드 변환, 캐싱 기본값 / 비동기 요청 API가 눈에 띄네요.