
## 태그별 모아보기

![%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2023-02-13_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_4 59 26](https://user-images.githubusercontent.com/67692759/218408045-87a82f59-184c-4026-b502-ab29f5a53e2f.png)

![%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2023-02-13_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_4 59 40](https://user-images.githubusercontent.com/67692759/218408147-c00a8fae-5d47-4c2d-b4a5-2f0f0be1c728.png)

글에 작성했던 tag별로 모아볼 수 있는 페이지를 구현하였다. 태그별 모아보기, 시간 순으로 모아보기를 구현하고 싶었기 때문에 archives페이지에서 전체 글을 가져와 태그별, 날짜별로 정렬해주었다.

태그별 모아보기 페이지는 포스트 페이지와 동일하게 동적 라우팅으로 구현하였다. 이제 어떤 곳에서든 태그를 누르면 해당 태그 모아보기 페이지로 이동한다.

---

## sitemap & RSS

사실 크기가 작은 사이트에는 sitemap이 불필요하다. 하지만 나의 블로그는 앞으로 매우 커질 것이기 때문에 sitemap을 추가했다. 빌드시마다 sitemap과 robot.txt를 빠르게 생성해주는 [next-sitemap](https://www.npmjs.com/package/next-sitemap)을 사용하여 추가했다.

대부분의 블로그에는 구독 기능인 RSS(Really Simple Syndication)가 있다. 또한 구글의 search console에서 sitemap과 함께 rss를 제출하기를 권장하고 있다(이는 크롤링에 도움이 된다고 한다) RSS를 쉽게 생성해주는 패키지가 있어 이를 사용하여 추가해주었다. 관련 설정은 아래 글을 참고했다.

[https://j471n.in/blogs/rss-feed-for-nextjs](https://j471n.in/blogs/rss-feed-for-nextjs)

---

## 이것저것 추가

날짜 포맷팅을 이쁘게 해주기 위해서 date-fns를 추가했다.

framer-motion 맛보기. 아직은 메인 페이지에서 글을 가져올 때만 애니메이션을 넣어주었는데 조금 더 공부해서 다양한 곳에 애니메이션을 추가해보고 싶다.

네이버 서치 콘솔에 등록했다. 이제 네이버에 검색해도 내 블로그가 보인다 크크(그나저나 구글은 왜 이리 오래걸리는지 모르겠다. 어여 등록해주라우)

![네이버 검색](https://user-images.githubusercontent.com/67692759/218408281-54d491c6-fff7-44a4-bdca-239f8ef22c32.png)

### +) 구글 등록 완료

![구글 서치 콘솔 등록](https://user-images.githubusercontent.com/67692759/220804499-8ebf8dcf-c484-4b46-9932-9816a7e72741.png)

![image](https://user-images.githubusercontent.com/67692759/220804770-c90ba60a-2636-480e-b3c1-c9ec898bcdf9.png)

구글 서치 콘솔에도 등록이 되었다는 메일이 왔다. 등록까지는 약 1달 반 정도가 걸렸다.

---

## 수정해야 할 사항

글 제목으로 검색 했을 시 글 제목과 설명이 아닌 메인 페이지가 나오고 있는데 내가 SEO 관련 설정을 잘못한 것인지 아니면 아직 반영이 안된 것인지는 조금 더 알아봐야겠다.

![네이버 검색 by 제목](https://user-images.githubusercontent.com/67692759/218408287-6b02f12c-0bc5-4578-868b-89263f69919e.png)

media-zoom 얹어서 사진 확대하기 기능을 추가하려고 하니 아래와 같은 오류가 생기고 있다. 뭔가 mount 되기 전에 utterance를 얹을려고 해서 그런 것 같은데 흠.

![스크린샷 2023-02-14 오후 5.01.17.png](https://user-images.githubusercontent.com/67692759/218753955-e2c41da5-423f-4570-9532-8b9f1d6f045e.png)


블로그 발전기 - 2편


## 댓글 기능 추가

어떤 기능이 더 들어가면 좋을까 고민하다 댓글 기능을 추가하기로 했다. Github issue를 기반으로 동작하는 [utteranc](https://utteranc.es/)를 사용해보자.

### react에서 쓸 수 있도록 컴포넌트화

utteranc의 사용방법은 매우 간단하다. 홈페이지에서 제안하는대로 따라가면 된다. 원하는 레포에 utteranc를 다운받고, 원하는 형식을 선택하고 해당 script를 사용하면 된다. page pathname보다는 page title을 issue tittle로 하는 것이 보기 좋을 것 같아 page title을 선택하였다. 내 블로그는 react를 기반으로 만들어졌기 때문에 해당 script를 컴포넌트화 하여 컴포넌트 형식으로 사용할 수 있도록 하자.

```tsx
import useThemeMode from "hooks/useThemeMode";

const Comment = () => {
  const { themeMode } = useThemeMode();

  return (
    <section
      ref={(elem) => {
        if (!elem) {
          return;
        }
        const scriptElem = document.createElement("script");
        scriptElem.src = "https://utteranc.es/client.js";
        scriptElem.async = true;
        scriptElem.setAttribute("repo", "prefer2/prefer2.dev");
        scriptElem.setAttribute("issue-term", "title");
        scriptElem.setAttribute("theme", `github-${themeMode}`);
        scriptElem.crossOrigin = "anonymous";
        elem.replaceChildren(scriptElem);
      }}
    />
  );
};

export default Comment;
```

### 😱 Github 로그인 시 redirect가 이상한 페이지로 이동?!?!

![utteranc 오류](https://user-images.githubusercontent.com/67692759/212606818-3490371c-3386-4146-89e3-3b2c0671fa11.png)

issue를 찾아보니 redirect시 link의 cannoical를 사용한다고 한다. 덕분에 잘못된 cannoical을 설정해주고 있었음을 확인할 수 있었다. 오타를 고쳐주니 정상적으로 동작했다. 혹시 나처럼 redirect가 이상한 곳으로 가서 404 에러가 발생한다면 cannonical값을 다시 한 번 확인해보자.

[https://github.com/utterance/utterances/issues/474](https://github.com/utterance/utterances/issues/474)

---

## Recoil 얹기

댓글을 추가하고 나니 댓글의 테마도 모드에 따라 변경되게 하고 싶었다. 기존에 알아보고 싶었던 recoil도 학습할 겸 recoil를 사용해보았다.

recoil 개념에 대해 알아보기 좋은 동영상

[https://www.youtube.com/watch?v=\_ISAA_Jt9kI](https://www.youtube.com/watch?v=_ISAA_Jt9kI)

### next.js + recoil

쉽게 적용이 가능했으나 hot module replacement를 사용할때마다 에러가 발생하였다. 해결방법을 찾다보니 해당 이슈가 꽤나 핫한 것을 확인할 수 있다.

![next.js + recoil 에러 메시지](https://user-images.githubusercontent.com/67692759/212606920-636dccf7-c73e-4a61-b951-2208daa1b64a.png)

https://github.com/facebookexperimental/Recoil/issues/733

recoil도 해당 문제점을 알고 해결 방법을 최근에 추가하였다. [https://recoiljs.org/ko/blog/2022/10/11/recoil-0.7.6-release](https://recoiljs.org/ko/blog/2022/10/11/recoil-0.7.6-release)

블로그에서 제안하듯이 `RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false`

로 환경 설정값을 지정해주면 된다.

[https://nextjs.org/docs/messages/react-hydration-error](https://nextjs.org/docs/messages/react-hydration-error)

사실 단순히 테마 값 하나만을 위해서 recoil을 추가한 건 좀 많이 과하다. 그래도 처음으로 recoil을 사용해보고 어떤 식으로 동작하는지 공부해볼 수 있었다.

---

## Scroll Progress Bar 추가

사용자가 전체 글의 어느 위치에 있는지 보여주기 위해 scroll progress bar를 추가하였다. 페이지가 그려지고 나서야 전체 페이지의 높이를 알 수 있기 때문에 `useEffect`를 사용하여 이를 구했다. (rAF 기반 throttle을 걸어 주었는데 의문점이 생겨서 관련 내용은 따로 정리해볼 예정이다)

페이지 전환 시에는 스크롤의 위치가 0으로 되게 하기 위해서 아래와 같은 코드를 추가해주었다

```tsx
Router.events.on("routeChangeComplete", (): void => setScrollPercentage(0));
```

---

## 이전글, 다음글

포스팅 마다 이전글, 다음글을 보여주는 컴포넌트를 추가하였다. 포스팅 페이지 렌더링 시 slug 값을 가져오는 형식이다. 로직은 아래와 같이 작성했는데 조금 더 좋은 방법이 없을지 고민이다.

```tsx
export const getPrevNextPosts = (slug: string) => {
  const slugs = getPostSlugs();

  let slugIndex = 0;
  const posts = slugs
    .map((slug) => getPostBySlug(slug))
    .sort(
      (post1, post2) =>
        Number(new Date(post2.date)) - Number(new Date(post1.date))
    )
    .map((post, idx) => {
      if (post.slug === slug) slugIndex = idx;
      return { title: post.title, slug: post.slug };
    });

  if (slugIndex === 0) return { prev: posts[slugIndex + 1] };
  if (slugIndex === slugs.length - 1) return { next: posts[slugIndex - 1] };

  const nextPost = posts[slugIndex - 1];
  const prevPost = posts[slugIndex + 1];

  return { prev: prevPost, next: nextPost };
};
```

slug과 제목을 넘겨주어 포스팅 하단에서 제목을 확인할 수 있고, 이를 클릭하면 해당 글로 이동하게 된다.

![이전글, 다음글 기능](https://user-images.githubusercontent.com/67692759/212607324-0ee77646-ad0c-4b99-8779-252a613f9378.png)

2편에는 어떤 기능들을 추가해야할지 흠흠


댓글기능 추가, recoil, scroll progress bar, 이전글 다음글

블로그 발전기 - 1편


기술 블로그를 tistory를 통해 운영하고 있지만, 학습을 위해 가장 좋은 방법이라고 생각이 되어 나만의 블로그 만들기를 시작했다. 블로그를 만들게 된 이유는 아래와 같다.

- SSR, SEO 학습
- 백엔드 없이 정적으로 진행 가능
- 나만의 커스터마이징이 가능
- 간지

기술 스택은 아래와 같이 선택했다.

- Next.js
- Typescript
- Tailwind
- Vercel

스타일링의 경우 기존에 사용하던 css-in-js가 아닌 tailwind를 선택했다. 스타일을 위한 불필요한 컴포넌트가 줄어들었고, 일관성 있는 디자인으로 개발할 수 있는 것 같다. 옛날 옛적에 접했던 bootstrap의 기억이 새록새록 났다.

[Next.js 공식 문서](https://nextjs.org/learn/foundations/about-nextjs?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website)와 Next에서 제공하는 [블로그 예시](https://github.com/vercel/next.js/tree/canary/examples/blog-starter)를 보면서 만들어보았다. Next.js 공식 문서가 굉장히 잘 작성되어있고 Next관련 내용뿐만아니라 웹 전반의 내용을 잘 설명해주고 있어서 추천한다.

정적 블로그를 만들기 때문에 사용하는 SSG가 무엇인지 간단하게 알아보자.

> 💡 Static Site Generation  
> With Static Site Generation, the HTML is generated on the server, but unlike server-side rendering, there is no server at runtime. Instead, content is generated once, at build time, when the application is deployed, and the HTML is stored in a CDN and re-used for each request.

빌드 타임에 HTML이 생성되고, 이 생성된 HTML 파일은 CDN에 저장되어 사용된다. 많은 컨텐츠가 미리 렌더링되고 정적인 컨텐츠라는 특징 덕분에 페이지 로드 시간이 빠르다.

---

## 기본 설정

```bash
yarn create next-app --typescript
```

이후 [tailwind 공식 문서](https://tailwindcss.com/docs/guides/nextjs)에서 설명하는 대로 설정을 추가하였다. 절대 경로 설정을 위해 tsconfig 경로 설정을 추가하였다.

---

## Dynamic Routes

next는 규칙에 따라 pages 폴더에 파일을 생성하면 파일명에 맞게 라우팅을 해준다. 블로그의 경우 인덱스, 파일명 등의 정보가 url에 나타나야하기 때문에 dynamic routes가 필요하다.

![dynamic routes image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbZ2vOU%2FbtrVk5eeZ16%2FnTkRpOAWuU5gXCYq0eKQ5K%2Fimg.png)

posts/\[slug\] 형태를 가지고자 하기 때문에 pages/posts 폴더안에 \[slug\].tsx 파일을 만들어 블로그 글 페이지를 만든다. getStaticProps로 글의 내용을 가져오고(\[slug\].md 파일을 통해) 페이지는 getStaticProps가 리턴한 값을 props로 가지게 된다. getStaticPath로 이동 가능한 경로들을 정의하여 dynamic routing이 가능하도록 한다.

```tsx
export async function getStaticProps({ params }: Params) {
  const post = getPostBySlug(params.slug);

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

export async function getStaticPaths() {
  const posts = getAllPosts();

  return {
    paths: posts.map((post) => {
      return {
        params: {
          slug: post.slug,
        },
      };
    }),
    fallback: false,
  };
}
```

---

## 글 내용 보여주기

markdown을 사용하기 때문에 이를 HTML로 변환해서 코드로 넘겨주어야한다. remark를 통해 markdown을 HTML로 변환하고, 이를 rehype로 처리할 수 있다. 이렇게 HTML로 변환한 코드는 일반 HTML이기 때문에 리액트에게 넘겨서 넣어줄 때 dangerouslySetInnerHTML로 넣어준다. innerHTML을 해주기 싫어서 찾다보니 [react-markdown](https://github.com/remarkjs/react-markdown)이라는 패키지가 있어서 이를 사용해 글 내용을 보여주었다 (react-markdown을 사용하면 DOM을 다시 그리지 않고 변경된 부분만 바꿔준다).

코드 하이라이팅을 위한 rehype-highlight와 수식을 처리하기 위한 remark-math, rehype-katex 플러그인을 추가해주었다.

```tsx
const Post = ({ post }: PostProps) => {
  return (
    <article className="prose lg:prose-xl">
      <PostHeader title={post.title} date={post.date} />
      <ReactMarkdown
        remarkPlugins={[remarkMath]}
        rehypePlugins={[rehypeHighlight, rehypeKatex]}
      >
        {post.content}
      </ReactMarkdown>
    </article>
  );
};
```

스타일링을 직접 할 수도 있겠지만 tailwind에서 제공하는 [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin) 플러그인을 사용하였다.

---

## SEO 향상하기

next의 head를 사용해서도 쉽게 SEO를 향상시킬 수 있지만 조금 더 편하게 구현하기 위해 [next-seo](https://github.com/garmeeh/next-seo)를 사용했다. 페이지별 seo를 위해서 PageSEO 컴포넌트를 만들어 넣어주었다. favicon같은 기본 default 값을 위해서는 next-seo의 DefaultSeo를 사용하였다.

```tsx
import { NextSeo } from "next-seo";
import SEO from "seo.config";

interface PageSEOProps {
  title: string;
  description: string;
  slug: string;
}

const PageSEO = ({ title, description, slug }: PageSEOProps) => {
  return (
    <NextSeo
      title={title}
      description={description}
      canonical={`${SEO.url}/${slug}`}
      openGraph={{
        url: `${SEO.url}/${slug}`,
        title,
        description,
      }}
    />
  );
};

export default PageSEO;
```

![og image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcdWcYi%2FbtrVqgG12m5%2F75mydwsbG9syc1Q6v4r6V0%2Fimg.png)

og를 통해 카카오톡 미리보기까지 이쁘게 변경된 것을 확인할 수 있다. 차후에 글이 더 많아지면 sitemap도 추가해볼 예정이다.

---

## 테마 설정하기

![light mode](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbQx3Df%2FbtrVqIQU52R%2F5mF56bvB9hK4kSxZOTNTjK%2Fimg.png)
![dark mode](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FebYlLM%2FbtrVtG56Mwu%2FR38UkgpKcsML4Cf4RX7uA0%2Fimg.png)

라이트모드, 다크모드를 만들어보았다. tailwind에서 제안한대로 [dark 클래스를 추가](https://tailwindcss.com/docs/dark-mode)해서 다크모드를 쉽게 구현할 수 있다.

새로고침 시에도 사용자가 정한 모드가 유지될 수 있도록 선택된 모드를 localstorage에 저장하였다. 초기 상태를 localstorage에서 가져오고자 했는데 server rendering이 먼저 일어나기 때문에 브라우저 환경이 아니라 localstorage를 찾을 수 없었다. 페이지가 클라이언트에 로딩된 이후에 접근할 수 있도록 useEffect로 저장된 값을 가져오도록 하였다. 만약 localstorage에 저장된 값이 없다면, 사용자의 브라우저에서 선호되는 모드를 가져와 이를 초기 값으로 사용하도록 하였다.

```tsx
const { themeMode, changeThemeToDark, changeThemeToLight } = useTheme();

const handleThemeToggle: React.MouseEventHandler = () => {
  if (themeMode === THEME.LIGHT) {
    changeThemeToDark();
  } else {
    changeThemeToLight();
  }
};

useEffect(() => {
  const mode =
    localStorage.getItem(THEME_KEY) ??
    (window.matchMedia("(prefers-color-scheme:dark)").matches
      ? THEME.DARK
      : THEME.LIGHT);
  if (mode === THEME.DARK) {
    changeThemeToDark();
  } else {
    changeThemeToLight();
  }
}, []);
```

typography를 통해 스타일링한 post부분은 [tailwind.config](https://github.com/prefer2/prefer2.dev/blob/main/tailwind.config.js)에 다크모드 관련 설정을 추가해주었다.

블로그가 워낙 여러개라 새로운 블로그는 어떤 용도로 사용할지는 모르겠다. 앞으로 tag별로 모아보기, 페이지네이션, 스크롤 위치 보여주기 기능, 검색 등을 추가하고 싶다.

### GitHub 코드 확인하기

[https://github.com/prefer2/prefer2.dev](https://github.com/prefer2/prefer2.dev)


내 입맛에 맞는 나만의 블로그 만들기 대작전

Tags - blog (3)

블로그 발전기 - 2편

블로그 발전기 - 1편

Next.js로 나만의 블로그 만들기