Remix.js의 마크다운 블로그 개발에 숨겨진 핵심 기능
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
마크다운 블로그 개발을 진행하는 웹 개발자 (중급~고급)
핵심 요약
- Remix.js의 서버 측 렌더링 방식(
loader함수)은 Next.js의 정적 생성(getStaticProps)과 차별화된 동작을 제공 - 하이브리드 저장소 아키텍처를 통해 Git, PostgreSQL, Headless CMS, 에지 캐싱을 통합적으로 활용 가능
- MDX 기반 커스텀 컴포넌트 시스템을 통해 블로그 내부에서 인터랙티브 요소 구현 가능
- 3단계 캐싱 전략(HTTP, 서버 메모리, 클라이언트 예제)으로 페이지 로딩 속도 최적화
섹션별 세부 요약
1. 렌더링 철학 차이
- Remix.js는 요청별 서버 측 데이터 로딩(
loader함수)을 사용하여 동적 렌더링 - Next.js의 정적 생성(
getStaticProps)과 비교해 플랫폼 무관한 배포, 진정한 서버 측 렌더링 가능 - 예제:
```ts
export async function loader({ request }) {
return json(await getBlogPostService(params.slug));
}
```
2. 헥사곤 아키텍처 적용
- 블로그를 3계층 구조(레이어, 서비스, 리포지토리)로 분리하여 유지보수성 향상
- 경로 파일(routes) 대신 기능별 폴더(features)로 코드 조직화
- 예제 폴더 구조:
```
app/
├── routes/
├── features/blog/
│ ├── components/
│ ├── services/
│ └── utils/
└── shared/
```
3. 하이브리드 저장소 아키텍처
- Git: 마크다운 파일 버전 관리
- PostgreSQL: 메타데이터 및 검색 인덱스 관리
- Headless CMS: 편집자 인터페이스 제공
- 에지 캐싱: 처리된 콘텐츠 빠른 전달
- 예제 코드:
```ts
const cachedPost = await edge.getCache(post:${params.slug});
if (cachedPost) return json(cachedPost);
```
4. MDX 기반 커스텀 컴포넌트 시스템
- MDX에서
@mdx-js/react를 활용해 커스텀 컴포넌트(예: CodeSandbox) 정의 가능 - 예제:
```ts
export const CodeSandbox = ({ id, height = "500px" }) => (
);
```
- MDX 파일 내 사용:
```mdx
import { CodeSandbox } from '~/components/BlogComponents';
```
5. 3단계 캐싱 전략
- HTTP 캐싱:
Cache-Control헤더로 CDN 캐싱 - 서버 메모리 캐싱:
Map객체로 동적 캐싱 - 클라이언트 캐싱:
useFetcher로 관련 글 미리 로딩 - 예제:
```ts
export function headers() {
return { "Cache-Control": "public, max-age=300, s-maxage=3600" };
}
```
6. SEO 최적화 전략
- OpenGraph 메타태그 및 Twitter 카드 자동 생성
- 예제:
```ts
export const meta = ({ data }) => {
return [
{ title: ${post.title} | My Dev Blog },
{ property: "og:image", content: post.featuredImage }
];
}
```
결론
- Remix.js의 핵심 기능(헥사곤 아키텍처, 하이브리드 저장소, MDX 커스텀 컴포넌트)을 적용해 블로그 성능을 35% 향상 가능
- 3단계 캐싱 전략과 Server Timing API를 통해 성능 병목 지점 정확히 분석 및 최적화
- SEO 최적화를 위해 OpenGraph, Twitter 카드, 메타태그를 체계적으로 구성해야 함