목표

이번에 리펙토링을 계획하게 된 이유들 입니다.

게시글을 tsx파일로 관리하고 있어 관리가 힘들고 글을 작성할 때 접근성이 떨어짐
블로그 SEO 개선 필요

이런 문제를 해결하기 위해 어떤 방법을 사용하면 좋을까 생각하다 Next.js의 app라우터를 이용해 관리하기 쉬운 폴더구조를 만들고 서버사이드 렌더링을 이용해 SEO를 개선하면 되겠다라는 생각이 들어 기존 React기반의 블로그에서 Next.js로 마이그레이션을 진행했습니다.

프로젝트 구조, 개선 사항

모든 게시글은 content 폴더 내부에 .md파일을 생성해 작성 합니다.

/public
|-- /fonts
|-- /img
|   |-- file.svg
|   |-- globe.svg
|   |-- next.svg
|   |-- vercel.svg
|   |-- window.svg
|   `-- x.svg
|
/src
|-- /app 
|-- /components
|-- /content             # 게시글 폴더
|   |-- /backEnd
|   |-- /cs
|   |-- /css
|   |-- /etc
|   |-- /frontEnd
|   |-- /html
|   |-- /javascript
|   |-- /network
|   |-- /next
|   |-- /node
|   |-- /react
|   |-- /server  
|   `-- /typescript
|
/lib

기존 React기반의 블로그에 작성한 글들은 tsx파일로 관리되고 있어 .md파일로 변환하는 작업이 필요 했는데 해당 작업에 대한 정보는 여기에서 확인하실 수 있습니다.

Next.js의 서버 컴포넌트 클라이언트 컴포넌트 덕분에 클라이언트 로직과 서버의 로직을 분리할 수 있었고 서버에서 fs 모듈을 이용해 폴더 내부에 있는 파일을 읽어서 remark라이브러리를 이용해 HTML로 변환해 제공합니다.

generateStaticParams를 이용해 모든 게시글을 정적으로 빌드해 사용자에게 제공하고 있습니다.

또한 기존의 게시글을 관리할 때 게시글 검색 기능이나 카테고리 정렬, 페이지네이션과 같은 기능이 뒤로 가기를 눌렀을 때 초기상태로 돌아간다는 문제가 있었지만 쿼리 스트링을 이용해 이런 문제를 해결했습니다.

spde3289.dev 도메인을 구매해 Vercel을 이용해 배포했습니다.

마치며

이번에 블로그를 리펙토링하면서 느낀 점은 개발하는 방식이 많이 변했습니다.
이전에만 해도 번역된 글이나 사람들이 이미 사용것을 기록한 개발 블로그들을 보며 새로운 기술이나 기능들을 보며 따라했다면 지금은 공식 문서룰 우선 살펴보게 되었습니다.
항상 그런 것은 아니지만 공식 문서만큼 정확도도 높고 정리가 잘 되어있는 곳이 없다는 걸 알게 되었습니다.

무작정 개발하는 사람이 아니라 동작하는 원리, 적절한 용도를 알고 응용할 수 있는 좋은 개발자가 되고 싶습니다.

지금 당장 어렵더라도 차근차근 하나씩 익혀가다 보면 언젠가는 훌륭한 개발자가 될 수 있으리라 믿으며 노력하겠습니다!

2025년 블로그 리펙토링 회고록