OTW for FE

any 지양하기를 지향하기

2025. 2. 7.

any 지양하기를 지향하기

https://typescript-eslint.io/blog/avoiding-anys/

any 사용을 지양해야 할 때, 필요한 typescript-eslint속성들을 소개하는 글입니다. 물론 어쩔 수 없을 때만 @typescript-eslint/no-explicit-any을 사용하면 되겠지만, 히스토리 기록을 위해 코멘트를 장려하는 속성, 혹은 내장 글로벌 타입 지정을 구체적으로 하는 ts-reset 추천도 있습니다. 추가로 window에 삽입된 속성을 사용하기 위한 declare 사용법도 알고 계시면 좋습니다

단축키를 구성할 때 유의할 점

Jack Duvall's Blog - All Javascript Keyboard Shortcut Libraries Are Broken
Either subtly, or not-so-subtly. There is no way to fix the more subtle variant, and the only solution is to Give Up (on supporting a large subset of keyboard shortcuts).

단축키를 구성할 수 있는 라이브러리들 중 deprecated된 keycode, which, keyIdentifier를 사용하는 라이브러리가 많기에, 라이브러리 개발자나 크로스 브라우저 어플리케이션 개발자에게 권장되는 방법을 소개하는 글입니다.

Next.js app router 리뷰

beeps blog: next.js: an honest review
the good, the bad and the ugly

Next.js 14에 대한 주관적인 리뷰글입니다. 예전에도 App router에 대한 개인적인 리뷰Server Components에 대한 리뷰가 있었는데, 글에서 담긴대로 Server Components관련 문제나 인식/접근 관련 문제가 모두 해결된 것 같지 않아 아쉽네요.

JSDOM을 사용하지 않는 이유

Why I Won’t Use JSDOM | Epic Web Dev
Explore how JSDOM's browser simulation works, and learn front-end testing approaches using Vitest Browser Mode for direct browser testing and native APIs

JSDOM이 무엇인지 소개하고, 왜 문제가 될 수 있는지, 대체할 수 있는 방법은 무엇이 있는지 소개하는 글입니다. 비슷하게 저자의 다른 글인 Global 패치가 위험한 이유도 비슷한 결을 띄지만 여러 위험한 점을 짚어주므로 읽어보시길 권장드립니다.

192바이트 WASM 컴파일러 분석하기

A WebAssembly compiler that fits in a tweet | WebAssembly from the Ground Up
Starting with a 192-byte one-liner that implements a Reverse Polish Notation arithmetic compiler, we'll work backward to transform it into readable JavaScript by removing one code golf trick at a time

192바이트로 WASM을 실행하는 코드를 분석하면서 JS에서 보이는 최소화(Minification) 기법들과 WASM 바이트의 구성 방식을 알 수 있는 글입니다. WASM에 대한 전반적인 지식보다는, WASM 바이너리 형식이나 기술을 살짝 엿볼 수 있습니다.

WebSocket 확장하기

The Hidden Complexity of Scaling WebSockets
WebSockets are at the very core of Compose. Learn how we scaled them to support 1000s of concurrent users.

WebSocket 기반 어플리케이션을 만들 때 어려움을 겪은 부분들을 어떻게 해결했는지 간단하게 소개하는 글입니다. 여러 가지가 연결 끊김에 관한 것이여서, 연결 끊김을 어떻게 대비하나를 알아두기에 좋습니다.

Electron에 대한 오해

Things people get wrong about Electron
From $25,000 Bloomberg Terminals to SpaceX spaceship controls, web tech is powering systems you'd never expect. Many desktop apps are built with Electron. Why build with web tech — and why bundle parts of Chromium to do so?

Electron은 네이티브 어플리케이션을 만들기에 좋은 도구이지만, 모든 요구사항에 알맞는 도구는 아닙니다. Electron의 공식 문서에 있는 Electron을 선택해야 하는 이유에 반대되는 네이티브를 선택해야 하는 이유를 소개합니다.

JS 시간에 대한 역사

How long is a second in JavaScript? | TimeTime
Discover how JavaScript handles time with POSIX, why it ignores leap seconds, and how techniques like smearing ensure smoother transitions. Learn when precision matters and why timekeeping isn’t as simple as it seems.

시간 척도의 소개에서 시작해서, 그로부터 발생한 문제를 어떻게 해결했는지 알아보는 글입니다. 어플리케이션 개발에 중요한 개념은 아니지만, 흥미로운 글이네요.

Tree view를 접근성 좋게 만들기

Considerations for making a tree view component accessible - The GitHub Blog
A deep dive on the work that went into making the component that powers repository and pull request file trees.

Github에서 Tree view 컴포넌트를 접근성 좋게 만들기 위해 어떤 사항을 고려했고, 어떻게 적용했는지 소개하는 글입니다.

반응형 디자인 배우기

Welcome to Learn Responsive Design!  |  web.dev
>-

예전에 나온 반응형 디자인에 대한 자료이지만, 많이 지나칠만한 다양한 모바일 환경의 숨겨진 요구사항, 잘 모르는 CSS 속성도 소개해주기 때문에, 반응형 디자인을 만들 때 지나쳤던 것들을 되새기기에 좋습니다.

새로운 친구들

Standard Schema
A common interface for TypeScript validation libraries
Fetch Error
TypeScript 5.8 Ships --erasableSyntaxOnly To Disable Enums | Total TypeScript
TypeScript 5.8's new erasableSyntaxOnly flag enforces pure type annotations by disabling enums, namespaces, and parameter properties.
Umbrella: CRA breaks with React 19, and CRA needs deprecation notices · Issue #17004 · facebook/create-react-app
Per request from @rickhanlonii : Background / Primary Problem Starting with the release of React 19, users running create-react-app my-app began experiencing hard errors from NPM during project setup. This is due to a combination of mult...
JavaScript Temporal is coming | MDN Blog
A new way to handle dates and times is being added to JavaScript. Let's take a look at Temporal, what problems it solves, the current state, and what you'll find in the new documentation about it on MDN.

첫번째 글은 runtime validation 라이브러리의 표준인 Standard Schema를 소개하는 글입니다. 여러가지 유효성 검증 라이브러리를 빠르게 바꿀 수 있게 돕는 라이브러리입니다. 두 번째는 여러 CSS 지원과 빠른 성능의 엔진이 적용된 Tailwind 4버전을 소개하는 글입니다. 세 번째는 TypeScript 5.8버전(현재는 베타상태)에서 이전에 소개했던 ts-blank-spaceNode.js의 type stripping을 typescript에서도 지원한다는 소식입니다. 네번째는 React 19가 되면서 CRA가 deprecated되었다는 소식을 접하지 못할 수도 있기에 CRA CLI나 문서에 deprecated되었다는 것을 알리자는 issue입니다. 마지막은 이전에 소개했던 Temporal API가 개발중임을 알리는 글입니다.