frontend
타입 계약의 전제 환경 — "컴파일되지 않는다"는 tsconfig의 함수예요
같은 코드가 저장소 설정에 따라 통과하기도 실패하기도 하는 이유와, 타입 계약을 만들기 전에 실효 tsconfig·lockfile 컴파일러 버전을 한 번 고정해 두는 절차
TIL에서 일반화한 재사용 가능한 지식 문서입니다. 카테고리별로 정리되어 있습니다.
같은 코드가 저장소 설정에 따라 통과하기도 실패하기도 하는 이유와, 타입 계약을 만들기 전에 실효 tsconfig·lockfile 컴파일러 버전을 한 번 고정해 두는 절차
런타임 테스트의 경계값 분석을 타입 수준으로 옮겨, 타입 격자의 극단 7축마다 통과·거절 witness 쌍을 짜는 방법과, 시간축·부작용 횟수처럼 타입이 끝내 덮지 못하는 축
파생 가능한 값은 저장하지 않고, 라이브러리가 이미 소유한 union은 복사하지 않고, 그래도 남는 client 상태만 union으로 만드는 순서와, 상태에 action을 넣으면 안 되는 이유
Record가 약속하는 totality, 검사하지 않는 type predicate, 실행 시점이 다른 wrapper의 ReturnType, sanitizer로 착각하는 excess property check처럼 구현이 지키지 않는 것을 타입이 약속하는 패턴들
assertNever, satisfies Record, 패턴 매칭 라이브러리 세 계층 중 무엇을 언제 쓸지와, catch-all 기본 분기가 누락을 숨기는 이유
Dog가 Animal의 하위 타입일 때 Dog[]와 (x: Dog) => void도 그 관계를 물려받는지, 어느 방향으로 물려받는지를 정하는 규칙과, strictFunctionTypes를 켜도 메서드 문법에 구멍이 남는 이유
실행 결과가 아니라 컴파일 결과를 검증해 '이 타입이 실제로 어떤 잘못된 코드를 막는가'를 코드로 고정하는 방법과, @ts-expect-error·mutation 검증으로 테스트가 살아 있는지 확인하는 절차
const 선언에 타입 파라미터를 붙일 수 없다는 제약을 우회해, 제네릭 함수 안에서 context를 만들고 컴포넌트들이 클로저로 붙잡게 하는 패턴과 렌더 중 호출 시 조용히 리마운트되는 함정
허용값 목록을 타입과 값 두 곳에 각각 적는 대신 값 하나만 정답의 출처로 두고 타입을 계산해 내는 기법, 그리고 widening 때문에 이 보호가 에러 없이 사라지는 함정
실행 결과가 맞는지 틀린지를 판정하는 기준을 어디서 가져올지의 문제와, 구현에서 기대값을 역산해 만든 테스트가 아무것도 검증하지 못하는 이유
DOM 좌표만으로는 깨지는 하이라이트 복원을 인용문·문맥·위치 selector의 가중 점수와 신뢰 임계값으로 해결하는 방법
코드에 인위적인 결함을 심어 기존 테스트가 실패하는지 확인함으로써, 커버리지가 숨기는 빈 assertion과 느슨한 검증을 찾아내는 기법
오프라인에서 발생한 사용자 명령을 IndexedDB에 보존하고 재접속·새로고침 뒤 안전하게 재전송하는 React outbox 전략
서로 메모리를 공유하지 못하는 확장 프로그램 실행 공간을 메시지 API, runtime 검증, handler 라우팅, 응답 봉투와 변경 알림으로 안전하게 연결하는 방법
npm 전역 bin 같은 심볼릭 링크 경로에서 경로 문자열 비교식 main 가드가 조용히 false가 되어 CLI가 exit 0 무출력으로 끝나는 원리와 진단·처방
rewrite는 리다이렉트가 아니라 프록시이므로 업스트림의 3xx를 그대로 전달한다 — 캐노니컬 리다이렉트를 하는 오리진을 목적지로 삼을 때 생기는 무한 루프의 원리와 처방
마크다운 본문 이미지에 빌드 시점에 실제 픽셀 치수를 주입해 레이아웃 이동과 고정 비율 크롭을 동시에 없애는 원리
한글 입력에서 조합이 끝나기 전 blur·Enter가 값을 확정해 미완성 문자가 저장되는 문제를 이벤트 순서가 아니라 조합 상태로 해결하는 원리
옛 브라우저 지원은 두 개의 다른 일이다 — 새 문법을 옛 문법으로 바꾸는 트랜스파일과, 없는 API를 코드로 채우는 폴리필. 트랜스파일러는 문법만 바꾸고 런타임 함수는 만들지 않는다
한 화면의 상호작용이 여러 개 동시에 안 먹히면 보통 개별 버그가 아니라 클라이언트 JS가 실행되지 못해 하이드레이션이 통째로 불발된 단일 근본원인이다