
## MDXRemote를 선택한 이유

블로그를 운영하면서 마크다운 문법에 익숙해졌고, 그동안 써둔 글이 다 마크다운이었기 때문이다. 
정적 블로그를 만들거라 포스트를 직접 코드에 넣어야하는데 하나하나 HTML로 바꿔선 넣을 수 없으니까
방안을 찾아보다가 발견한 MDX. Markdown을 JSX로 적을 수 있다니 정확히 내가 찾던 거였다!!! 😘

## next-mdx-remote 사용법

1. Next.js의 `getStaticProps` 함수 안에서 마크다운 파일을 `fs`로 읽어온다.
2. `gray-matter` 라이브러리의 `matter` 함수로 마크다운의 내용물을 frontmatter와 content로 구분해 추출&파싱한다.
3. `next-mdx-remote`의 `serialize` 함수로 markdown을 mdx로 변환한다.

```js
// getStaticProps
export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { slug } = params as SlugInterface;

  // 1
  const markdownToMeta = fs.readFileSync(
    path.join(dir, slug + '.mdx'),
    'utf-8'
  );

  // 2
  const { content } = matter(markdownToMeta);

  const posts = await getAllPosts();
  const post = posts.find(p => p?.slug === slug);
  
  // 3 
  const mdxSource = await parseMarkdownToMdx(content);

  return { props: { post, mdxSource} };
};
```


리액트 앱에서 마크다운을 띄워줄 수 있는 라이브러리를 찾아야했다. 그래서 찾은 건 MDX Remote!

next-mdx-remote로 next.js에 마크다운 적용하기


얼마전에 Next.js 튜토리얼을 따라하면서 간결하고 편리해서 너무 맘에 들었었다.
그래서 jekyll로 만들어준 블로그를 리액트+Next.js로 옮기려고 며칠동안 뚝딱뚝딱 하는 중인데, 오늘은 정말 큰 진전이 있었다.
일요일이라 집밖으로도 안나가고 하루종일 코딩만 했는데 (ㅋㅋㅋ) 넘나 뿌듯하구만? 까먹기 전에 후딱 적어보겠다.

## Next.js로 블로그를 다시 만드는 이유

내가 지금 만드는 게 기술블로그인 만큼, 블로그 게시판의 글이 잘 짜여져있는게 중요했다. jekyll로 만들었을 땐 페이지네이션이 없고 그냥 모든 글 목록이 한번에 나왔었다. 내가 계속 글을 쓰면 쓸수록 쌓일 텐데 매우 비효율적이라고 생각했다. 이게 내가 블로그를 새로 만들어야겠다고 생각한 가장 큰 이유였다.

## 블로그 포스트 페이지

![pages 구조](/images/blog/2203/nj1.png)

최종적으로는 `pages/blog` 아래에 이런 구조로 만들어졌다. [Next.js 블로그 튜토리얼]()을 따라하고 구글링도 해가면서 만들었다.  
간단히 설명하자면 `getStaticPaths()`로 `posts` 디렉토리 안에 있는 파일들을 모조리 불러와서 확장자를 제외한 파일명으로 slug(URI의 path)를 만든다.  
그 다음엔 `getStaticProps()`로 해당 파일의 내용과 정보(frontmatter)를 불러온다. 그걸 그냥 컴포넌트에 넘겨주면 끝이다!

## 글목록 페이지네이션

![글 목록](/images/blog/2203/pgn.gif)

(아직 디자인 하나도 안 들어간 날것 주의)  
움짤을 보면 내가 이전페이지, 다음 페이지를 누르는 거에 따라 글 목록과 URI path가 달라지는 걸 볼 수 있다.  
이때 1,2,3과 같은 페이지 번호가 `[page_index].js` 컴포넌트이다.  
내 블로그 글의 개수를 `POST_PER_PAGE`로 나눠 페이지네이션을 구성하게 된다.

이 두 작업을 하면서 `getStaticPaths()`, `getStaticProps()`와 친해질 수 있었다. 😊

