hafuture
Back to Blog
KRENJPES

바이브코딩(Vibe Coding) 가이드 및 개발의 미래

Next.js App Router 기반의 MDX 기술 블로그를 구축하여 바이브코딩 개발 일지와 기술 노하우를 빠르게 작성하고 게시하는 방법 가이드.

mdxnextjsvibe-coding

안녕하세요! hafuture 블로그에 오신 것을 환영합니다.

왜 MDX인가요?

MDX는 Markdown에 JSX를 결합한 형식입니다. 이를 통해 다음과 같은 장점을 누릴 수 있습니다:

  • 간편한 작성: 마크다운처럼 쉽게 작성

  • 풍부한 컴포넌트: React 컴포넌트를 직접 사용

  • 코드 하이라이팅: 자동으로 지원

사용 방법

게시글 작성

  1. content/posts/ 디렉토리에 .mdx 파일 생성
  2. frontmatter에 메타데이터 추가

\```mdx

title: "바이브코딩(Vibe Coding) 가이드 및 개발의 미래" description: "Next.js App Router 기반의 MDX 기술 블로그를 구축하여 바이브코딩 개발 일지와 기술 노하우를 빠르게 작성하고 게시하는 방법 가이드." date: "2026-01-10" tags: ["태그1", "태그2"] published: true

```

코드 블록

const greeting = "Hello, World!";
console.log(greeting);

관련 도구 써보기

블로그 운영이나 콘텐츠 제작 시 다음 도구들을 활용해 보세요:

앞으로의 계획

  • hafuture 웹툴 업데이트 공유

  • 개발 기록 (Vibe Coding 로그)

  • 기술 아티클 및 실험 결과 공유

즐겁게 읽어주세요!