
## Table of Contents

## 첫 게시물 두근두근

안녕하세요! **`감구마`** 입니다.  

이전부터 개인 블로그 하나쯤은 정말 갖고 싶었습니다! 다만 만들어진 velog 를 사용할까,, 아니면 jekyll 를 사용할까,, 라는 고민이 많았습니다.  
그러던 도중 만들어보면 어떨까? 라는 생각을 하게 되었고 아래와 같은 이유로 직접 개발하기로 결심했습니다!

- 블로그라는 작은 서비스를 직접 만드는 것은 그렇지 않은 것에 비해 배울 수 있는 것이 많다.
- 특히, 기능 개발을 할 때 많은 에러, 구동 메커니즘을 배울 수 있다. (실제로 개발하며 고민한 시간이 엄청 많았습니다😥)
- 리액트와 SSR, SSG 를 배울 수 있는 좋은 기회다.
- 내 입맛대로 커스터마이징을 할 수 있다!
- <s>간지</s>

이렇듯 직접 만들어보며 배운 것이 많았고, 그것들을 이 포스트에 작성해보려고 합니다.

우선 사용한 기술은 아래와 같습니다

- Next.js
- Styled-Components
- next-mdx-remote

## Why

### Why Next.js?

저는 Next.js 와 Gatsby.js 중 고민하였습니다. 다른 개발자 분들께서도 개인 기술 블로그를 만드실 때 Gatsby.js 를 많이 사용하더군요.  

Gatsby.js 와 Next.js 의 공통된 장점

- **SSR, SSG 를 통해 SEO 가 가능하다.**  
물론 기존 React 의 경우 react-helmet 을 사용하여 SEO 를 진행할 수 있습니다. 다만 그래도 첫 페이지는 빈 html 이며 이것을 해결하기 위해선 직접 SSR 을 구성해야합니다.

Gatsby.js 의 장점

- 요거 추가해!

Next.js 의 장점

- 요것도 추가해!

그런데도 Next.js 를 고른 이유는 아래와 같습니다.

- Next.js 도 SSG 를 지원한다.
- 추후 프로젝트에서 사용할 생각이라 미리 사용해보면 좋지 않을까?,,
- 괜찮아 에러는 구글 선생님께서 다 알려주실거야.

라는 이유로 Next.js 를 선택하게 되었으며 개발해보며 재미좀 봤습니다. 😅

### Why Styled-components

우선 저는 CSS-in-JS 를 선호합니다. 저에게 CSS-in-JS 를 사용하며 얻는 이점은 아래와 같습니다.

- 컴포넌트 단위로 생각할 수 있다. - 가장 중요하게 생각한 점
- ClassName 을 생각하지 않아도 된다. (?)
- 동적 스타일링, 테마 적용이 매우 간단해진다.

