블로그를 운영한지도 어언 4달째네요.. 최초 버전과 비교하여 생각해보면 상당히 많은 것이 변했습니다.
단편적으로만 생각해봐도 외관도 많이 변했고, 기능도 많이 추가되었습니다! Vercel에서 첫버전 보면 진짜 눈물이 앞을 가리네요..

예전에 비해서 많이 바뀌었음에도 아직 서치콘솔 작업도 덜 되어있고, TOC도 조금 더 수정해야하고, 애니메이션도 추가를 더 하는 등의 작업이 많이 남았네요.
오랜만에 올라가는 이 블로그 제작기를 시작으로, 블로그 제작기는 패치노트 형식의 포스팅들이 될 것 같습니다!

당시 최신버전이던 next13으로 블로그를 만들었는데, 그 짧은사이에 next14가 정식 출시되었습니다. 다행히도 next13에서 대대적인 변경점이 있었기 때문인지, 13과의 차이는 많이 없더라구요!
어차피 next13으로 만들면서 그 당시에는 테스트중이었던 app-router로 페이지를 제작했기때문에 page-router가 뱉는 오류들은 저와는 관련이 없었다는게 제일 다행입니다.

14로 업데이트하면서 next에서 turbopack을 사용할 수 있게 되었다는데 Carousel 라이브러리 문제때문인지 오류를 뱉으며 --turbo 키워드가 동작하지 않았습니다.
마침 Carousel을 한번 직접 만들어보려고 하기도 했었고, 해당 과정을 우선순위에 놓아 Carousel 직접 제작 후에 다시 turbo를 사용해보려고 합니다.

여튼 Next 13 -> 14는 큰 문제 없이 마이그레이션 완료했습니다!

기존에 사용하던 Rehype-highlight 는 코드 하이라이팅까지는 괜찮았는데, 그 이외의 기능이 좀 아쉬웠습니다.
Md에서 MDX 구조로 변환하면서 가장 적용을 시키고 싶었던 코드 하이라이터는 Rehype-prism-plus 라는 라이브러리였는데..
어째선지 적용이 잘 되지 않아서 그나마 적용되던 Rehype-highlight를 사용하고있었습니다.

그러다가 이번에 블로그를 대대적으로 고치며 미봉책으로 두었던 코드 하이라이터를 열심히 고쳐봤습니다!
다행히도 블로그 만드신분들이 많아서 관련 소스를 보고 고칠 수 있었습니다.

단순히 rehypePrismPlus 를 rehypePlugins 에 넣어주는게 아닌, ignoreMissing 설정까지 추가해줘야 정상적으로 적용이 되더라구요.
해당 라이브러리를 사용하시는데 스타일링이 적용이 되지 않으신다면 해당 설정을 반드시 설정해주시길 바랍니다.

export default makeSource({
  contentDirPath: 'public/blog',
  documentTypes: [Post],
  mdx: {
    remarkPlugins: [remarkGfm, remarkBreaks],
    rehypePlugins: [
      rehypeSlug,
      rehypeCodeTitles,
      [rehypePrismPlus, { ignoreMissing: 'true' }],
      [
        rehypeAutolinkHeadings,
        {
          properties: {
            className: ['anchor'],
            ariaLabel: 'anchor',
          },
        },
      ],
      [rehypeExternalLinks, { target: '_blank', rel: ['noopener noreffer'] }],
    ],
  },
})

이번에 프로젝트를 뒤집어 엎으면서 코드 또한 더 깔끔하게 바꾸고자 했습니다.
기존에도 eslint를 통해 코드 스타일을 유지하고있었는데, 여러 자료들을 찾아보니 괜찮은 스타일이 있어서 해당 스타일로 변경하였습니다,

적용된 스타일은 다음의 4가지입니다.

1. next/core-web-vitals
2. airbnb
3. airbnb-typescript
4. prettier

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": ["error", { "endOfLine": "auto" }],
    "@typescript-eslint/explicit-function-return-type": "off",
    "react/react-in-jsx-scope": "off"
  }
}

이중에서 airbnb-typescript 관련 설정을 해주기 위해서는 @typescript-eslint/eslint-plugin , 그리고 @typescript-eslint/parser 를 설치해주셔야합니다.

해당 스타일을 적용하며 배열의 index를 컴포넌트의 key로 사용하는 부분들도 수정해주었고, img 태그 대신 next에서 제공하는 Image 태그를 사용하는 등의 리팩토링을 거쳤습니다.
또, Image 태그에서는 alt 속성을 더욱 의미있게 사용하는 등의 리팩토링 과정도 수행했습니다!

코드블럭의 내용이 길면 모바일에서 전체 화면에 대한 x축 스크롤이 지속적으로 생겨나던 문제가 있었습니다.
원하던건 코드 블럭에만 x축 스크롤바가 생기는거였는데, 다른 로직들을 바꿨는데도 지속적으로 나타났었습니다.

하지만 해결법은 간단했는데, 그냥 부모 요소에 overflow-hidden 속성을 추가하면 되는거였습니다..
문제를 너무 어렵게 생각하고있었나봐요 ㅎㅎ..ㅋㅋㅋ

이 외에도 모바일에서 최근 포스트를 보여주는 card 컴포넌트가 가독성이 좋지 않다고 판단되어서 22 사이즈로 배열하는 것 대신에 14로 배열하도록 했습니다.
확실히 이렇게 배치를 바꾸니까 오히려 card가 더 가독성 좋게 읽히는 것 같아서 만족스럽네요!

지금 공방/배움 탭을 별도의 페이지로 만들어 작업하고있습니다. 해당 프로젝트에서는 이번에 yarn-berry 세팅이 완료되어, 본 프로젝트에도 적용시키고자 했습니다.
그러나 블로그 프로젝트는 생각보다 볼륨이 있기도 해서.. 패기롭게 잘 되는줄알고 main에다가 상남자답게 작업하다 잘 되던것들도 동작하지 않게 되어 피말리는 경험을 했습니다.
어찌어찌 yarn classic으로 다시 돌려놓긴 했는데, 그렇다고 yarn-berry를 포기할 생각은 없습니다.

브랜치 하나 만들어서 열심히 마이그레이션 진행을 해 볼 생각이고, 겸사겸사 yarn-berry를 왜 사용하는지 / 장점이 무엇인지 등에 대해서도 포스팅해보려고 합니다.

현재 계획중인 사안이며, 목표는 포스팅 페이지 상단에 존재하는 목차 섹션을 더 스타일링 하는 것 입니다. 아예 사이드로 해당 항목을 빼버릴지도 고민중입니다.

오랜만에 블로그 제작기를 올리는데, 작업은 엄청 많이 한거같아도 정작 쓸게 그리 많지는 않네요.. ㅎㅎ 물론 제가 까먹은 것도 좀 있겠지만..
이 포스팅을 얼마나 볼지는 모르겠지만 제가 헤딩한 경험들이 포스팅을 보시는분들께 큰 도움이 되었으면 좋겠네요!

블로그가 업데이트되면 또 다시 찾아뵙겠습니다 :)