웹 개발에서 살아남기

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)와, 복잡한 타입에서 필요..

반응형 웹을 개발할 때 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) 패턴이다. 커링은 단순히 멋을 부..

Next.js App Router에서 layout.tsx와 template.tsx는 둘 다 페이지를 감싸는 역할을 하지만, 상태 유지(State Persistence) 여부에서 결정적인 차이가 있다. 페이지 이동 시 상태가 유지되는 레이아웃과 달리, 매번 컴포넌트를 새로 마운트하여 상태를 초기화하는 템플릿의 동작 원리와 실무 사용 사례(애니메이션, 로깅)를 완벽하게 정리한다. Next.js Layout과 Template 차이: 페이지 이동 시 상태가 초기화되는 이유Next.js 13 이상(App Router)으로 마이그레이션을 하다 보면 layout.tsx 외에 template.tsx라는 낯선 파일을 마주하게 된다. 둘 다 하위 페이지(page.tsx)를 감싸는 래퍼(Wrapper) 역할을 한다는 점에..

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

웹페이지에서 전화번호를 눌렀을 때 바로 통화가 걸리게 하거나, 이메일 주소를 눌렀을 때 메일 작성 창이 뜨게 하려면 태그의 tel과 mailto 스키마를 사용해야 한다. 하지만 단순히 링크만 건다고 끝이 아니다. 데스크톱에서의 UX 문제, 특수문자 인코딩, 그리고 이메일 무단 수집(스팸)을 방지하는 실무적인 전략을 상세히 알아본다. HTML a 태그로 전화(tel)와 메일(mailto) 연결하기: 기능 구현과 스팸 방지 전략모바일 웹사이트를 이용하다가 고객센터 전화번호를 발견했다. 만약 사용자가 이 번호를 외워서 다이얼 앱에 직접 입력해야 한다면? 아마 대부분은 귀찮아서 포기할 것이다.웹 접근성과 사용자 경험(UX)을 높이기 위해서는 클릭 한 번으로 네이티브 앱(전화, 메일)을 실행시켜 주는 URI ..

블로그 글을 카카오톡이나 슬랙에 공유했는데 썸네일이 뜨지 않거나 회색 박스만 나온다면 클릭률(CTR)은 바닥을 칠 것이다. Next.js App Router의 ImageResponse와 opengraph-image.tsx를 활용하여, 별도의 포토샵 작업 없이 코드만으로 고품질의 썸네일을 자동 생성하는 방법을 상세히 정리한다. Next.js Open Graph(OG) 이미지 동적 생성: 카카오톡 공유 시 썸네일이 안 나오는 이유와 해결법열심히 쓴 기술 블로그 글을 친구에게 카카오톡으로 보냈는데, 기대했던 멋진 썸네일 대신 휑한 회색 기본 아이콘만 뜬다면? 혹은 모든 게시글의 썸네일이 메인 로고 하나로 똑같다면?이는 Open Graph(OG) 태그 설정이 미흡하기 때문이다. 과거에는 디자이너가 게시글마다 ..

Next.js App Router 환경에서 사이트가 검색 엔진에 노출되지 않는다면 robots.ts와 sitemap.ts 설정이 누락되었을 가능성이 높다. 최신 Next.js 공식 문서를 기반으로 검색 봇별(User-Agent)로 접근 권한을 다르게 설정하는 방법과 동적 사이트맵 생성 전략, 그리고 라우트 핸들러의 캐싱 동작 원리를 완벽하게 정리한다. Next.js 사이트 검색 노출 안 될 때: 최신 robots.ts와 sitemap.xml 설정법 (App Router)열심히 만든 Next.js 사이트가 구글이나 네이버에 검색되지 않는다면 가장 먼저 확인해야 할 것은 "검색 봇을 위한 초대장"이다. 아무리 좋은 콘텐츠라도 크롤러가 들어올 문(robots.txt)을 열어주고 지도(sitemap.xml)를..