읽은 글들 (~23.5.26)
메일링, 블로그, 구글링 등을 통해 읽은 글들을 모아놓은 글이다.
JavaScript
Does Async-Await and Promises Guarantee Asynchronous Code? No (and Here’s Why)
async
/await
와 Promise
가 비동기적으로 동작하지 않는다고 (동기적으로 동작한다고) 설명하는 글.
자바스크립트는 싱글 스레드이기 때문에 당연한 이야기지만, 동시에 함정에 빠지기 쉽다. 왜냐면 async
/await
와 Promise
둘 다 이벤트 루프를 통해 실행되기 때문에, 막연히 "다른 스레드에서 실행된다"고 생각할 수도 있기 때문이다. 하지만 (이벤트 루프와 메시지 큐는 메인 스레드와 별개로 관리될지언정) 이벤트 루프를 통해 실행된다고 해도 자바스크립트의 모든 코드는 단 하나의 메인 스레드에서 실행된다. 그 사실을 고려하지 않으면 무거운 코드 작성 시 문제가 생길 수 있다.
이런 사실을 적절한 예제와 함께 설명하는 글이다. 읽어볼만 하다.
JS private class fields considered harmful
자바스크립트의 클래스에서 비공개 멤버 사용 시 Proxy 및 Proxy 를 사용하는 라이브러리(예, Vue.js)를 사용할 수 없다는 내용의 글. 간단한 내용을 길고 재미있게 썼다. 블로그 디자인이 거시기하긴 하지만 읽어보기엔 나쁘지 않다.
(번역) StructuredClone API를 사용하여 객체를 깊은 복사하는 법
깊은 복사 기능을 제공하는 StructuredClone()
함수를 소개하고, 이 함수들이 JSON.parse(JSON.stringify())
, _.cloneDeep()
와 어떻게 다른지, 어떤 한계가 있는지 소개한다.
글 앞부분에서는 얕은 복사 깊은 복사에 대해 설명하는데, 이미 알고 있다면 바로 "StructuredClone() 네이티브 함수를 이용해 깊은 복사하기" 섹션으로 스크롤해서 내려가면 된다.
TypeScript
TypeScript: Array.includes on narrow types
Array.includes()
의 결과로 타입 범위를 줄이라면 어떻게 해야할까?에 관한 글.
// actions: string[]
const actions = ["CREATE", "READ", "UPDATE", "DELETE"];
function execute(action: string) {
if(actions.includes(action)) { // 👍
// do something with action
}
}
위 코드에서 5 라인에서 action
의 타입은 여전히 string
이다. 해당 라인에서 action
의 타입을 `'CREATE' | 'READ' | 'UPDATE' | 'DELETE' 로 제한하려면 어떻게 해야할까?
이 글에서는 해결 방법으로 두 가지를 제안한다.
as const
를 사용해actions
를 Readonly Array 로 만들기- 타입 제한을 해주는 헬퍼 함수를 만들어 사용하기
자세한 내용은 본문을 참고하자.
React
(번역) Next.js 와 React Router로 싱글 페이지 애플리케이션 만들기
Next.js 에 React Router 를 설치해 SPA 와 Next.js 의 장점을 모두 누리려는 시도에 대한 글이다. 재미있는 생각이다.
Frontend
🎥 웹 반응성 개선하기: Lighthouse Userflow를 사용한 웹 반응성 개선기
웹 반응성 개선 경험에 대한 세션.
웹 반응성이 무엇인지, 어떤 지표를 측정해야 하는지, 어떻게 측정하는지, 그래서 그걸로 어떤 걸 개선했는지를 공유한다. 공유한 개선 사례는 아래와 같은데
- for TBT: SPA 에서 화면 이동 직후 강제 reflow 가 생기는 것을 찾아 없앰 (
requestAnimationFrame
사용) - for INP: React 18 의
startTransition
을 느리게 업데이트 되어도 되는 요소들에 적용 - for CLS: 플레이스홀더 용 엘리먼트 추가
첫 번째 두 번째 사례가 볼만했다.
UI/UX
30 Practical Tips for Effective User Interface Design
UI 디자인에 관한 작지만 사소하지 않은 팁들이다.
사실 UI 프레임워크를 써봤거나 UI 디자이너와 같이 일해봤다면 이미 직간접적으로 알고 있을 내용이긴 하다. 한 번 훑어보기에 좋다.
Paradigms
Atomic Design Pattern의 Best Practice 여정기
Atomic 설계 패턴에 대한 설명과 본인들의 프로젝트에서 적용하면서 겪었던 이슈, 어떻게 개선했는지 등을 공유하는 글.
컴포넌트를 "더이상 쪼갤 수 없는" 컴포넌트로부터 "데이터와 결합된" 컴포넌트에 이르기까지 다섯 단계로 나누는 것을 Atomic 설계 패턴이라고 부른다. 이론적으로 보기에는 두 말 할 것 없이 훌륭해보이지만 어느 이론이든 실무에 완벽하게 맞아떨어지는 이론은 찾기 힘든 법이고, 그런 의미에서 글쓴이는 해당 패턴을 적절하게 변형해서 자신의 프로젝트에 담아냈다.
Atomic 설계 패턴을 알던 모르던 한 번 읽어볼 만한 글이다.
FP and OOP are close siblings
(번역글)
함수형 프로그래밍과 객체지향 프로그래밍이 근본적으로 (반복적인 맥락을 추상화하는 방법으로서) 다르지 않다고 설명하는 글. 객체지향 프로그래밍만을 좋아하는 사람에게 "함수형 프로그래밍도 객체지향과 별로 다르지 않아"