마크다운 포스트 및 front matter 컨벤션

• 마크다운 포스트

  • 발행할 포스트는 src/_posts 디렉토리에서 관리

  • .md 확장자를 제외한 파일명을 URL 경로로 사용

    파일 경로	블로그 포스트 URL
    src/_posts/Github-Actions로-사이트맵-갱신-자동화.md	https://www.moonkorea.dev/Github-Actions로-사이트맵-갱신-자동화
    src/_posts/React-블로그-성능-측정하고-개선하기.md	https://www.moonkorea.dev/React-블로그-성능-측정하고-개선하기
    ..	..

    

• front matter

  • 필드 정보

    필드	타입	필수 여부	설명
    title	String	Required	포스트 제목
    category	String	Required	포스트 카테고리
    description	String	Required	meta description
    excerpt	String	Required	포스트의 한 줄 요약
    tags	Comma-separated string list	Required	포스트 태그
    date	Date(YYYY-MM-DD)	Required	포스트 발행 날짜

  • 마크다운

    ---
    title: '블로그 성능 측정하고 개선하기'
    category: '리액트'
    description: 'Next.js 프레임워크가 여러 도구와 기능들로 다양한 최적화 작업을 대신해 주지만 구글 lighthouse와 서버에서 넘어오는 리소스들을 살펴보면서 블로그의 성능을 개선할 수 있는 부분들을 살펴보겠습니다.'
    excerpt: '구글 lighthouse의 평가 메트릭들을 보고 개선할 수 있는 부분 살펴보기'
    tags: 'React.js, Next.js, 블로그, 개발 경험, 성능'
    date: '2023-03-25'
    ---
    
    > lighthouse는 로컬 브라우저 환경(브라우저 익스텐션 등)과 네트워크 상태에 따라 측정 결과가 다를 수 있습니다.
    
     NextJS 프레임워크가 여러 도구와 기능들로 다양한 최적화 작업을 대신해 주지만 구글 lighthouse와 서버에서 넘어오는 리소스들을 살펴보면서 블로그의 성능을 개선할 수 있는 부분들을 살펴보겠습니다.
    
    ## 정적 리소스 크기
    
    ### 미디어 파일 크기
    
    ⓘ 개선 사항 : 정적 파일 용량 개선
    
     서버에서 gif 파일을 전달받는 블로그 포스트 페이지의 성능 섹션부터 확인해 보겠습니다. 개선 사항으로 비디오 포맷의 사용을 권장하고 있습니다.

  • front matter 객체

    const post = await getPostById(postId);
    console.log(post);

    {
      content: '> lighthouse는 로컬 브라우저 환경(브라우저 익스텐션 등)과 네트워크 상태에 따라 측정 결과가 다를 수 있습니다. ..',
      data: {
        title: '블로그 성능 측정하고 개선하기',
        category: '리액트',
        description: 'Next.js 프레임워크가 여러 도구와 기능들로 다양한 최적화 작업을 대신해 주지만 구글 lighthouse와 ..',
        excerpt: '구글 lighthouse의 평가 메트릭들을 보고 개선할 수 있는 부분 살펴보기',
        tags: 'React.js, Next.js, 블로그, 개발 경험, 성능',
        date: '2023-03-25',
      }
    }

Wiki 목록으로 가기