👨‍💻

최근 실무에서 position: fixed 스타일이 적용된 헤더(FIXED HEADER)가 사파리와 같은 일부 브라우저에서 아래 스크린샷과 같이 전체 영역으로 벗어나는 이슈를 겪었습니다. 기대했던 동작은 헤더가 왼쪽 패널 내에 고정되는 것이었습니다.

position: relative로 정의된 부모 요소(LEFT) 내부에 고정될거란 예상이 빗나가 꽤 당황했고, 웹 검색으로 transform: translateZ(0) 스타일을 적용해 급히 수정했습니다.

나름 CSS를 많이 다뤄왔다고 생각했는데 레이아웃 기초 지식의 허점이 드러나 반성하는 계기가 됐고, 근본적인 원인과 해결책을 알아본 과정을 정리했습니다.

Kent C.Dodds 님의 블로그를 보면 아래 문장이 상당히 자주 등장합니다. 그가 만든 Testing Library의 원칙이기도 합니다.

The more your tests resemble the way your software is used, the more confidence they can give you.

사용자(end-user)는 제품을 사용할 때 어떻게 구현되었는지 신경쓰지 않습니다. 눈 앞에 보이는(또는 귀로 듣는) 텍스트, 버튼, 입력 창과 같은 UI를 인지하고 그에 맞게 행동(입력, 클릭, 스크롤 등)하죠.

테스트 도구 역시 제품을 사용하는 또 하나의 사용자로 취급되어야 합니다. Testing Library에서는 UI 요소를 선택하는 방법(query)의 우선 순위를 아래와 같이 제시합니다.

실무에서 타입스크립트를 1년 정도 다루며 더 깊은 이해의 필요성을 느끼던 참에 '이펙티브 타입스크립트'라는 책을 읽게 됐고 실용적인 내용이 많아 정리해두려고 합니다.

타입스크립트의 유니온 연산자를 활용하면 여러 타입의 합집합을 정의할 수 있습니다. 그리고 어딘가에서 원하는 타입인지 확인하는 과정이 필요합니다. 이를 '타입 좁히기(narrowing)'라 합니다.

이 글에는 타입을 좁히는 여러 가지 방법을 정리하고 실무에서 태그된 유니온(tagged union)을 활용해 개선했던 사례를 담았습니다.

실무에서 타입스크립트를 1년 정도 다루며 더 깊은 이해의 필요성을 느끼던 참에 '이펙티브 타입스크립트'라는 책을 읽게 됐고 실용적인 내용이 많아 정리해두려고 합니다.

책에는 타입스크립트의 특성 중 하나인 '구조적 타이핑'이라는 개념이 자주 등장합니다.

자바스크립트가 덕 타이핑[^1] (duck typing) 기반이고 타입스크립트가 이를 모델링하기 위해 구조적 타이핑을 사용함을 이해해야 합니다. 타입은 '봉인'되어 있지 않습니다.

구조적 타이핑의 가장 기본적인 특성은 값을 할당할 때 정의된 타입에 필요한 속성을 가지고 있다면 호환된다는 점입니다.