Next.js Metadata API와 generateMetadata
App Router에서는 metadata export와 generateMetadata로 title, description, Open Graph 같은 문서 정보를 구성할 수 있습니다. 정적 페이지와 동적 상세 페이지의 방식이 다…
책상 정리 용품 · 제휴
모아 보기이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
웹 화면과 서비스를 만드는
해비의 개발 기록
웹사이트 제작·운영과 개인 서비스, 자동화·AI 도구를 만들며 배운 내용과 문제 해결 과정을 정리합니다.
전체 글
Zustand persist 마이그레이션 기준: 저장된 상태 구조가 바뀔 때
Zustand persist에서 저장된 상태 구조가 바뀔 때 version과 migrate가 필요한 기준을 정리합니다. 필드 추가, 필드명 변경, 중첩 구조 변경, 값 의미 변경, partialize 변경 사례를 중심으로 운영…
TypeScript as const 사용법: union 타입을 자동 생성하는 기준
TypeScript의 as const로 배열과 객체 값을 readonly 리터럴 타입으로 좁히고, typeof, keyof, 인덱스 접근 타입을 조합해 union 타입을 자동 생성하는 실무 기준을 정리합니다.
TypeScript 제네릭 쉽게 이해하기: props와 API 응답 타입으로 감 잡기
TypeScript 제네릭을 React props와 API 응답 타입 예시로 쉽게 이해할 수 있도록 정리합니다. any와 제네릭의 차이, GenericList와 ApiResponse 활용 흐름을 함께 살펴봅니다.
환경변수 .env 파일 차이: local, example, development 기준
.env·.env.local·.env.development·.env.example의 역할과 Vite의 공개 환경 변수 경계를 정리합니다.
React TypeScript optional props 기본값 처리: undefined·null 차이
React TypeScript에서 optional props와 기본값을 구분하고 구조 분해 기본값, undefined·null, optional callback, defaultProps 처리 기준을 예제로 설명합니다.
React TypeScript 기본 구조: tsx 파일과 props 타입 기준
React에서 TypeScript를 처음 사용할 때 헷갈리기 쉬운 .ts와 .tsx 차이, 컴포넌트 파일 구조, props 타입 작성 위치를 정리합니다. 처음부터 복잡한 타입 설계로 들어가기 전 기본 구조를 잡는 데 초점을 맞…
TypeScript children 타입: ReactNode와 PropsWithChildren 차이
React TypeScript에서 children 타입을 지정할 때 ReactNode, PropsWithChildren, ReactElement, JSX.Element를 어떻게 구분해야 하는지 정리합니다. children을 필…
React 컴포넌트 props 타입 지정 부모 자식 값 구조
TaskFlow는 처음부터 TypeScript로 작성했습니다. 따라서 이번 글의 목표는 JavaScript 파일을 tsx로 바꾸는 것이 아닙니다. 프로젝트가 커진 시점에서 props 타입이 컴포넌트의 역할을 제대로 표현하는지…
TypeScript 실무 로드맵
TypeScript 기초 문법을 배운 뒤 React 프로젝트에서 props, state, API, 상태 관리, 폼, Next.js까지 어떤 순서로 타입을 적용하면 좋은지 정리합니다.
TypeScript란 무엇인가: JavaScript와 차이 정리
TypeScript가 JavaScript를 대체하는 언어가 아니라 JavaScript 위에 타입 검사를 더하는 도구라는 점을 입문자 기준으로 정리합니다. 정적 타입 검사, JavaScript 변환, 런타임과의 차이를 함께 설명…
ChatGPT와 Codex로 워드프레스 블로그 자동 업로드 파이프라인 만들기
AI가 단일 코드 수정이 아니라 여러 단계의 실제 자동화 작업을 수행할 때 필요한 입력 계약·상태·중복 방지·승인 경계를 WordPress 업로드 파이프라인 사례로 학습합니다. TaskFlow와 별도 사례이지만 에이전트 자동화…
