1-blue(박상은)37.55031, 126.91900https://github.com/1-blue1-blue98@naver.com010-2103-8259프론트엔드 개발자 『박상은』TypeScript와 TailwindCss를 좋아하는 프론트엔드 개발자 박상은입니다.풀스택 개발자가 되는 것을 목표로 달리고 있습니다.화요일목요일토요일5월6월7월8월9월10월11월12월1월2월3월4월
프론트엔드Apidog - [1]Postman - [1]API 문서 - [1]n8n - [1]GCP - [1]Docker - [3]nginx - [1]셀프호스팅 - [1]자동화 - [2]이벤트 루프 - [1]Event Loop - [1]콜스택 - [1]Call Stack - [1]마이크로태스크 큐 - [1]Microtask Queue - [1]매크로태스크 큐 - [1]Macrotask Queue - [1]Task Queue - [1]JavaScript 비동기 - [1]싱글 스레드 - [1]Single Thread - [1]typescript - [4]openapi - [1]api - [1]swagger - [1]타입생성 - [1]개발생산성 - [1]백엔드 - [2]프론트엔드 - [8]협업 - [2]nestjs - [1]nextjs - [2]tanstack-query - [1]openapi-typescript - [1]discriminated-union - [1]구별된-유니온 - [1]union-types - [1]타입-안전성 - [1]type-safety - [1]tagged-union - [1]type-guards - [1]타입스크립트-패턴 - [1]함수형-프로그래밍 - [1]story-dict - [4]GitHub Actions - [5]CI/CD - [5]S3 - [2]Turborepo - [2]Build Cache - [1]cache - [2]GitHub - [3]Slack - [1]EC2 - [2]Docker Hub - [1]ECR - [1]Next.js - [15]블로그 - [1]개발 - [2]개인 블로그 - [1]next.js mdx - [1]인프런 - [3]그림으로 쉽게 배우는 네트워크 - [2]한 입 크기로 잘라먹는 Next.js - [1]Next.js v15 - [1]App Router - [9]Server Component - [1]Client Component - [1]fetch - [1]streaming - [1]revalidate - [2]tags - [1]loading.tsx - [1]Suspense - [2]ErrorBoundary - [2]aws - [1]vpc - [1]network - [1]nat-gateway - [1]NAT 게이트웨이 - [1]internet-gateway - [1]인터넷 게이트웨이 - [1]subnet - [1]서브넷 - [1]routing-table - [1]라우팅 테이블 - [1]bastion-host - [1]베스천 호스트 - [1]클라우드 - [1]인프라 - [1]항해 플러스 - [2]항해 플러스 프론트엔드 5기 - [2]항해 플러스 회고 - [2]항해 플러스 회고 2주차 - [1]항해 플러스 회고 1주차 - [1]Next.js ImageResponse - [1]thumbnail - [1]썸네일 - [1]동적 썸네일 - [1]동적 썸네일 만들기 - [1]AWS Lambda - [1]이미지 리사이징 - [1]람다 - [1]리사이징 - [1]ImageResponse - [1]OG 이미지 - [1]SEO - [2]동적 이미지 - [1]Edge Function - [1]ai - [31]Git - [1]Git Flow - [1]GitHub Flow - [1]브랜치 전략 - [1]개발 도구 - [1]TypeScript - [4]TypeGuard - [1]TypeNarrowing - [1]런타임타입체크 - [1]타입스크립트 - [5]javascript - [1]closure - [1]functional-programming - [1]scope - [1]React Query - [1]TanStack Query - [1]데이터 페칭 - [1]캐싱 - [3]서버 상태 관리 - [1]웹 성능 - [3]React - [10]최적화 - [4]useTransition - [1]useDeferredValue - [1]UI 최적화 - [1]성능 - [1]UI/UX - [1]Frontend - [3]Error Handling - [2]React 18 - [2]성능 최적화 - [4]css - [1]container-queries - [1]반응형 디자인 - [1]웹 개발 - [5]Next.js 15 - [1]데이터 패칭 - [1]generateStaticParams - [1]정적 페이지 - [1]빌드 최적화 - [1]렌더링 최적화 - [1]useMemo - [1]useCallback - [1]React.memo - [1]JavaScript - [3]Proxy - [1]Reflect - [1]메타 프로그래밍 - [1]객체 지향 - [1]고급 자바스크립트 - [1]웹 성능 최적화 - [3]코드 스플리팅 - [1]레이지 로딩 - [1]번들 최적화 - [1]React.lazy - [1]dynamic import - [1]useOptimistic - [1]Server Actions - [2]Optimistic UI - [2]User Experience - [1]React 19 - [2]const type parameters - [1]type inference - [1]literal types - [1]type safety - [1]CLS - [1]Core Web Vitals - [2]사용자 경험 - [1]SSR - [1]SSG - [1]ISR - [1]렌더링 - [1]Context API - [1]Zustand - [1]상태관리 - [1]배포 자동화 - [1]모노레포 - [1]Monorepo - [1]개발환경 - [1]성능최적화 - [3]useEffect - [1]React Hooks - [1]Form Handling - [1]Validation - [1]utility types - [1]제네릭 - [2]Middleware - [1]인증 - [2]리다이렉션 - [1]국제화 - [1]Generics - [1]타입 안정성 - [2]코드 재사용성 - [1]Route Handler - [1]API - [1]에러 처리 - [1]서버리스 - [1]Image Optimization - [1]PPR - [1]Partial Prerendering - [1]조건부타입 - [1]infer - [1]유틸리티타입 - [1]이벤트루프 - [1]비동기 - [1]Async - [1]EventLoop - [1]server-components - [1]client-components - [1]app-router - [1]react - [1]satisfies - [1]타입 추론 - [1]프론트엔드 개발 - [1]React use hook - [1]React Actions - [1]React Compiler - [1]프론트엔드 최적화 - [1]새로운 기능 - [1]Hooks - [1]데이터 재검증 - [1]revalidatePath - [1]revalidateTag - [1]Server Components - [1]2025-08-30단어: 1,150개14분openapi-typescript: OpenAPI 스펙으로 TypeScript 타입 자동 생성하기OpenAPI 3.0 스펙을 기반으로 TypeScript 타입을 자동 생성하는 openapi-typescript 라이브러리의 장점, 단점, 사용법을 실제 예제와 함께 알아보세요.typescriptopenapiapiswagger타입생성개발생산성백엔드프론트엔드협업자동화nestjsnextjstanstack-queryopenapi-typescript2026-04-16단어: 2,372개26분[🤖] React `useTransition`과 `useDeferredValue`로 사용자 경험을 극대화하는 방법React 애플리케이션에서 무거운 UI 업데이트로 인한 버벅임을 해결하고, `useTransition`과 `useDeferredValue` 훅을 활용하여 사용자 경험을 획기적으로 개선하는 실용적인 전략을 배워보세요.ReactuseTransitionuseDeferredValueUI 최적화성능프론트엔드ai2026-04-12단어: 1,297개16분[🤖] CSS Container Queries: 컴포넌트 기반 반응형 디자인의 새로운 지평미디어 쿼리의 한계를 넘어, 컴포넌트 자체의 크기에 따라 스타일을 조절하는 CSS Container Queries를 깊이 있게 알아보고 실무 적용 방법을 안내해 드려요.csscontainer-queries반응형 디자인웹 개발프론트엔드ai2026-03-30단어: 1,460개17분[🤖] React Context API와 Zustand: 전역 상태 관리, 언제 무엇을 써야 할까요?React 애플리케이션의 전역 상태 관리를 고민하고 계신가요? Context API와 가벼운 외부 상태 관리 라이브러리인 Zustand를 비교 분석하고, 실무에서 각 도구를 효과적으로 활용하는 전략을 실제 코드 예시와 함께 상세히 알려드려요.ReactContext APIZustand상태관리프론트엔드최적화ai2026-03-29단어: 1,470개17분[🤖] Next.js App Router 프로젝트를 위한 GitHub Actions CI/CD 구축 가이드Next.js App Router 기반 프로젝트의 배포 과정을 자동화하는 GitHub Actions CI/CD 워크플로우를 단계별로 구축하고 최적화하는 방법을 상세히 알려드려요.Next.jsGitHub ActionsCI/CD배포 자동화프론트엔드ai2026-03-25단어: 1,981개21분[🤖] TypeScript 유틸리티 타입 완벽 가이드: 실전 활용 패턴TypeScript 유틸리티 타입의 핵심 개념과 실전 활용법을 깊이 있게 다뤄요. Pick, Omit, Partial, Required 등 자주 쓰는 유틸리티 타입으로 복잡한 타입을 효과적으로 다루는 방법을 배워보세요. 타입스크립트 코드의 재사용성과 안정성을 높이는 노하우를 공유해요.typescriptutility types제네릭타입스크립트프론트엔드백엔드개발ai2026-03-21단어: 1,932개22분[🤖] Next.js Image 컴포넌트 최적화: Core Web Vitals 개선부터 실전 활용까지Next.js의 Image 컴포넌트를 활용하여 웹 성능 핵심 지표인 Core Web Vitals를 개선하고, 다양한 최적화 옵션을 실전 프로젝트에 적용하는 방법을 블루가 자세히 알려드려요.Next.jsImage OptimizationCore Web Vitals웹 성능프론트엔드ai2026-03-18단어: 1,786개19분[🤖] TypeScript 조건부 타입과 infer 키워드: 복잡한 타입도 손쉽게 다루는 방법TypeScript 개발에서 마주하는 복잡한 타입 추론 문제, 조건부 타입과 infer 키워드를 활용하면 훨씬 우아하고 강력하게 해결할 수 있어요. 실전 예제와 함께 그 활용법을 심도 있게 다뤄봅니다.TypeScript타입스크립트조건부타입infer제네릭유틸리티타입프론트엔드ai
프론트엔드Apidog - [1]Postman - [1]API 문서 - [1]n8n - [1]GCP - [1]Docker - [3]nginx - [1]셀프호스팅 - [1]자동화 - [2]이벤트 루프 - [1]Event Loop - [1]콜스택 - [1]Call Stack - [1]마이크로태스크 큐 - [1]Microtask Queue - [1]매크로태스크 큐 - [1]Macrotask Queue - [1]Task Queue - [1]JavaScript 비동기 - [1]싱글 스레드 - [1]Single Thread - [1]typescript - [4]openapi - [1]api - [1]swagger - [1]타입생성 - [1]개발생산성 - [1]백엔드 - [2]프론트엔드 - [8]협업 - [2]nestjs - [1]nextjs - [2]tanstack-query - [1]openapi-typescript - [1]discriminated-union - [1]구별된-유니온 - [1]union-types - [1]타입-안전성 - [1]type-safety - [1]tagged-union - [1]type-guards - [1]타입스크립트-패턴 - [1]함수형-프로그래밍 - [1]story-dict - [4]GitHub Actions - [5]CI/CD - [5]S3 - [2]Turborepo - [2]Build Cache - [1]cache - [2]GitHub - [3]Slack - [1]EC2 - [2]Docker Hub - [1]ECR - [1]Next.js - [15]블로그 - [1]개발 - [2]개인 블로그 - [1]next.js mdx - [1]인프런 - [3]그림으로 쉽게 배우는 네트워크 - [2]한 입 크기로 잘라먹는 Next.js - [1]Next.js v15 - [1]App Router - [9]Server Component - [1]Client Component - [1]fetch - [1]streaming - [1]revalidate - [2]tags - [1]loading.tsx - [1]Suspense - [2]ErrorBoundary - [2]aws - [1]vpc - [1]network - [1]nat-gateway - [1]NAT 게이트웨이 - [1]internet-gateway - [1]인터넷 게이트웨이 - [1]subnet - [1]서브넷 - [1]routing-table - [1]라우팅 테이블 - [1]bastion-host - [1]베스천 호스트 - [1]클라우드 - [1]인프라 - [1]항해 플러스 - [2]항해 플러스 프론트엔드 5기 - [2]항해 플러스 회고 - [2]항해 플러스 회고 2주차 - [1]항해 플러스 회고 1주차 - [1]Next.js ImageResponse - [1]thumbnail - [1]썸네일 - [1]동적 썸네일 - [1]동적 썸네일 만들기 - [1]AWS Lambda - [1]이미지 리사이징 - [1]람다 - [1]리사이징 - [1]ImageResponse - [1]OG 이미지 - [1]SEO - [2]동적 이미지 - [1]Edge Function - [1]ai - [31]Git - [1]Git Flow - [1]GitHub Flow - [1]브랜치 전략 - [1]개발 도구 - [1]TypeScript - [4]TypeGuard - [1]TypeNarrowing - [1]런타임타입체크 - [1]타입스크립트 - [5]javascript - [1]closure - [1]functional-programming - [1]scope - [1]React Query - [1]TanStack Query - [1]데이터 페칭 - [1]캐싱 - [3]서버 상태 관리 - [1]웹 성능 - [3]React - [10]최적화 - [4]useTransition - [1]useDeferredValue - [1]UI 최적화 - [1]성능 - [1]UI/UX - [1]Frontend - [3]Error Handling - [2]React 18 - [2]성능 최적화 - [4]css - [1]container-queries - [1]반응형 디자인 - [1]웹 개발 - [5]Next.js 15 - [1]데이터 패칭 - [1]generateStaticParams - [1]정적 페이지 - [1]빌드 최적화 - [1]렌더링 최적화 - [1]useMemo - [1]useCallback - [1]React.memo - [1]JavaScript - [3]Proxy - [1]Reflect - [1]메타 프로그래밍 - [1]객체 지향 - [1]고급 자바스크립트 - [1]웹 성능 최적화 - [3]코드 스플리팅 - [1]레이지 로딩 - [1]번들 최적화 - [1]React.lazy - [1]dynamic import - [1]useOptimistic - [1]Server Actions - [2]Optimistic UI - [2]User Experience - [1]React 19 - [2]const type parameters - [1]type inference - [1]literal types - [1]type safety - [1]CLS - [1]Core Web Vitals - [2]사용자 경험 - [1]SSR - [1]SSG - [1]ISR - [1]렌더링 - [1]Context API - [1]Zustand - [1]상태관리 - [1]배포 자동화 - [1]모노레포 - [1]Monorepo - [1]개발환경 - [1]성능최적화 - [3]useEffect - [1]React Hooks - [1]Form Handling - [1]Validation - [1]utility types - [1]제네릭 - [2]Middleware - [1]인증 - [2]리다이렉션 - [1]국제화 - [1]Generics - [1]타입 안정성 - [2]코드 재사용성 - [1]Route Handler - [1]API - [1]에러 처리 - [1]서버리스 - [1]Image Optimization - [1]PPR - [1]Partial Prerendering - [1]조건부타입 - [1]infer - [1]유틸리티타입 - [1]이벤트루프 - [1]비동기 - [1]Async - [1]EventLoop - [1]server-components - [1]client-components - [1]app-router - [1]react - [1]satisfies - [1]타입 추론 - [1]프론트엔드 개발 - [1]React use hook - [1]React Actions - [1]React Compiler - [1]프론트엔드 최적화 - [1]새로운 기능 - [1]Hooks - [1]데이터 재검증 - [1]revalidatePath - [1]revalidateTag - [1]Server Components - [1]2025-08-30단어: 1,150개14분openapi-typescript: OpenAPI 스펙으로 TypeScript 타입 자동 생성하기OpenAPI 3.0 스펙을 기반으로 TypeScript 타입을 자동 생성하는 openapi-typescript 라이브러리의 장점, 단점, 사용법을 실제 예제와 함께 알아보세요.typescriptopenapiapiswagger타입생성개발생산성백엔드프론트엔드협업자동화nestjsnextjstanstack-queryopenapi-typescript2026-04-16단어: 2,372개26분[🤖] React `useTransition`과 `useDeferredValue`로 사용자 경험을 극대화하는 방법React 애플리케이션에서 무거운 UI 업데이트로 인한 버벅임을 해결하고, `useTransition`과 `useDeferredValue` 훅을 활용하여 사용자 경험을 획기적으로 개선하는 실용적인 전략을 배워보세요.ReactuseTransitionuseDeferredValueUI 최적화성능프론트엔드ai2026-04-12단어: 1,297개16분[🤖] CSS Container Queries: 컴포넌트 기반 반응형 디자인의 새로운 지평미디어 쿼리의 한계를 넘어, 컴포넌트 자체의 크기에 따라 스타일을 조절하는 CSS Container Queries를 깊이 있게 알아보고 실무 적용 방법을 안내해 드려요.csscontainer-queries반응형 디자인웹 개발프론트엔드ai2026-03-30단어: 1,460개17분[🤖] React Context API와 Zustand: 전역 상태 관리, 언제 무엇을 써야 할까요?React 애플리케이션의 전역 상태 관리를 고민하고 계신가요? Context API와 가벼운 외부 상태 관리 라이브러리인 Zustand를 비교 분석하고, 실무에서 각 도구를 효과적으로 활용하는 전략을 실제 코드 예시와 함께 상세히 알려드려요.ReactContext APIZustand상태관리프론트엔드최적화ai2026-03-29단어: 1,470개17분[🤖] Next.js App Router 프로젝트를 위한 GitHub Actions CI/CD 구축 가이드Next.js App Router 기반 프로젝트의 배포 과정을 자동화하는 GitHub Actions CI/CD 워크플로우를 단계별로 구축하고 최적화하는 방법을 상세히 알려드려요.Next.jsGitHub ActionsCI/CD배포 자동화프론트엔드ai2026-03-25단어: 1,981개21분[🤖] TypeScript 유틸리티 타입 완벽 가이드: 실전 활용 패턴TypeScript 유틸리티 타입의 핵심 개념과 실전 활용법을 깊이 있게 다뤄요. Pick, Omit, Partial, Required 등 자주 쓰는 유틸리티 타입으로 복잡한 타입을 효과적으로 다루는 방법을 배워보세요. 타입스크립트 코드의 재사용성과 안정성을 높이는 노하우를 공유해요.typescriptutility types제네릭타입스크립트프론트엔드백엔드개발ai2026-03-21단어: 1,932개22분[🤖] Next.js Image 컴포넌트 최적화: Core Web Vitals 개선부터 실전 활용까지Next.js의 Image 컴포넌트를 활용하여 웹 성능 핵심 지표인 Core Web Vitals를 개선하고, 다양한 최적화 옵션을 실전 프로젝트에 적용하는 방법을 블루가 자세히 알려드려요.Next.jsImage OptimizationCore Web Vitals웹 성능프론트엔드ai2026-03-18단어: 1,786개19분[🤖] TypeScript 조건부 타입과 infer 키워드: 복잡한 타입도 손쉽게 다루는 방법TypeScript 개발에서 마주하는 복잡한 타입 추론 문제, 조건부 타입과 infer 키워드를 활용하면 훨씬 우아하고 강력하게 해결할 수 있어요. 실전 예제와 함께 그 활용법을 심도 있게 다뤄봅니다.TypeScript타입스크립트조건부타입infer제네릭유틸리티타입프론트엔드ai