웹 개발에서 살아남기

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

반응형 웹을 개발할 때 CSS만으로는 해결되지 않는 순간이 있다. 예를 들어 모바일에서는 '모달'을 띄우고 데스크톱에서는 '드롭다운'을 띄워야 한다면? window.matchMedia API를 활용해 자바스크립트 단에서 화면 크기를 감지하고, React 커스텀 훅으로 우아하게 구현하는 실무 테크닉을 정리한다. CSS 미디어 쿼리를 자바스크립트에서 제어하는 방법: window.matchMedia와 React 커스텀 훅 활용보통 반응형 스타일링은 CSS의 @media 쿼리나 TailwindCSS의 md:, lg: 클래스로 처리한다. 하지만 개발을 하다 보면 "화면 크기에 따라 스타일이 아니라, 기능(로직) 자체가 달라져야 하는 경우"가 반드시 생긴다.이때 브라우저 창 크기를 resize 이벤트로 감지하는 ..

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

자바스크립트 코드를 보다 보면 func(a)(b)(c) 처럼 괄호가 연속해서 이어지는 기이한 형태를 마주할 때가 있다. 이를 커링(Currying)이라고 한다. 함수형 프로그래밍의 핵심 기법인 커링이 어떻게 함수의 재사용성을 극대화하고, 복잡한 로직을 깔끔하게 모듈화하는지 실무 예제를 통해 알아본다. 자바스크립트 커링(Currying): 함수 인자를 나누어 재사용성과 가독성을 높이는 기법리덕스(Redux)의 미들웨어나 고차 컴포넌트(HOC) 코드를 분석하다 보면 화살표 함수가 꼬리에 꼬리를 무는 코드를 발견하게 된다.const logger = store => next => action => { ... }초심자에게는 암호처럼 보이는 이 코드가 바로 커링(Currying) 패턴이다. 커링은 단순히 멋을 부..

"내일 날짜를 구하려면 어떻게 해야 하지?", "두 날짜 사이의 D-Day는?" 자바스크립트 Date 객체의 자동 보정 기능을 이용하면 라이브러리 없이도 날짜 연산이 가능하다. 하지만 1월 31일에 한 달을 더하면 2월 28일이 아니라 3월 3일이 되는 함정과 객체 가변성(Mutability)으로 인한 버그를 주의해야 한다. 실무에서 안전하게 날짜를 조작하는 방법을 정리한다. 자바스크립트 날짜 계산과 조작: D-Day 구하기부터 달(Month) 더하기의 함정까지 (3편)간단한 날짜 더하기나 빼기 기능을 구현하기 위해 day.js나 date-fns 같은 무거운 라이브러리를 설치하는 것은 낭비일 수 있다. 자바스크립트의 내장 Date 객체는 생각보다 똑똑한 자동 보정(Overflow Correction) ..

서버에 날짜를 보냈더니 9시간이 밀리거나, 사용자에게 이상한 포맷으로 날짜가 보여 당황한 적이 있는가? JavaScript에서 날짜 데이터를 서버 전송용(ISO 8601)과 사용자 표시용(Intl)으로 정확하게 구분하여 포맷팅하는 방법과, toLocaleString 대신 Intl.DateTimeFormat을 써야 하는 성능적 이유를 알아본다. 자바스크립트 날짜가 이상하게 나오는 이유와 올바른 포맷팅/타임존 변환 방법 (2편)프론트엔드 개발자가 가장 자주 겪는 버그 중 하나는 "내 로컬에서는 잘 나오는데, 배포 서버나 다른 나라 유저에게는 시간이 다르게 나오는 문제"다. 대부분은 Date 객체를 문자열로 변환(Formatting)하는 과정에서 타임존(Timezone)을 고려하지 않았기 때문에 발생한다.단..

JavaScript 개발자라면 누구나 한 번쯤 "서버 시간과 클라이언트 시간이 달라요"라는 문제에 직면한다. 이 시리즈의 첫 번째 글에서는 Date 객체가 내부적으로 시간을 관리하는 원리(Epoch Time)와 UTC, KST, ISO 8601의 정확한 개념 차이를 정리하여 타임존 버그를 예방하는 기초를 다진다. JavaScript Date 객체가 헷갈리는 이유와 UTC, KST 개념 총정리 (1편)우리는 습관적으로 new Date()를 사용하지만, 정작 이 객체가 내부적으로 어떻게 시간을 저장하고 있는지 깊게 고민해 본 적은 드물다. 그래서 "오전 9시"를 저장했는데 "오전 0시"로 조회되거나, 하루가 밀리는 현상을 겪고 당황하곤 한다.JavaScript의 Date 객체는 생각보다 불친절하고 복잡한 ..

리액트 애플리케이션의 초기 로딩 속도가 느리다면 거대해진 자바스크립트 번들 사이즈가 원인일 확률이 높다. React.lazy와 Suspense를 활용한 코드 스플리팅(Code Splitting) 기법을 통해, 당장 필요하지 않은 리소스를 지연 로딩(Lazy Loading)하여 성능을 최적화하는 방법과 실무 적용 시 주의사항을 상세히 알아본다. React 초기 로딩 속도 최적화: React.lazy와 Code Splitting으로 번들 사이즈 줄이기SPA(Single Page Application)로 개발된 웹 서비스의 가장 큰 약점은 초기 로딩 속도다. 사용자가 첫 페이지에 진입할 때, 당장 보지 않을 페이지(예: 설정, 마이페이지, 관리자)의 코드까지 포함된 거대한 자바스크립트 파일을 한 번에 다운로..

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

React에서 리스트를 렌더링할 때 key={index}를 사용하면 아이템 삭제나 순서 변경 시 데이터가 뒤섞이는 심각한 버그가 발생한다. 이러한 현상이 발생하는 근본적인 원인을 React의 렌더링 동작 원리로 분석하고, 고유 ID를 사용해야 하는 정확한 이유와 해결 방법을 정리한다. React 배열 렌더링 시 key에 index를 쓰면 데이터가 꼬이는 이유React로 게시판이나 투두 리스트 같은 목록형 UI를 개발할 때, 콘솔 창에 뜨는 "Each child in a list should have a unique 'key' prop" 경고를 없애기 위해 습관적으로 map 함수의 index를 key로 넣어본 경험이 있을 것이다.화면이 단순히 데이터를 보여주기만 할 때는 문제가 없어 보이지만, 항목을 삭..