Next.js 블로그 모범 사례 탐구: Vercel 리더십 블로그 아키텍처 파헤치기│인프콘2024
INFCON 2024 인프런 · YouTube
AI 핵심 요약
하조은은 Next.js 블로그의 콘텐츠 관리, 라우팅·렌더링, 메타데이터를 기준으로 Vercel의 Guillermo Rauch와 Lee Robinson이 공개한 블로그 코드를 비교했다. Guillermo는 MDX 글을 코드에 두고 Redis 조회수와 ISR을 활용하며, Lee는 파일 시스템의 MDX와 PostgreSQL을 사용하고 PPR, 동적 메타데이터, JSON-LD를 적용한다. 발표자는 두 사례를 참고해 자신의 블로그에서 조회수 기능을 빼고 SSG를 선택했으며, 글 목록을 자동으로 구성하도록 개선했다. 유명한 구현도 모두에게 정답은 아니므로 기능과 운영 부담을 따져 상황에 맞는 아키텍처를 고르는 것이 핵심이라고 설명했다.
- 마크다운 파일을 MDX로 컴파일하면 글 안에 React 컴포넌트를 삽입할 수 있다.
- Next.js App Router에서는 `generateMetadata`와 `metadata` 객체로 동적·정적 메타데이터를 각각 정의할 수 있다.
- Suspense로 동적 영역을 분리하면 PPR에서 정적 셸과 동적 콘텐츠를 함께 제공할 수 있다.
- 조회수처럼 데이터베이스가 필요한 기능은 Redis나 PostgreSQL 등 저장소와 갱신 방식을 함께 고려해야 한다.
- JSON-LD 구조화 데이터는 검색 엔진이 블로그 콘텐츠를 이해하도록 돕지만, 적용 여부는 블로그의 목적과 상황에 맞춰 판단해야 한다.
소개
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 Next.js 블로그 모범 사례 탐구: Vercel 리더십 블로그 아키텍처 파헤치기 - 하조은 인프런에 Next.js 강의를 올린 후로 많은 분들이 ‘나만의 블로그 만들기’ 강의를 요청해 주셨습니다. 요청에 응답하기 위해 Next.js로 만든 좋은 블로그를 찾아 나섰습니다. Next.js를 만든 사람의 블로그를 살펴보면 좋겠다는 생각이 들었죠. Vercel의 CEO인 Guillermo Rauch, VP인 Lee Robinson의 블로그를 찾을 수 있었습니다. 두 사람의 코드를 보며 Next.js가 지향하는 블로그 아키텍처를 짐작해 볼 수 있었습니다. 이번 발표를 통해 여러분의 블로그 만들기에 도움이 되는 지식을 얻어가시면 좋겠습니다. #인프콘 #인프런 #인프콘2024 #인프콘2...
비슷한 학습 자료
컨퍼런스 INFCON 2024
인프콘 2024 비하인드 브이로그 | INFCON2024 | 인프랩 팀원들은 인프콘 때 뭘하고 있었을까?
컨퍼런스 INFCON 2024
오프닝 키노트 | 인프콘2024
컨퍼런스 INFCON 2024
달리는 기차의 바퀴 갈아끼우기: 인프런 프론트엔드 마이그레이션 여정│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 달리는 기차의 바퀴 갈아끼우기: 인프런 프론트엔드 마이그레이션 여정 - 조성륜 실제 운영되고 있는 서비스의 레거시 코드(Express.js 기반 Vanilla.js)를 모던 리액트 환경으로 마이그레이션을 하기위한 인프런 프론트파트의 여정을 공유합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
웹 개발 프론트엔드
컨퍼런스 INFCON 2024
인프런 아키텍처 2024 ~ 2025 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 인프런 아키텍처 2024 ~ 2025 - 이동욱 작년 발표 이후 1년간 인프런 아키텍처가 어떤 변화가 어떤 이유로 진행되었는지 소개 합니다. 새로운 구조나 아키텍처로 개편하는 과정에 대한 이야기들은 많지만 그런 개편 이후 1년, 2년이 지나서 어떤 결과가 만들어지는지에 대한 소개는 많이 없습니다. 인프런에서는 2022년부터 지속적으로 아키텍처를 점진적으로 개선하고 있으며, 2년전의 결정이 지금은 어떻게 되었는지 등 결과도 함께 경험하고 있습니다. 최근 1년간은 비용절감, Next.js 기반의 SSR, CSR, SPA 환경과 기존 Express SSR 과의 공존, 글로벌 플랫폼을 가기 위한 기반 작업 등등 여러 관심사를 해결하기 위한 노력들을 해왔습니다. 인프런 서비스가 ...
프론트엔드 백엔드
컨퍼런스 INFCON 2024
난생처음 만드는 Vite 플러그인│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 난생처음 만드는 Vite 플러그인 - 이은재 우리가 개발할 때 사용하는 Vite라는 도구는 어떻게 돌아갈까요? 우리가 작성하는 .jsx, 혹은 .vue 파일들은 어떤 과정을 거쳐 .js 파일로 변환되는 걸까요? 분명히 Vite 플러그인을 여러 개 설치하면 되기는 하는데, 이게 왜 어떻게 되는 걸까요? Vite 플러그인을 같이 작성해 보면서 Vite 플러그인에 대해 아무것도 모르셨던 분도 그 구조와 작동 흐름에 대해 이해할 수 있게 될 거예요. Vite 플러그인은 다양하게 쓰이는데요. 예를 들어 이를 잘 활용하면 굳이 런타임에 할 필요 없는 연산을 빌드 타임에 미리 함으로써 런타임을 빨라지게 할 수도 있습니다. 번들러는 우리에게 겁을 주는 대표적인 존재인데요. 이 발표를 통해...
프론트엔드 개발 도구
컨퍼런스 INFCON 2024
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지 - 유진의 "웹 어셈블리"(이하 WASM)는 2017년에 공개된 새로운 웹 표준 기술이며, C/C++ 등의 저수준 언어를 웹 환경에서 빠르고 안전하게 구동할 수 있습니다. 저희 조직에서는 C++ 오픈소스를 WASM으로 전환하는 과정을 통해 복잡한 그래픽스 엔진을 웹으로 포팅하여 성공적으로 운용하고 있으며, C++ 네이티브 API로 구동되는 웹 표준 컴포넌트를 개발하여 사용자들이 손쉽게 이용할 수 있는 가볍고 빠른 Lottie 애니메이션 플레이어를 제공하고 있습니다. WASM은 트렌디하며 굉장히 중요한 기술입니다. 본 세션에서는 WASM이 기존 웹 개발의 영역에서 어떠한 부분을 대체하고 개선할 수...
웹 개발 프로그래밍 언어