블로그를 시작하며

개발 블로그를 구현하게 된 계기

개발 공부를 시작하면서, 기록이 굉장히 중요하다는 것을 느끼게 됩니다. 새로운 기술을 배우거나 번득이는 생각으로 문제를 해결해도, 결국 기록해 두지 않으면 다시 잊어버리기 때문입니다. 저도 그런 경험들을 반복하면서 자연스럽게 "기록을 더 잘해두었더라면..."이라는 생각을 갖게 되었습니다. 그리고 그것을 계기로 블로그를 시작하고자 다짐하게 되었습니다.

많은 개발자분들께서 다양한 블로그를 사용해 글을 작성하고 계십니다. 누군가는 공부한 내용을, 누군가는 문제해결에 대한 경험을, 누군가는 개발에 대한 본인의 철학을 글에 담아냅니다. 저는 개발을 공부하면서 다른 분들의 이러한 글들을 읽으며 문제를 해결하거나, 개발에 임하는 자세에 대해 간접적으로나마 많이 배울 수 있었습니다. 그래서 저 또한 이 블로그를 통해 개발을 하면서 겪은 저의 생각, 고민, 경험들을 최대한 쉽게 글로 담아내어 누군가에게 도움이 되도록 공유하고 싶습니다.

Velog, Tistory, Medium 등 세상에는 다양한 블로그 플랫폼들이 존재합니다. 이러한 플랫폼들은 개발자들에게 다른 것들을 고민하지 않고 오로지 글쓰기에만 집중할 수 있도록 많은 기능을 제공하고 있습니다. 저 역시도 블로그 플랫폼을 이용했더라면 이러한 글을 여러분에게 좀 더 일찍 전달했으리라고 생각합니다.

그럼에도 제가 블로그를 직접 구현한 이유는 플랫폼 위에서는 드러나기 어려운 저만의 개발 철학과 UI/UX에 대한 고민을 녹여내고 싶었기 때문입니다. 그리고 무엇보다 나에게 필요한 '나만의 서비스'를 스스로 만들고 운영해보고 싶다는 바람이 가장 컸기에 비로소 이 블로그를 구현하게 되었습니다.

기술스택

pnpm

pnpm은 npm과 달리 모든 패키지를 프로젝트마다 중복 저장하지 않고, .pnpm-store라는 전역 저장소 디렉토리에 한 번만 설치합니다. 그리고 하드 링크로 연결 방식을 통해 node_modules안에는 해당 저장소의 패키지들을 복사하지 않고도 사용할 수 있습니다. 그렇기에 효율적으로 디스크 공간을 사용함과 패키지를 빠르게 설치라는 이점을 가지고 있기 때문에 pnpm을 사용하게 되었습니다.

TypeScript

처음에는 TypeScript를 사용할 때에는 타입을 지정해주는 거에 번거로움을 느꼈지만, 사용할수록 TypeScript가 JavaScript의 자유로움을 어느정도 통제해줌으로서 개발 효율성 측면에서 장기적인 이점을 가져간다고 생각합니다.

또한 VSCode와 같은 IDE에서 TypeScript의 인텔리센스 기능을 제공하기에 불필요한 타입 선언 없이 안정성과 생산성을 동시에 확보할 수 있으며, 가독성도 높아집니다.

결과적으로 TypeScript는 코드의 품질과 예측 가능성을 높이는 동시에, 개발자의 생산성과 장기 유지보수 비용을 줄이는 현대 프론트엔드 개발에 필수적인 언어라고 생각합니다.

Next.js - App Router

Next.js는 React 기반의 프레임워크 중 가장 활발한 커뮤니티를 보유하고 있습니다. 개발 중 마주치는 이슈나 문제에 대해 다양한 자료와 해결 사례를 빠르게 찾을 수 있는 것이 블로그를 지속적으로 개선하고 유지보수하는데 중요하다고 생각합니다.

블로그는 정적인 콘텐츠가 중심이 되는 서비스로, SSG(Static Site Generation)를 통해 미리 페이지를 생성해 두면 성능과 보안 측면에서 이점이 큽니다. Next.js의 App Router는 generateStaticParams등을 통해 정적 페이지 생성을 효율적으로 지원하며, 빌드 시점에 콘텐츠를 빠르게 렌더링해 사용자 경험을 개선할 수 있습니다.

블로그는 검색엔진 유입이 중요하므로 SEO 최적화는 필수라고 생각합니다. Next.js는 SSR과 SSG를 지원하면서도 메타 데이터를 자유롭게 설정할 수 있어 SEO에 최적화된 구조를 갖출 수 있습니다.

MDX

MDX는 JSX를 함께 사용할 수 있도록 확장된 마크다운 문법으로, 마크다운의 간결함으로 컴포넌트 등을 자연스럽게 삽입할 수 있습니다.

Next.js는 공식적으로 @next/mdx 통해 MDX를 지원하고 있으며, App Router의 파일 기반 라우팅 시스템과 함께 .mdx 파일을 직접 페이지로 사용하거나, 동적으로 import하여 렌더링하는 방식도 구현할 수 있어 유연한 콘텐츠 구조가 가능합니다.

또한 Tailwind의 @tailwindcss/typography 플러그인과도 호환되어 블로그 콘텐츠의 디자인을 통일감 있게 관리할 수 있습니다.

TailwindCSS

TailwindCSS는 유틸리티-퍼스트 접근 방식을 기반으로, 클래스명을 통해 HTML에 직접 스타일을 적용하는 방식입니다. 처음 사용할 때는 다소 낯설 수 있지만, 익숙해지면 컴포넌트의 CSS 파일을 따로 열지 않고도 하나의 파일 안에서 마크업과 스타일을 함께 구성할 수 있어 편리하다고 생각합니다.

shadcn/ui

이전에 Mantine UI라는 UI 라이브러리를 사용해본 경험이 있습니다. 그 당시에는 컴포넌트의 디자인과 레이아웃에 대한 고민없이 라이브러리에서 제공하는 디자인을 사용한다는 점이 마음에 들었습니다. 하지만 라이브러리에서 제공하는 ui를 프로젝트 컨셉에 맞게 커스텀하기 쉽지 않았었습니다. 게다가 나중에 살펴보니 tailwind의 prefilght와의 호환성이 충돌해, 스타일이 제대로 적용되지 않는 이슈도 있었습니다.

shadcn/ui는 Tailwind를 기반으로 동작하면서도, Radix UI를 통한 ui의 최소한의 동작만을 제공하여 사용자가 프로젝트에 맞는 디자인을 커스터마이징하기 쉽다는 점이 맘에 들었습니다.

vercel

Vercel은 Next.js의 제작사에서 운영하는 배포 플랫폼으로, 특히 Next.js 프로젝트와의 통합성 및 성능 최적화 측면에서 매우 뛰어난 이점을 제공합니다.

또한 Github와 연동되어 git 기반 배포를 통해 커밋 메시지 하나로도 릴리즈가 추적 가능하고, 실패한 빌드나 배포의 로그를 즉시 확인할 수 있어 문제 해결 또한 빠릅니다. 이는 수월하게 블로그를 지속적으로 업데이트하고 기능을 확장할수 있다는 매우 큰 이점이 됩니다.

글을 마치며

위의 글에서 거창한 이유들을 설명드렸지만 아직 이 블로그는 부족한 점이 많다고 생각합니다. 그렇기에 더욱 더 책임감을 가지고 그에 걸맞는 블로그와 개발자가 되도록 하겠습니다.

서툰 글을 읽어주신 여러분께 감사드립니다.