Next.js를 운영하다 보면 한 번쯤 마주치는 질문이 있다. "꼭 Vercel에 배포해야 하나?"OpenNext를 이해하려면 먼저 이 질문이 왜 어려운 문제인지부터 알아야 한다.왜 "서버리스" 배포가 어려운가Next.js는 셀프호스팅 문서를 제공한다. 공식 배포 가이드를 보면 선택지가 이렇게 정리되어 있다.배포 방식기능 지원Node.js 서버전부Docker 컨테이너전부Static export제한적Adapters어댑터마다 다름npm run build && npm run start로 띄우는 Node.js 서버나 Docker 컨테이너는 Next.js의 모든 기능(SSR, ISR, 이미지 최적화, 미들웨어)을 그대로 지원한다. output: 'standalone' 모드로 런타임에 꼭 필요한 파일만 추린 최소 ..
전체 글
레프 톨스토이의 『인생론』은 인생의 의미를 다시 묻게 만드는 책이었다. 철학적인 내용이 많아 조금 어렵게 느껴지는 문장이 있었지만 읽을수록 "어떻게 살아야 하는가"라는 아주 본질적인 질문에 답하려는 책이라는 생각이 들었다. 이 책은 단순히 삶을 설명하는 것이 아니라, 인간이 왜 고통을 느끼고 무엇을 위해 살아야 하는지를 진지하게 바라보게 한다.『인생론』의 핵심은 간명하다. 톨스토이는 인간 안에 두 가지 자아가 공존한다고 본다. 하나는 먹고, 살아남고, 쾌락을 쫓는 동물적 자아이고, 다른 하나는 이성과 양심으로 움직이는 이성적 자아다. 동물적 생존, 즉 육체적 개체의 생존은 '인생'이라는 말에 해당하지 않는다. 인간의 진실한 생명은 동물적 개체의 행복을 부정하는 순간 비로소 시작된다. 그렇다면 이성적 존재..
Next.js App Router는 기본적인 파일 기반 라우팅 외에도 복잡한 UI 패턴을 구현할 수 있는 두 가지 고급 라우팅 기능을 제공한다. 패럴렐 라우트(Parallel Routes) 와 인터셉팅 라우트(Intercepting Routes) 다. 이 두 가지는 단독으로도 유용하지만, 조합하면 인스타그램 스타일의 URL 기반 모달처럼 기존 방식으로는 구현하기 까다로운 패턴을 깔끔하게 만들 수 있다.패럴렐 라우트한 화면에 여러 페이지를 동시에패럴렐 라우트는 하나의 레이아웃 안에서 여러 페이지를 병렬로 렌더링하는 기능이다. 대시보드처럼 독립적인 여러 영역이 한 화면에 공존해야 할 때 유용하다.구현은 @슬롯 형태의 폴더를 만드는 것에서 시작한다.app/dashboard/├── layout.tsx├── pa..
Next.js App Router는 폼 제출이나 데이터 뮤테이션을 위해 서버 액션(Server Actions) 이라는 메커니즘을 제공한다. API 라우트를 따로 만들지 않고도 서버에서 실행되는 비동기 함수를 컴포넌트에서 직접 호출할 수 있게 해주는 기능이다. 이 글에서는 use server 지시어, 폼과의 결합, useActionState 훅, 재검증과 낙관적 업데이트, 보안 주의사항까지 서버 액션의 동작 원리를 정리한다.서버 액션이란서버 액션은 "use server" 지시어로 선언되는 서버에서만 실행되는 비동기 함수다. 클라이언트 컴포넌트에서도 이 함수를 import해서 호출할 수 있는데, 실제로는 클라이언트가 호출하는 게 아니라 Next.js가 자동으로 POST 엔드포인트를 만들어서 그곳으로 요청을 ..
Next.js App Router는 서버 사이드 렌더링의 고질적인 문제를 해결하기 위해 스트리밍을 도입했다. 이 글에서는 스트리밍이 왜 필요한지, 페이지 스트리밍, 컴포넌트 스트리밍, Promise 스트리밍, 그리고 Partial Prerendering(PPR) 까지 정리한다. 기존 SSR의 한계스트리밍을 이해하려면 먼저 기존 서버 사이드 렌더링(SSR)의 문제를 알아야 한다.기존 SSR은 순차적으로 동작한다.[1] 서버에서 페이지에 필요한 데이터를 모두 가져온다 [2] 서버에서 HTML을 렌더링한다 [3] HTML, CSS, JS를 클라이언트로 전송한다 [4] 클라이언트에서 하이드레이션을 수행한다 문제는 이 단계들이 직렬이라는 점이다. 1번이 끝나야 2번이 시작되고, 3번이 끝나야 4번이 시작된다. 페..
Next.js App Router는 성능 최적화를 위해 여러 계층의 캐싱 메커니즘을 제공한다. 이 글에서는 풀 라우트 캐시, 라우트 세그먼트 옵션, 클라이언트 라우터 캐시 세 가지를 중심으로 페이지 캐싱이 어떻게 동작하는지 정리하려고 한다.풀 라우트 캐시 (Full Route Cache)개념풀 라우트 캐시는 빌드 타임에 페이지를 미리 렌더링하여 그 결과를 서버에 캐시해두는 것이다. 이후 요청이 들어오면 서버에서 다시 렌더링하지 않고 캐시된 결과를 바로 반환한다. 당연히 매우 빠르다.Next.js는 페이지를 두 가지로 분류한다. 설명스태틱 페이지빌드 타임에 생성되어 풀 라우트 캐시에 저장된다다이나믹 페이지매 요청마다 서버에서 렌더링된다. 풀 라우트 캐시 적용이 불가하다 다이나믹 페이지가 되는 조건다음 중 ..
최근 생성형 AI와 대규모 언어 모델(LLM)이 비약적으로 발전하고 있지만, 여전히 환각이나 지식의 유효 기간 같은 한계가 존재한다. 이러한 문제를 해결하고 기업의 특정 도메인 지식을 AI가 정확하게 활용하도록 돕는 핵심 기술이 바로 RAG(Retrieval-Augmented Generation, 검색 증강 생성)이다.프론트팀 온콜 보조 봇을 만들면서 RAG 기술에 대해 찾아보았는데 이 과정에서 알게된 내용을 정리해보려고 한다. 1. RAG란 무엇인가?RAG는 LLM이 응답을 생성하기 전, 학습 데이터 외부의 신뢰할 수 있는 기술 자료를 먼저 참조하여 출력 결과의 정확성을 최적화하는 프로세스다. 쉽게 말해, LLM에게 '오픈북 테스트'를 보게 하는 것과 같다. 모델이 이미 알고 있는 지식에만 의존하는 ..
순식간에 2025년이 지났다. 후반기에는 글을 잘 안 써서 그만큼 회고도 잘 하지 않았는데, 이번에 몰아 해보려고 한다.업무완벽함과 현실사이완전히 새로운 기능을 개발하기보다는 기존 코드베이스에 기능을 수정하거나 추가하는 작업이 많았다. 그때마다 최선의 구현 방법을 찾느라 고민하는 시간이 길어지곤 했다. 겉으로는 사소해 보이는 변경이라도 가독성과 향후 유지보수를 고려하며 이리저리 따져보다 보면, 실제 작업은 1시간이면 끝나는데 고민만 하루 종일 하는 경우가 잦았다.이런 시간이 무의미하다고 생각하지는 않는다. 동료와 조직을 위한 중요한 투자라고 생각한다. 하지만 시간은 한정되어 있고, 비즈니스 성과를 내야 하는 상황에서 무한정 고민만 할 수는 없다. 물론 그동안 맡은 업무는 최대한 기한 내에 완료했지만, 이..