Next.js
The React Framework for the Web
중년개발자
@loxo
Next.js 개발 필수 설정 2가지 - AGENTS.md , MCP 설정
Next.js 에서 개발에 필수 설정 2가지 Using AI Agents with Next.js DevTools MCP AGENTS.md 설정 (압축 AGETNTS.md) 프로젝트 터미널에서 실행 bash npx @next/codemod@canary agents-md DevTools MCP json { "mcpServers": { "next-devtools": { "command": "npx", "args": ["-y", "next-devtools-mcp@latest"] } } } 보너스 Context7 MCP 사용법: prompt 이후 use context7 입력 json { "mcpServers": { "context7": { "serverUrl": "https://mcp.context7.com/mcp", "headers": { "CONTEXT7APIKEY": "무료발급" } } } }
0
0
12
중년개발자
@loxo
certbot이 기억나지 않을 때: Cloudflare + Nginx 와일드카드 SSL 자동화 기록
예전에는 DNS 서버를 직접 구성하고, SSL 인증서도 수동으로 관리하는 것이 당연했습니다. 이제는 무료 SSL 인증서와 다양한 클라우드 서비스 덕분에 인프라 운영이 훨씬 간편해졌지만, 동시에 특정 서비스에 대한 의존도는 점점 높아지고 있습니다. 신규 도메인을 등록할 때마다 매번 다시 찾아보게 되는 certbot 관련 명령어들도 그중 하나입니다. 자주 쓰지는 않지만, 필요할 때마다 헷갈리는 부분들을 개인적인 기록 차원에서 정리해두려 합니다. 이 문서는 Debian Linux + Nginx + Cloudflare DNS 환경을 기준으로 작성되었습니다. 📘 게으른 관리자(나)를 위한 완벽 가이드 Nginx 와일드카드 SSL 자동 갱신 (Cloudflare편) 이 가이드는 한 번 설정해두면 3개월마다 갱신 신경 쓸 필요 없이 "알아서 돌아가는" 시스템을 구축하는 것을 목표로 합니다. 📋 목차 [사전 준비] Certbot 및 Cloudflare 플러그인 설치 [핵심 설정]
0
0
19
중년개발자
@loxo
SEO 작업 하다 현타가 와서 AI에게 질문을 했다.
SEO 작업 하다 현타가 와서 AI에게 질문을 했다. 우문현답이다. 사람보다 생각이 기특하다. 그리고 SGE(생성형 검색), E-E-A-T 단어를 건졌다. 나: SEO에 프로그램을 맞추는 것이 정말 구글 SEO에 효과가 있어? 이미 레드오션 시장에서 신규 입장으로서 가능성은 있어? 정말 봇 알고리즘에 도움이 되는 거야? >> AI: 매우 날카롭고 현실적인 질문입니다. 특히 이미 정보가 넘쳐나는 레드오션(PostgreSQL, Spring Boot 등 정형화된 기술 스택) 분야에서 신규 사이트가 SEO 설정을 맞춘다고 해서 정말 효과가 있을지 회의감이 드는 것은 당연합니다. 결론부터 말씀드리면, SEO 작업(Heading 구조화 등)은 '순위 상승'의 보증수표는 아니지만, '순위 경쟁에 입장하기 위한 최소 요건'입니다. 개발자 입장에서 구체적으로 왜 도움이 되는지 3가지 관점에서 설명해 드릴게요. 봇(Bot)은 사람이 아닙니다: "구조로 맥락을 파악합니다." 구글의 알고리즘이 매우
0
0
20
중년개발자
@loxo
Git Commit Message Prefix Guide - 정리
Git Commit Message Prefix Guide 목적: 팀/개인 모두에게 일관성 있는 커밋 히스토리를 제공하고, 변경 의도를 커밋 한 줄만 보고 즉시 파악할 수 있게 한다. 이 가이드는 Conventional Commits를 기반으로 하되, 실무에서 가장 많이 쓰이고 오해가 적은 형태로 정리했다. 1️⃣ 기본 형식 (표준) <prefix>(scope): short description 예시 feat(auth): add social login with Google fix(web): resolve hydration mismatch on SSR chore: bump version to 0.1.5 prefix : 변경의 성격 (가장 중요) scope : 영향 범위 (선택) description : 명확하고 짧게 (명령문) 2️⃣ Prefix 표준 목록 (실무 추천) ✅ feat — 기능 추가 의미 사용자에게 보이는 새 기능 언제 쓰나 버튼, API, 화면, 옵션 추가 예시
0
0
19
중년개발자
@loxo
React · Vue 기초 중의 기초
React · Vue 기초 중의 기초 그런데 진짜 많은 개발자가 여기서 헤맨다 useState, ref는 그냥 변수랑 다르다. 이걸 이해하면 React, Vue는 물론이고 어떤 언어·프레임워크도 훨씬 빨리 배운다. AA로 일하면서 여러 개발자들이 단순한 오해에서 고생한다. 화면이 안 바뀌니까. 여기에 비동기까지 겹치면, 지금 아래 반응형 변수를 알고 있어도 또 헷갈린다. 1️⃣ 우리가 원래 알고 있던 "변수"의 세계 JavaScript, Java, C, Python… 우리는 이렇게 배웠다. js let count = 0; count = count + 1; 이때 변수의 의미는 단순하다. 값 저장 값 변경 끝 💡 중요한 특징 값이 바뀌어도 그걸 누가 쓰는지는 변수는 모른다 즉, 변수는 세상에 관심이 없다. 2️⃣ UI 프레임워크가 등장하면서 문제가 생김 React, Vue 같은 프레임워크의 목적은 하나다. "데이터가 바뀌면 화면도 자동으로 바뀌게 하자" 그런데 기존 변수는 이런
0
0
21
중년개발자
@loxo
#3 - Next.js 16 App Router 업계 표준 설계 및 실제 가이드
Next.js 16 App Router 업계 표준 설계 및 실제 가이드 본 문서는 Next.js 16 버전을 기준으로 App Router의 핵심 사상과 설계 철학, 그리고 실무에서 가장 많이 사용되는 폴더 구조 및 URL 설계 패턴을 정의합니다. 설계 철학 및 사상 (Philosophy & Design Principles) Next.js App Router의 핵심 정신은 "물리적 폴더 구조가 곧 애플리케이션의 인터페이스(URL)가 된다"는 것입니다. 1.1 Folders as URLs (폴더 기반 라우팅) 모든 라우트 세그먼트는 폴더로 정의됩니다. page.js 또는 route.js가 포함된 폴더만이 공개적으로 접근 가능한 URL이 됩니다. 철학: 구조를 눈으로 보는 것만으로도 서비스의 URL 맵을 이해할 수 있어야 합니다. 1.2 Safe Colocation (안전한 병치) page.js 외의 다른 파일(컴포넌트, 스타일, 테스트 등)을 자유롭게 라우트 폴더 내부에 둘 수
0
0
21
중년개발자
@loxo
AI 시대, 메타프레임워크는 커지고 전통적 백엔드는 '정제'된다
AI 시대, 메타프레임워크는 커지고 전통적 백엔드는 '정제'된다 메타프레임워크란 무엇인가 메타프레임워크(Meta-framework)는 단순히 라이브러리의 모음이 아니다. UI 라이브러리를 중심으로 애플리케이션의 구조·실행·배포·최적화까지 통합적으로 책임지는 '운영체제'와 같은 상위 프레임워크다. 이들은 다음을 한 번에 다룬다. 라우팅: 파일 시스템 기반의 직관적 라우팅 데이터 페칭: 서버/클라이언트 경계 없는 데이터 흐름 관리 렌더링 전략: SSR, CSR, ISR, Streaming의 자동화 인프라 추상화: Serverless, Edge, Node.js 환경의 통합 대표적으로 Next.js, Remix, Nuxt, SvelteKit이 있다. 핵심은 이것이다. 메타프레임워크는 "개발자가 매번 고민하던 구조적 결정(Architecture Decision)을 프레임워크가 대신 내려주는 시스템"이다. AI 프로그래밍 시대의 본질적 변화 기술 진화의 핵심은 언제나 "더 좋은 언어"가
0
0
27
중년개발자
@loxo
동기화 안되면 만능 setTimeout을 쓰는 이유 - Event Loop
동기화 안되면 만능 setTimeout을 쓰는 이유 자바스크립트 이벤트 루프의 뒷골목 이야기 1️⃣ 프롤로그: “왜 얘는 항상 마지막에 오지?” 어느 날, 신입 개발자 민수는 이런 코드를 짰다. js console.log("1번"); setTimeout(() => { console.log("2번"); }, 0); console.log("3번"); 민수의 머릿속 실행 순서 👇 1번 → 2번 → 3번 현실의 실행 결과 👇 1번 → 3번 → 2번 민수는 혼잣말을 한다. “아니… 0ms 라며… 왜 제일 늦게 와…?” 이 순간이 바로 이벤트 루프의 세계로 입문하는 관문이다. 2️⃣ 무대 설정: 자바스크립트는 1명뿐인 식당이다 🍜 자바스크립트를 혼자 일하는 요리사라고 생각해보자. 주방에 요리사는 단 한 명 주문은 줄을 서서 처리 동시에 두 요리는 절대 불가 이 주방에는 세 가지 공간이 있다. 🧠 Call Stack (주방) 지금 당장 요리 중인 주문 동기 코드는 무조건 여기서 즉시
0
0
29
중년개발자
@loxo
🎯 10분 투자로 Typescript 타입스크립트 정복
🎯 10분 강의로 타입스크립트 정복 시작이 반이다 (50%) 거의 실무적 입장에서 보았을 때 이것 이상은 초고수의 영역이라고 생각합니다. 그러나 이 정도는 기억하고 있어야 합니다. 반복할 수밖에 없습니다. 특히 개발자들이 falsy 조건을 몰라 if문을 기준 없이 남발하고 있어요. 정말 중요합니다. if (!variable), if(variable)로 간단히 할 수 있는 것도 원리를 몰라서 그렇다고 생각이 됩니다. 0️⃣ 강의 한 줄 요약 (30초) 타입스크립트는 새 언어가 아니다 자바스크립트 코드에 타입을 붙인 것이 전부다 타입은 실행을 바꾸지 않고, 👉 실수와 버그를 “작성 중”에 잡아준다 1️⃣ 가장 먼저 알아야 할 것: if 문과 boolean (1분) ❌ 자바스크립트의 현실 js if (value) { // true일 수도, false일 수도, 문자열일 수도, 숫자일 수도… } ❗ if 문에서 false로 평가되는 모든 조건 (Falsy 값) 자바스크립트 /
0
0
27
중년개발자
@loxo
AI를 위한 Vercel: React Best Practices 공개
Vercel에서 React, Next.js AI를 위한 React Best Practices를 공개했습니다. 블로그 - React Best Practices GitHub react-best-practices react-best-practices 사용법 GitHub의 AGENTS.md 파일을 다운로드하여 개발 툴에 룰 적용 AGENTS.md Antigravity 적용 예시 프로젝트 > .agent > rules > vercel.md 로 저장하여 사용 12000자 제약이 있어서 여러 파일로 분할하여 저장 (vercel1.md, vercel2.md 등) 첨부 파일로 나누어 놓았습니다. 검증 prompt: Vercel React Best Practices rules 를 적용하여 프로젝트 전체 소스에 대한 소스 코드 리뷰 보고서를 만들어줘 결과 🔍 Vercel React Best Practices 프론트엔드 검토 결과 검토일: 2026-01-19 대상: postgresql 프론트엔드
0
1
34
중년개발자
@loxo
PWA 전제 조건과 Offline-first를 깨닫기까지
PWA 전제 조건과 Offline-first를 깨닫기까지 알림을 위해 FCM을 붙이면서 처음 접한 것은 수년 전이지만, 그때까지만 해도 PWA는 그냥 “웹에 알림 붙이는 정도의 기술”이라고 생각했다. 그런데 실제로 적용해보니, PWA는 생각보다 훨씬 강력한 웹앱 전략이었다. 모든 배포를 PWA로 구성하면 배포 방식이 단순해진다. 웹앱이기 때문에 별도 설치 과정을 거치지 않아도 되고, 브라우저에서 자동으로 설치가 가능하다. 보통은 홈 화면에 설치되며, 주소창이나 브라우저 UI 없이 앱처럼 실행된다. 또한 PWA는 스토어 배포도 가능하다. Microsoft Store Google Play Store (Android) Apple의 경우 App Store 등록 없이도 iPhone, iPad, Mac에서 홈 화면 설치 및 실행이 가능하다. 즉, 알림·오프라인·설치 경험 정도면 충분한 서비스라면 굳이 네이티브 앱이 필요하지 않은 경우가 대부분이라는 결론에 도달했다. 이 관점에서 보면 PWA는
0
0
30
중년개발자
@loxo
#1 - BFF (Backend for Frontend) 패턴 가이드
BFF (Backend for Frontend) 패턴 가이드 개요 Next.js가 BFF 역할을 수행합니다. 모든 클라이언트 요청은 Next.js를 거쳐 백엔드로 전달됩니다. text Client → Next.js (BFF) → Spring Boot (Backend) BFF 유형별 구현 방식 Bypass (단순 프록시) 용도: 인증 헤더 추가만 필요, 데이터 가공 없음 구현: proxy.ts + rewrites Next.js 16: proxy.ts Next.js 15: middleware.ts typescript // proxy.ts - Cookie → Authorization 변환 export function proxy(request: NextRequest) { const accessToken = request.cookies.get('accessToken')?.value; if (accessToken) { const headers = new
0
0
33