블로그 메인에 최근 글 목록(recent posts)도 몇개 띄우는데 이것도 비슷하게 root에 아예 api 폴더를 만들어놓고 거기서 최근 글 목록을 보내주도록 구성하였다.

## Module CSS, tailwind, styled-components 중 뭘 쓸까

고민 중이다. Next.js의 module css를 쓰면 클래스명을 겹치지 않도록 해준다. 적용할 스타일이 많은 부분엔 module css를 쓰고 있다. 대신 Tailwind가 커버할 수 있는 건 tailwind로 하고 있다.

지킬 블로그에서 쓰던 css를 가져와서 수정하는데, 품이 많이 든다. 🥲  
일회성 컴포넌트에선 module.css 말고 styled-components를 쓰고 싶은데 SCSS가 길어지면 가독성이 별로가 된다.  
각 컴포넌트별로 최적의 방법을 고민하는데에 시간을 많이 쓰고 있다.ㅋㅋㅋ

### Module CSS의 className

```js
<div 
    className={isNavOpen ? 
            `${styles.threeBarNav} ${styles.open}` 
            : styles.threeBarNav} 
    onClick={clickNav}>
    
</div>
```

`isNavOpen`이라는 state에 따라 다른 클래스네임을 반환하는 코드다.  
Module CSS에서 복수의 클래스를 쓰려면 저런 식으로 적어줘야한다.

### SASS

```css
.threeBarNav {
    &:hover {
        opacity: 0.7;
    }
    @at-root .navMenuUl {
        display: none;
    }
}
```

이건 오늘 처음 사용해본 SASS의 규칙 `@at-root`다. `@at-root`를 사용하면 중첩 안에서 root로 돌아간 효과를 준다.  
.navMenuUl이 .threeBarNav 밖에 있어도 중첩문 안에서 사용할 수 있다.

## 사파리 dateformat 이슈

`date-fns`로 Date 포맷을 바꾸고자 `format()`을 하면 오류가 나는 경우가 있다.  
나도 크롬을 보면서 개발해서 몰랐다가, 아이폰 사파리 브라우저로 접속했다가 이런 에러가 나고 있는 걸 인지했다.   
사파리의 경우 `yyyy-mm-dd hh:mm:ss` 형태의 시간 문자열 안에 가운데 띄어쓰기가 있으면 에러가 난다.
해결하기 위해서는 날짜를 ISO 문자열로 다루면 된다.

## 앞으로 추가하고 싶은 것

