외부 의존성 없이, n8n Cloud 완벽 호환으로, SVG를 React/TypeScript 컴포넌트로 자동 변환하는 커뮤니티 노드를 만든 경험을 공유합니다. 27개 SVGO 최적화 플러그인까지 직접 구현한 개발기.
데이터베이스 없이, 서버 비용 없이, Google Drive만으로 나만의 콘텐츠 관리 시스템을 만든 경험을 공유합니다. Next.js 16, React 19, Monaco Editor를 활용한 풀스택 개발기.
연봉 실수령액부터 해외주식 절세, 배당금 건보료 폭탄까지 - 직장인이 모르고 잃어버리는 돈을 구조하는 금융 계산기 서비스를 소개합니다.
Vercel은 10년 이상의 최적화 노하우를 바탕으로, AI 에이전트가 React 성능 문제(워터폴, 번들 크기 등)를 효과적으로 진단하고 해결할 수 있도록 구조화된 react-best-practices 저장소를 공개했습니다.
네트워크란 두 대 이상의 컴퓨터가 논리적 또는 물리적으로 연결되어 통신이 가능한 상태를 말한다.
Next.js를 사용하면 전체 사이트를 다시 빌드할 필요 없이 특정 정적 경로를 업데이트할 수 있다. 재검증( Incremental Static Regeneration이라고도 함)을 사용하면 수 백만 페이지로 확장하면서도 정적의 이점을 유지할 수 있다.
Next.js에서 App Router를 사용하면, `async`, `await`를 사용하여 비동기적으로 React Components에서 직접 데이터를 가져올 수 있다.
Next.js는 per-request basis(권장) 또는 전체 route segment.에 대한 데이터 캐싱을 기본적으로 지원한다.
프로젝트를 구성하고 개발하다보면 문법 오류, 오타를 개발하는 시점에 잡고 싶을 때가 있다. 또는 회사만의 코드 컨벤션을 정하고 적용하면 좋겠다는 생각을 할 수 있다.
내가 왜 개발하면서 모노레포에 관심을 가지고 적용하였는지 기억 더듬어보기
평소에 사용하던 `vh`, `vw`를 사용하게 되면 원하던 방식으로 사이즈가 잡히지 않는 것을 알 수 있다. 이와 관련하여 많은 이슈가 발생하여 새로운 CSS 단위가 생겼다.
CDN은 Content Delivery Network의 약자로, 이미지, 비디오, HTML 파일, JavaScript 및 CSS 파일과 같은 웹 콘텐츠를 위치에 따라 사용자에게 전달하기 위해 지리적으로 분산된 서버 네트워크입니다.
Parallel Routes을 사용하면 동일한 layout에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있다.
Route Handlers를 사용하면 웹 요청 및 응답 API를 사용하여 지정된 라우트에 대한 사용자 지정 요청 핸들러를 만들 수 있다.
경로를 가로채면 현재 페이지의 Context를 유지하면서 현재 layout 내에서 경로를 로드할 수 있다.
간혹 글이나 유튜브에서 반응형으로 `@media query`를 사용하는 것이 아니라 `@container query`를 사용하면 좋다고 보았다.
CSS의 새로운(?) 스펙 Cascade Layers에 대해 알아보자.
Next.js 13의 Route Groups를 알아봅니다. 소괄호를 사용해 URL 구조에 영향 없이 경로를 논리적으로 그룹화하고, 여러 root layout을 만드는 방법을 다룹니다.
Next.js 13의 동적 라우팅을 알아봅니다. 대괄호를 사용한 동적 세그먼트, generateStaticParams로 정적 경로 생성, Catch-all 세그먼트 활용법을 다룹니다.
error.js 파일 규칙을 사용하면 중첩된 경로에서 런타임 오류(runtime errors)를 우아하게 처리할 수 있s다.