블로그 개발기 1 (기획 편)

나는 현재 세일즈포스 개발자로서 일하고 있다.
그런데 왜 굳이 이런 개발 블로그를 직접 제작하려고 하는지 이해가 안 갈 수 있다.
뭐, 특별한 건 없다. 개발 시작을 프론트엔드로 해서 난 프론트엔드 개발자를 꿈꿨지만 세일즈포스 개발자가 되었고, 그 꿈을 포기 못해 이렇게 노력해보는 것뿐이다. 안 되면 그냥 재밌게 개발하고 개인 기록용으로 사용하고 말지 뭐.
거의 개인 일기 형식으로 작성할 거기 때문에 글이 난잡해도 이해해주길 바란다.

그래서 뭘 하고 싶길래 이런 블로그를 만드느냐?
목표는 프론트엔드 개발자!

프론트엔드 경력은 일천하지만 지금부터라도 노력하고 이것저것 하다보면 몇 년 뒤에는 갈 수 있겠지.

그럼 이제 거두절미하고 블로그를 만들어보자.

---

환경 구축

개인적으로 오랜만에 만드는 Next.js 프로젝트에서 한 번도 써보지 않은 Contentlayer를 적용하는 것에서 많은 문제를 겪어서 환경을 구축하는 데만 오랜 시간이 걸렸다.
오랫동안 프론트엔드에 손을 놨던 나에 대한 업보라 생각한다…

“열심히 하자..”

기술 스택 선정

본격적으로 설치하기 전에 토스의 프론트엔드 개발자들이 사용하는 기술들에 대해서 조사해 보았다.
채용 공고 및 토스 프론트엔드 챕터의 모든 것이라는 페이지에 작성되어 있는 내용을 토대로 생각보다 쉽게 자세히 알 수 있었다.
프론트엔드 챕터의 면접관들이 알려주는 지원 꿀팁도 자세히 작성되어 있으니 나중에 참고하자.

토스가 사용하는 기술

• 코어: React, TypeScript, Next.js
• 상태 관리: React-Query, Recoil
• 스타일링: Emotion
• 패키지 매니저: Yarn Berry, PNPM
• 빌드: Webpack, ESBuild, SWC, Babel
• CI/CD: GitHub Actions, CircleCI

기술이 참 많다…
내가 그나마 사용해본 기술은 React, Typescript, Next.js 정도였다.
뭐 이제라도 해보자 싶어서 이번에 개인 블로그를 만들겸 Next.js 블로그를 만들기로 결심했다.
조사해보면 매우 비효율적이라고 하는 말이 많지만 공부할 겸 열심히 해보자고 생각했다.

“누가 뭐라 해도 굴하지 않아”

내가 선택한 기술 스택

• 코어: React, TypeScript, Next.js
• 상태 관리: React-Query
• 스타일링: Emotion
• 콘텐츠 관리: MDX, Contentlayer
• 패키지 매니저: Yarn Berry
• 빌드: SWC, ESBuild, Webpack
• CI/CD: Vercel

정리하고 보니 뭔가 많다고 느껴지지만, 생각보다 별건 없다.
Next.js를 사용하면서 자연스레 React와 Typescript를 사용하게 되고,
상태 관리는 현재는 아직 필요 없으니 설치조차 하지 않았다.

CSS는 토스에서 사용하는 Emotion 라이브러리를 통해 스타일링 하기로 결정했다.

블로그의 콘텐츠 관리를 위해서는 MDX를 활용한 Contentlayer를 사용하는 게 작성하기에도 편하고 type을 안전하게 사용할 수 있어 Typescript와의 호환도 좋아 선택했다.

패키지 매니저는 Yarn Berry, 빌드는 Next.js의 기본인 SWC, Contentlayer가 사용하는 ESBuild, fallback용 Webpack을 그대로 사용했다.
배포는 일단은 Vercel로, 나중에 CI/CD 학습 후 GitHub Actions로 전환할 계획이다.

---

Contentlayer를 활용한 콘텐츠 관리

Next.js 프로젝트를 만드는 건 자주 해봤고 쉬우니 금방이었다.
하지만 문제는 Contentlayer의 설치와 사용이었다.

문제를 전부 해결하여 성공적으로 동작하게 하고 나서 정리해보니
크게 3가지 범주로 나눌 수 있었다.

1. 설정 및 초기 구성 문제

• config 파일 인식 불가
  contentlayer.config.ts를 루트에 두었지만 감지되지 않았다.
  → yarn contentlayer build 명령으로 수동 빌드하여 해결

• .mdx 파일 감지 실패
  contentDirPath와 실제 파일 경로가 불일치 (src/content)
  → 설정을 정확히 맞춰서 해결

2. MDX/YAML 파싱 및 타입 오류

• YAML 문법 오류
  tags: ["tag"] → tags:\n - tag로 수정 (YAML 문법 준수)

• 필드 누락 오류
  .mdx 파일의 tags 필드를 스키마에 정의하지 않아 발생
  → contentlayer.config.ts에 필드 추가하여 해결

• Windows 줄바꿈 오류 (\r\n)
  → .mdx 파일의 줄바꿈을 LF로 변경하여 해결

3. Next.js 연동 및 런타임 문제

• params.slug 오류
  App Router 기반에서 params는 async context로 동작
  → await props.params 사용
  → type Props = { params: Promise<{ slug: string }> } 로 정의

• useMDXComponent() 오류
  해당 훅은 클라이언트 컴포넌트에서만 사용 가능
  → MDXRenderer를 'use client' 선언된 컴포넌트로 분리하여 해결

---

적어보니 참 별거 아닌 문제들이지만,
이걸 해결하는 데에만 장장 3시간이나 소요되었다…

아무튼 이것으로 기본적인 환경 구축은 완료되었다.
다음은 '디자인 편'으로 돌아오도록 하겠다.

어차피 아무도 안보고 필요도 없겠지만..