웹 개발에서 살아남기

React에서 이나 을 감싸는 래퍼 컴포넌트를 만들 때, Props 타입을 HTMLAttributes로 정의하면 disabled나 type 같은 핵심 속성이 누락되는 문제가 발생한다. 이 글에서는 ComponentProps와 HTMLAttributes의 결정적인 차이와, DetailedHTMLProps 같은 레거시 타입을 피해야 하는 이유를 정리한다. React Props 타입 정의 시 HTMLAttributes를 쓰면 안 되는 이유와 ComponentProps의 장점디자인 시스템을 구축하거나 재사용 가능한 공통 컴포넌트(Button, Input 등)를 만들 때 가장 먼저 고민하는 것은 "어떻게 하면 기존 HTML 태그의 속성을 그대로 상속받을 수 있을까?"이다.많은 개발자가 직관적으로 React.HT..

TypeScript를 강력하게 만드는 것은 정적 타이핑이지만, 실제 런타임 데이터는 동적이다. 이 간극을 메우기 위해 필수적인 타입 좁히기(Narrowing) 기술인 in 연산자와 사용자 정의 타입 가드 is, 그리고 정교한 타입 설계를 위한 as const와 infer의 동작 원리와 실무 활용 패턴을 상세히 정리한다. TypeScript 타입 안전성을 높이는 4가지 핵심 기법TypeScript를 사용하다 보면 컴파일러가 타입을 제대로 추론하지 못해 any나 as(단언)를 남발하고 싶은 유혹에 빠진다. 하지만 이는 타입 시스템의 혜택을 포기하는 것이다.진정한 타입스크립트 고수는 컴파일러에게 "이 변수는 이 시점에 확실히 이 타입이야"라고 알려주는 타입 가드(Type Guard)와, 복잡한 타입에서 필요..

리액트 프로젝트가 커질수록 import { Card, CardHeader, CardBody, CardFooter } 처럼 import 구문이 길어지고, 컴포넌트 간의 관계를 파악하기 어려워진다. 네임스페이스(Namespace) 패턴, 일명 Dot Notation을 활용하여 연관된 컴포넌트를 하나의 객체로 묶어 관리하고, 코드의 가독성과 응집도를 획기적으로 높이는 방법을 알아본다. React 네임스페이스 패턴: 컴포넌트 응집도를 높이고 import 지옥에서 탈출하기복잡한 UI를 개발하다 보면 필연적으로 수많은 서브 컴포넌트가 탄생한다. 예를 들어 Modal 하나를 만들기 위해 ModalHeader, ModalBody, ModalFooter 등이 필요하다. 이를 개별적으로 import 해서 쓰다 보면, "..

함수를 호출할 때 doSomething(true, false, null, 10) 처럼 알 수 없는 값들을 나열해 본 적이 있는가? RORO(Receive an Object, Return an Object) 패턴은 객체 구조 분해 할당을 활용해 함수의 가독성과 확장성을 획기적으로 높이는 패턴이다. RORO 패턴의 핵심 원리와 장단점, 그리고 굳이 쓰지 않아도 되는 상황을 명확히 정리한다. 자바스크립트 함수에서 파라미터가 과하게 많을 때 : RORO 패턴 완벽 가이드개발을 하다 보면 동료가 짜놓은(혹은 과거의 내가 짠) 함수를 보고 당황할 때가 있다.createUser('John', true, false, null, 20);도대체 저 true는 무엇이고, false는 무엇이며, 중간에 있는 null은 왜 ..

React와 TypeScript를 사용할 때, UserList, ProductList처럼 데이터 타입만 다르고 로직이 똑같은 컴포넌트를 계속 만드는 비효율을 겪곤 한다. 이를 해결하는 제네릭(Generic) 컴포넌트의 구현 방법과 .tsx 파일에서의 문법적 이슈(Comma Hack), 그리고 React.FC 사용을 지양해야 하는 이유를 정리한다. React 제네릭(Generic) 컴포넌트 구현 시 문법이 필요한 이유와 활용 패턴TypeScript를 사용하는 가장 큰 이유 중 하나는 타입 안정성을 유지하면서 코드를 재사용하는 것이다. 일반적인 함수에서는 제네릭(Generic)을 자주 사용하지만, 막상 React 컴포넌트(JSX/TSX)에 적용하려고 하면 빨간 줄(에러)이 뜨거나 문법이 헷갈리는 경우가 ..