개발 블로그들 돌아다니면서 'DB를 따로 쓰는 것 같진 않은데 방명록은 어떻게 구현한거지?' 궁금증이 든 적이 많았다.  
(예시: [찬미니즘 님 블로그](https://c17an.netlify.app/Message))
그래서 지금 깃허브 코드를 보니까 github 저장소 `issue`에 API로 글을 쓰고, 가져오고 하는 것이었다.

`https://api.github.com/repos/>{깃허브 계정명}/{저장소 이름}/issues`

주소는 이런 식으로 해서 API `GET` 요청을 보내면 JSON 형식으로 응답이 온다.

그동안 뭐 특별한 라이브러리를 쓰는 건가!?했었는데 이렇게 간단한거였다니...!!!
새삼 깃허브가 제공하는 API 같은 걸 찾아볼 생각을 왜 안했지 싶었다. 짱짱...

## 결론

회사일, 아침헬스, 스터디, 사이드 팀 프로젝트 등 많은 걸 하느라 시간이 너무 빠르게 지나가는 요즘이었다.  
그래도 여전히 개발을 시간 가는지도 모르게, 재미있게 할 수 있어서 좋다.  
부지런하게 기존 블로그글 마이그레이션하고 새로운 기능들도 추가해봐야지!!!


Next.js 버전 12로 기술 블로그 개발하기

Next.js로 블로그 만들면서 배운 점과 느낀 점


요즘 핫한 리액트 프레임워크 `next.js`!!  
처음 `next.js`를 알게 된 건 next.js로 만든 멋진 웹사이트를 보고 나서부터였다. 
그이후로 점점 next.js의 이름을 많이 들었더니, 관심이 안 생길 수가 없었다 👀  
documentation을 좀 읽어보는데 쉽게 따라할 수 있는 튜토리얼이 있다고 해서 한번 따라해봤다.  
그리고 배운 것들을 정리해 보겠음 📂

## Next.js

![nextjs](https://nextjs.org/static/images/learn/foundations/next-app.png)

Next.js는 리액트 프레임워크 중 하나다. 위 사진 속에 보이듯 routing, data fetching, SSR 등을 할 수 있게 해준다.  
리액트를 쓸 때 라우팅을 하려면 `react-router-dom`을 따로 쓰고 설정을 해줘야했는데, next.js를 쓰면 얘가 알아서 해준다.  
여러모로 개발자가 리액트로 개발하는데 아주 큰 도움을 준다! (잠깐 써보고 벌써 체감했다.)

또 개발 단계의 앱을 프로덕션 단계로 만들고 싶을 때 Rust로 만들어진 Next.js 컴파일러가 프로덕션 최적화를 한다.
이 때 앱을 **컴파일**(브라우저가 이해하는 언어로 변환),
**번들**(웹 페이지에서 필요한 파일 수를 줄이기 위해 의존성 모듈이나 파일을 합치는 것),
**minify**(불필요한 코드, 여백을 줄여 파일 사이즈 줄임),
**코드 스플릿**(페이지에서 필요한 코드만 로딩해 앱의 초기 로드 시간을 줄이고자 앱 코드들을 작은 번들로 나누는 것)을 해
프로덕션 단계로 만든다. 

프로덕션 준비가 완료된 빌드 단계에서 Next.js 앱은 아래 네가지 파일을 갖게 된다. 
빌드가 완료되면 유저들이 사용할 수 있는 런타임 단계가 된다.

1. 정적 생성(SSG)된 HTML 파일들
2. 서버에서 렌더링할 JS 코드
3. 클라이언트에서 인터랙티브한 페이지를 만들 JS 코드
4. CSS 파일

## 렌더링

Next.js에서 가능한 렌더링 방법은 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR)이 있다. 
이 중 SSR과 SSG는 

### Pre-rendering

![pre-rendering](https://nextjs.org/static/images/learn/data-fetching/pre-rendering.png)

Next.js는 모든 페이지를 pre-render한다. 클라이언트 쪽의 JS가 아니라 
Next.js가 모든 HTML 페이지를 미리 만들어놓는다. 성능과 SEO 결과가 더 좋아진다.
만들어진 각각의 HTML은 그 페이지에서 필요한 최소한의 JS 코드를 포함한다. 
브라우저에서 페이지가 load되면 그때 그 JS 코드가 실행되어 페이지를 더 인터랙티브하게 한다. (이 과정을 **hydration**이라고 한다.)  
`<Link/>`같은 인터랙티브 컴포넌트는 js가 로드된 후 사용가능하다.

브라우저에서 자바스크립트를 꺼두고 Next.js로 만든 페이지에 들어가보면 더 확실히 알 수 있다.  
Next.js가 우리의 웹앱을 정적 HTML로 만들어놓았다는 것을!
만약 그냥 리액트 웹앱이면 자바스크립트 없이 동작하지 않았을 것이다.  

### Pre-rendering의 2가지 방법 (정적 생성 & 서버사이드 렌더링)

Next.js에선 이 두 방법 중 뭐를 쓸지 내가 직접 고를 수 있고, 섞어서도 개발할 수 있다.
Static generation과 server-side rendering의 차이는 **언제 페이지의 HTML을 생성하느냐**다.  
(개발 모드에서는 무조건 매 요청마다 pre-render된다.)

#### Static Generation: 빌드 시에 HTML 생성

![빌드 시 HTML 생성](https://nextjs.org/static/images/learn/data-fetching/static-generation.png)

- 왠만하면 이게 좋다. 왜냐면 한번 빌드된 페이지를 쓰면 되니까 서버가 매 요청마다 페이지를 렌더링하는 것보다 훨 속도가 빠르다.

#### Server-side Rendering: 매 요청 시에 HTML 생성

![매 요청시 HTML 생성](https://nextjs.org/static/images/learn/data-fetching/server-side-rendering.png)

- 만약 자주 업데이트되는 데이터가 있거나 매 요청마다 페이지의 내용이 달라져야한다면 서버 사이드 렌더링을 쓰는게 좋다.
- 정적 생성 방식보다는 느릴지 몰라도 항상 up-to-date!

## getStaticProps로 데이터가 들어간 Static Generation하기

Next.js에선 페이지 컴포넌트를 export할 때 getStaticProps라는 비동기 함수를 같이 export할 수 있다.

### getStaticProps

- 프로덕션 시 빌드 타임에 실행됨
- 파일 시스템, API, DB 등의 외부 데이터를 fetch해와 페이지의 props로 return할 수 있다.

#### 사용법

lib 디렉토리를 만들고 `gray-matter`를 사용해서 데이터를 내보낸다.  
참고로 그냥 `await.fetch()`를 해서 API로 가져온 데이터도 사용할 수 있다.  
`getStaticProps`는 **page에서 export된 파일만 가능하다.**

```js
// lib/posts.js

import fs, { readdirSync } from 'fs'
import path from 'path'
import matter from 'gray-matter'

const postsDirectory = path.join(process.cwd(), 'posts') // current directory/posts

export function getSortedPostsData() {
    const fileNames = fs/readdirSync(postsDirectory)
    const allPostsData = fileNames.map(fileName => {
        const id = fileName.replace(/\.md&/, '') // .md 지우고 id로 설정

        const fullPath = path.join(postsDirectory, fileName)
        const fileContents = fs.readFileSync(fullPath, 'utf8') // path에 있는 파일 내용 읽어오기

        const matterResult = matter(fileContents) // post의 metadata(frontmatter)
        
        return {
            id,
            ...matterResult.data
        }
    })
    
    // 날짜별로 sort
    return allPostsData.sort(({ data: a}, {data: b}) => {
        if (a < b) {
            return 1
        } else if (a > b) {
            return -1
        } else {
            return 0
        }
    })
}
```

```js
// pages/index.js  
import { getSortedPostsData } from '../lib/posts'

export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData  // prop으로 모든 블로그 포스트 넘겨주기
    }
  }
}

export default function Home({ allPostsData }) {
// ...
}
```

## 짱편한 라우팅

바로 위에서 언급한 next.js의 라우팅에 대해 이야기해보겠다. Next.js에서 한 페이지는 'pages' 폴더 안에 있는 한 파일 속 리액트 컴포넌트다.  
그래서 그 파일 이름으로 라우팅이 된다.

예를 들어 `pages/posts/first-post.js` 파일이 있으면 저절로 `posts/first-post` 로 경로가 설정된다.
다른 라우팅 라이브러리가 필요하지 않아서 진짜... 너무너무너무너무너무 편하다!!!

## Link

Next.js에서 다른 컴포넌트로 이동할땐 `<a/>` 태그 대신 `<Link/>` 태그를 사용한다.  
이때 중요한 점은 **클라이언트 사이드** navigation을 한다는 것이다.

### Client-side navigation

![client side nav](https://nextjs.org/static/images/learn/navigate-between-pages/client-side.gif)

위 이미지를 보면 페이지 전환이 일어나도 노란 CSS 설정이 계속 남아있다.
브라우저가 페이지 전체를 다시 로드하지 않고, client-side에서 navigation을 하기 때문에 일어나는 현상이다.
next.js의 `<Link/>`가 아니라 기본 html tag인 `<a/>`를 쓰면 브라우저가 전체 페이지를 새로고침하기 때문에 노란 CSS가 사라질 것이다.

그 외에도, client-side navigation은 자바스크립트를 이용해 페이지를 전환하기 때문에 브라우저의 기본 navigation보다 더 빠르다.

```javascript
export default function FirstPost() {
    return (
        <>
            <h1>First Post</h1>
            <h2>
                <Link href="/">
                   <a> Back to home</a>
                </Link>
            </h2>
        </>
    )
}
```

간단히 코드를 짜보면 이런식으로 `<Link>` 안에 `<a>`를 넣으면 된다. (링크 태그만 쓰는거 아님!)

## Code splitting and prefetching

**Next.js does code splitting automatically, so each page only loads what’s necessary for that page.**

Next.js는 자동으로 코드를 분리해줘서 페이지별로 로드된다.
처음에 홈페이지가 렌더될 때 다른 코드들은 같이 로드되지 않는다.
그렇기에 한 페이지에서 에러가 나도 다른 페이지들은 작동한다.

또 Link 태그가 브라우저의 viewport 안에 나타날 경우, Next.js가 자동으로 그 목적지 페이지의 코드를 미리 가져와둔다(prefetch).  
그래서 그 페이지로 좀 더 빠르게 이동할 수 있다.

## Static asset

- public 디렉토리 아래에 저장
- ```import Image from 'next/image'``` 컴포넌트를 쓰자.

### Nextjs의 ```<Image/>``` 를 쓰면 좋은 점

- 이미지 최적화해줌. WebP 지원되는 브라우저면 저절로 이미지 resizing을 도와준다.
- 심지어 외부 이미지 링크에서 가져오더라도 최적화가 가능하다. 그저 빛 ⭐️

### on-demand 최적화

- 빌드 시가 아니라 사용자 요청이 들어올때 이미지를 최적화한다. 이미지가 많아도 빌드 성능에 영향을 끼치지 않는다.
- lazy loaded! viewport에 들어올 때 이미지를 load한다.

## Third-Party JavaScript

```js
<Script
    src="https://connect.facebook.net/en_US/sdk.js"
    strategy="lazyOnload"
    onLoad={() =>
        console.log(`script loaded correctly, window.FB has been populated`)
    }
/>
``` 
앱에 부가적인 기능(analytics, ads, widgets)을 위한 스크립트들을 추가할 땐 `next/script`를 사용하자.
`strategy` 속성으로 언제 그 script가 로드될지를 지정할 수 있다.

## CSS Styling

Next.js에는 CSS-in-JS의 한 종류인 `styled-jsx`가 빌트인 내장되어있다.
리액트 컴포넌트 안에서 CSS를 쓸 수 있고, 또 CSS 스타일의 범위가 제한된다.**(=scoped)**  
styled-components나 emotion을 써본 사람에게는 더 쉬울 것이다.

### Layout Component

Next.js에서는 CSS 설정을 할 때도 도움을 준다. `className`을 설정하면 뒤에 랜덤한 문자열(해시)을 붙여 자동적으로 고유한 클래스 이름을 만들어준다.  
CSS 이름이 겹칠 걱정은 하지 않아도 된다!

`components/layout.js`에 `components/layout.module.css`를 적용하면 된다.  
[module.css](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css)는 unique한 클래스 이름을 만들어 충돌을 방지해준다.

### API 등 서버와 소통하는 함수는 루트 디렉토리에

블로그 메인에서 recent posts (최근 글 목록)을 보여주고 싶었다. 
이럴 경우, 내 블로그는 SSR이라 **최근 글 목록을 가져오는 함수**를 컴포넌트에 넣으면 안 된다. 
그래서 루트 디렉토리에 Api 폴더를 만들고 거기다가 API 역할을 해줄 함수들을 작성해주는 게 좋다.

## Next.js 튜토리얼을 따라하며 느낀 점

튜토리얼이 친절하고 너~~~무 유용한 프레임워크라 그런가 배우면서 즐거웠다. 
리액트로 프로젝트를 할 때 추가로 불러와 쓰는 라이브러리가 많았다. 
그에 따라 설정할 것도 많아서 헷갈리곤 했는데 Next.js가 내게 도움을 주니 정말 마음에 든다. 
앞으로 많은 프로젝트를 Next.js로 하게 되지 않을까?


SSR 첫걸음, 더 쉬워진 라우팅, 클라이언트사이드 네비게이션...

NEXT.JS

'NEXT.JS'에 관한 글들을 모아봤어요.

next-mdx-remote로 next.js에 마크다운 적용하기

Next.js로 블로그 만들면서 배운 점과 느낀 점

Next.js 튜토리얼 직접 따라해보기