OTW for FE

Enum 꼭 써야 하나요?

2024. 8. 30.

Enum 꼭 써야 하나요?

Why I Don't Like Enums | Total TypeScript
Enums in TypeScript can be confusing, with differences between numeric and string enums causing unexpected behaviors.

심윤섭: TypeScript에서 enum을 사용하게 되면 트랜스파일 결과물에 수상한 IIFE 결과물이 나오게 되고, 이는 여러가지 버그를 발생시킵니다. 그래서 많은 사람들이 enum을 사용하는 것을 권장하지 않죠. 설명한 이유 외에도 enum을 사용하면 않았으면 하는 이유에 대해 설명하는 간단한 글입니다.

JavaScript의 새로운 날짜 계산 API

JS Dates Are About to Be Fixed | TimeTime
Why I’m excited about the new Temporal API in JavaScript: finally, easy and accurate date handling with time zones using ZonedDateTime. Say goodbye to the headaches of traditional Date objects.

심윤섭: 자바스크립트에서 Date를 다룰 때 Offset과 기간, 산수를 처리하기 어려웠습니다. 그래서 moment.jsdayjs같은 라이브러리를 통해 다룰 수 있었습니다. 현재 표준이 되기 바로 전 단계에서 이를 모두 처리할 수 있는 Temporal API를 소개하는 글입니다. 폴리필도 제공하고, Deno에서는 직접 제공하고 있다고 하니, 관심가질만 하네요.

김대관: 기존 Date 사용자들에게는 moment.jsdayjs 가 매우 활용하기 편하기 때문에 라이브러리들을 대체할 수 있을지는 아직 모르겠습니다. 하지만, 불변성과 일관성에 뛰어나고, 여러 기능이 추가될 수 있는 Temporal API 의 활용이 어떻게 확장될지 주목할 만합니다.

크롬 번역으로부터 웹페이지 보호하기

Everything about Google Translate crashing React (and other web apps) by Martijn Hols
The (in-depth) gist of Google Translate (and other browser extensions) interference breaking React and other web apps.

웹페이지를 크롬 번역을 하게 되면 오류나는 경우가 많은데, 크롬 번역이 어떻게 작동하고 어떻게 방어할 수 있는지 소개하는 글입니다. 다른 확장프로그램의 경우에도 오류를 발생하는 경우도 있으니 알고 계시면 좋을 것 같네요!

좋은 리팩토링에 대한 고찰

Good Refactoring vs Bad Refactoring
Refactoring can make your code way better - or way worse. Here's how to avoid messing up your codebase when you refactor code.

심윤섭: 코드 스타일(혹은 패러다임)을 완전히 변경함, 추상화를 불필요하게 진행함… 같은 나쁜 리팩토링에 대한 실사례를 살펴보는 글입니다. 좋은 리팩토링에 대해 정의하는 글은 아니지만, 적절한 추상화와 기존 코드와 스타일을 이해하고 점진적으로 일관성 있게 리팩토링하라는 간단한 글입니다. 쉽지 않죠. 그래서 이 글에서도 린트 도구, 코드 작성 원칙, 테스트를 통해 리팩토링을 자동으로 권하게 하도록 설정하는 것을 권합니다.

정규표현식의 진화, 그리고…

Regexes Got Good: The History And Future Of Regular Expressions In JavaScript — Smashing Magazine
Although JavaScript regexes used to be underpowered compared to other modern flavors, numerous improvements in recent years mean that’s no longer true. Steven Levithan evaluates the history and present state of regular expressions in JavaScript with tips to make your regexes more readable, maintainable, and resilient.

심윤섭: 자바스크립트의 정규표현식 기능은 매우 많습니다. lookahead, lookbehind부터 시작해서 아직도 추가되고 있죠. regex라는 라이브러리를 소개하는 것이 주인 글이지만, 자바스크립트에서 어떻게 발전했고, 미래에 표준에 들어올 제안들을 살펴보는 글입니다.

Nuxt Script..

Introducing Nuxt Scripts · Nuxt Blog
Nuxt Scripts provides better performance, privacy, security, and developer experience for third-party scripts.

심윤섭: 이전에 소개했던 @next/third-parties패키지 소개(NextJS의 서드파티 스크립트를 위한 노력)와 비슷하게 Nuxt에서 타사 스크립트를 모듈로서 제공하는 @nuxt/scripts패키지 소개 글입니다. 놀라운 점은 스크립트 번들링 후 제공, 스크립트 오프로드(스크립트를 서버에서만 로딩, 예정)기능이네요. 이외에도 Web worker를 통해 서드파티 스크립트를 불러오는 partytown에 대해서도 알아두면 좋습니다.

Branded 타입

Branded Types | Learning TypeScript
How the concept of branded types allows describing primitives more precisely than TypeScript normally allows.

심윤섭: 타입 안전을 위해 런타임에는 사용되지 않는 추가 유형을 말하는 Branded 타입을 사용하는 방법을 소개하는 글입니다. 일반적인 사용법과 장단점 모두 소개하기에 이러한 기능을 하는 타입을 만들 수도 있다고 보면 된다고 생각합니다.

React 처음부터 구현하기

Implementing React from scratch
A detailed explanation of the architecture I used to rebuild react

React를 처음부터 구현하면서 React의 렌더링 구조를 설명하는 글입니다. React 내부 딥 다이브, React의 동시모드 작동 원리에서도 다른 방식으로 설명한 글을 소개했으니 이해 하기 쉬운 글로 접근하셨으면 좋겠습니다.

TypeScript 헷갈리는 부분 해결하기

50-ts/04-functions.md at main · azat-co/50-ts · GitHub
50 TypeScript F*ck Ups Book: 50 Subtle Mistakes to Screw Your TypeScript Code, and How to Avoid and Fix Them to Write Extraordinary Software for Web - 50-ts/04-functions.md at main · azat-co/50-ts

TypeScript에서 헷갈릴 수 있는 부분을 다룬 글을 모은 깃허브 저장소입니다.