TypeScript를 강력하게 만드는 것은 정적 타이핑이지만, 실제 런타임 데이터는 동적이다. 이 간극을 메우기 위해 필수적인 타입 좁히기(Narrowing) 기술인 in 연산자와 사용자 정의 타입 가드 is, 그리고 정교한 타입 설계를 위한 as const와 infer의 동작 원리와 실무 활용 패턴을 상세히 정리한다. TypeScript 타입 안전성을 높이는 4가지 핵심 기법TypeScript를 사용하다 보면 컴파일러가 타입을 제대로 추론하지 못해 any나 as(단언)를 남발하고 싶은 유혹에 빠진다. 하지만 이는 타입 시스템의 혜택을 포기하는 것이다.진정한 타입스크립트 고수는 컴파일러에게 "이 변수는 이 시점에 확실히 이 타입이야"라고 알려주는 타입 가드(Type Guard)와, 복잡한 타입에서 필요..

TypeScript에서 map이나 forEach 같은 고차 함수의 콜백을 작성할 때, 정의된 매개변수보다 적게 선언해도 에러가 나지 않는 현상을 분석한다. 이것이 옵셔널 파라미터(?)와 어떻게 다른지, 그리고 TypeScript가 함수 호환성(Function Compatibility)을 판단할 때 '매개변수 개수'를 어떻게 처리하는지 기술적 원리를 정리한다. TypeScript 함수 호환성: 콜백 함수의 매개변수가 생략 가능한 진짜 이유배열의 map 메서드를 사용하다 보면 문득 의문이 들 때가 있다. 우리가 흔히 사용하는 콜백 함수는 item 하나만 받거나, 혹은 아예 인자를 받지 않도록 작성하기도 한다.[1, 2, 3].map((item) => console.log(item)); // OK[1, 2,..

ES6에서 도입된 Map과 Set은 기존의 객체(Object)와 배열(Array)이 가진 한계를 보완하기 위해 탄생했다. 다양한 타입을 키로 사용할 수 있는 Map의 유연성과, 데이터 중복을 허용하지 않고 빠른 조회 성능(O(1))을 제공하는 Set의 특징을 실무 관점에서 정리한다. JavaScript 자료구조: Map과 Set의 핵심 기능과 객체/배열과의 차이점오랫동안 자바스크립트 개발자들은 데이터를 키-값(Key-Value) 쌍으로 관리하기 위해 객체(Object)를, 리스트 형태의 데이터를 위해 배열(Array)을 사용해 왔다. 하지만 객체는 키가 반드시 문자열이나 심볼이어야 한다는 제약이 있고, 배열은 중복 제거와 특정 값 탐색에 비용이 많이 든다는 단점이 있었다.ES6(ECMAScript 20..

TypeScript를 사용하다 보면 외부 라이브러리(Third Party Library)가 제공하는 기본 타입만으로는 비즈니스 요구사항을 충족하지 못할 때가 있다. declare module을 활용하여 기존 라이브러리의 타입을 확장(Override)하는 Module Augmentation 기법과 그 원리인 선언 병합(Declaration Merging)을 정리한다. TypeScript: 외부 라이브러리 타입 확장하기 (Module Augmentation)TypeScript 환경에서 개발하다 보면 외부 라이브러리에서 정의해 둔 타입이 실제 프로젝트의 요구사항과 맞지 않아 애를 먹는 경우가 종종 발생한다. 예를 들어, 인증 라이브러리인 next-auth를 사용할 때, 세션 객체에 role이나 id 같은 커..

TypeScript 4.9에서 도입된 satisfies 연산자는 기존 타입 명시(Type Annotation)의 한계인 '타입 정보 소실' 문제를 해결한다. 불변성을 강제하는 as const와 타입 검증을 수행하면서도 구체적인 타입 추론을 유지하는 satisfies의 정확한 차이와 실무 활용 패턴을 정리한다. TypeScript: satisfies와 as const의 차이와 실무 활용법TypeScript를 사용하다 보면 딜레마에 빠지는 순간이 있다. 객체에 타입을 명시하자니 내부 속성의 구체적인 타입 정보가 날아가고(Type Widening), 타입을 명시하지 않자니 오타나 실수에 대한 검증이 불가능해진다.이러한 문제를 해결하기 위해 등장한 것이 TS 4.9 버전의 satisfies 연산자다. 기존에 불..