이러한 이유로 CSS-in-JS 를 선택하게 되었습니다.  
더불어 CSS-in-JS 에도 많은 종류가 있는데 특히 Emotion, Styled-components 중 고민하였습니다.
이점에선 이전에 사용해본적이 있는 Styled-components 를 고르게 되었습니다만, [css prop](https://emotion.sh/docs/css-prop) 을 보곤 추후 개발엔 Emotion 을 사용해보고 싶다는 생각이 들었습니다.

## 어떻게?

### Next.js

우선 Next.js 가 제공해주는 라우팅은 정말 너무나도 편했습니다.
다만 처음 사용할 땐 SSG, SSR 의 개념이 살짝 이해가 안 되어 게시글 작성하는 김에 정리를 해보려고 합니다.

> **CSR = Client Side Rendering**  
>
> - 기본적인 동작은 브라우저가 서버로부터 JS 파일을 받고 그 파일을 브라우저가 실행시켜 사용자에게 보여주는 형식입니다.
>
> - 초기 로딩이 오래걸릴 수 있지만 완전히 로드되면 추가로 로드가 필요하지 않아 사용자 경험이 좋습니다.
>
> - 다만, JS 파일을 다운받고 브라우저가 실행시켜 HTML 에 렌더링하기에 **JS 파일의 크기가 크거나**, **인터넷이 불안정한 상황**에선 사용자가 흰 화면을 바라만 보고 있는 상황이 발생할 수도 있습니다.  
>
> - 더불어 빈 HTML 로 인한 초기 컨텐츠 부족으로 SEO 를 유지하기 어렵습니다.
>
> **SSG = Static Site Genration**
>
> - SSG 의 경우 빌드시 정적 사이트를 미리 만들어두기에 사용자에 따라 변화하지 않는 즉, 개인 블로그나 문서와 같은 서비스에 적합하다고 볼 수 있습니다.
>
> - 이 때, 빌드시 미리 만들어 놓는다는 점을 통해 유추할 수 있겠지만 초기 페이지는 빌드할 때 기준이기에 컨텐츠가 추가/변경된다면 다시 빌드해야합니다.
>
> - 지금 감구마 블로그도 게시글은 SSG 로 생성하여 게시글 업데이트를 하려면 매번 다시 빌드하여야 합니다,,!
>
> - 다만 많은 컨텐츠가 미리 렌더링되고 정적인 컨텐츠라는 특징 덕분에 페이지 로드 시간이 빠릅니다.
>
> - SEO 에 이점이 있습니다. (빌드시 SEO 작업하면 뚝,,딱)
>
> **SSR = Server Side Rendering**
>
> - SSR 은 브라우저가 서버에 컨텐츠를 요청하면 서버에선 해당 페이지에 필요한 데이터를 모아서 페이지를 구성한 후 사용자에게 전달합니다.
>
> - 이에 대한 장점은 SSG 와 달리 컨텐츠의 수정을 실시간으로 확인할 수 있으며, 유저와 같이 동적인 데이터를 취급하기에 적합합니다.  
>
> - SSG 와 마찬가지로 SEO 에 유리합니다.
>
> - 다만 서버측에서 데이터 수집이 오래걸린다면 그만큼 페이지 구성이 늦어지기에 CSR, SPA, SSG 보다 늦게 로딩될 수 있습니다.

## 개발하며 어려웠던 점

블로그를 개발하며 여러 고민과 문제들이 있었고, 이 점을 기술해보려 합니다.

### Styled-components 의 SSR

Next.js 의 경우 SSR, SSG 상황에서 빌드할 때 CSS 을 넣어줍니다.
하지만 styled-components 를 사용하는 경우 문제가 발생합니다. (Emotion 의 경우 v10 이후 버전 사용하면 ✅)
SSR, SSG 의 경우 사용자가 접속하면 서버에서 만든 HTML 을 사용자에게 주는데 이 때 style 태그가 빈 상태로 넘어가고, 브라우저가 JS 파일을 받아 실행시켰을 때 비로소 스타일이 적용됩니다.

**즉**, 사용자에게 렌더링 되었을 때 JS 파일이 실행되기 전까진 스타일 적용이 안 되어 있습니다.

[참고](https://styled-components.com/docs/advanced#nextjs) 이를 해결하기 위해 3가지 작업을 해주었습니다.

1. `_document.js` 에 하단 코드를 추가합니다.

```js
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}
```

2. `npm install --save-dev babel-plugin-styled-components` 로 플러그인을 설치합니다.

3. `.babelrc` 에 하단 코드를 작성하여 플러그인을 적용해 주세요! (없다면 root 폴더에 생성 후 작성해주세요 )

```js
{
 "presets": ["next/babel"],
 "plugins": [["styled-components", { "ssr": true }]]
} 
```

이러한 작업 후 빌드시 HTML Style 태그 안에 스타일이 적용되어있으므로 JS 파일을 다운 받기 전에도 스타일이 적용되어 있을 것입니다.  
이를 테스트 하기 위해선  ``개발자 도구`` -> ``환경설정`` -> ``자바스크립트 사용 중지`` 를 체크해보시면 아! 이거구나! 라고 생각할 수 있습니다.

## 아쉬웠던 점

직접 리액트로 SSR 을 구현해봤었더라면 Next.js 가 얼마나 유용하고 좋은지 2배로 체감이 가능했을 것 같은데 이 점이 조금 아쉽습니다.

## 개선해야할 점

### SSR 로의 전환 or headless CMS 적용

### Sitemap / RSS

### 전역상태관리

###


next.js 로 블로그를 만들며 느낀 것들

Next.js 블로그 개발기