블로그에 사용된 스택과 라이브러리

Stacks and Libraries used in blog

블로그를 구성하는 데에 쓰인 기술 스택과 라이브러리들을 소개하고, 각각의 역할과 사용 이유를 설명해보고자 한다.

Next.js↗ 가장 기본이 되는 프레임워크로 Next.js를 선택했다. Next.js는 를 기반으로 한 프레임워크로, (Server Side Rendering)을 지원한다. SSR은 (Search Engine Optimization)에 유리하며, 필요한 곳에서 적절히 사용하면 좋은 성능을 낼 수 있다. 또한 백엔드 서버를 따로 구축하지 않아도 DB 접근이 가능한 장점이 있다.

TypeScript↗ 이 프로젝트는 TypeScript로 작성되었다. TypeScript는 의 확장된 언어로, 정적 타입을 지원한다. 타입스크립트를 사용하면 코드의 가독성을 높일 수 있고, 런타임 에러를 줄일 수 있다.

Tailwind CSS↗ Tailwind CSS는 프레임워크로, 클래스를 이용해 스타일을 적용한다. 기존 React에서 사용하던 Css-in-JS 방식은 SSR에서 완벽하게 동작하지 않는다. Css-in-JS 방식은 클라이언트 런타임에 스타일을 적용하기 때문에, SSR에서는 스타일이 적용되지 않는다. nextjs css-in-js docs↗

이 방식을 사용하려면 다른 추가적인 설정이 필요하다. 하지만 는 클래스를 이용해 스타일을 적용하기 때문에 SSR에서도 완벽하게 동작한다. 초기 설정과 사용 방식이 낮설지만 익히게 된다면 개발 속도도 빨라질 것이라 생각한다.

Shadcn/UI↗ Taliwind css 기반의 Headless UI 라이브러리로, 커스터마이징이 용이하다. 따로 디자인을 하지 않아도 기본적인 기능이 구현되어 있어 개발 속도를 높일 수 있다.

next-mdx-remote↗ 이 블로그의 포스팅은 마크다운 문법으로 작성되었다. 추가적으로 마크다운 문법과 jsx 문법을 혼합해서 사용할 수 있는 파일을 사용한다. 이를 사용하기 위해 라이브러리를 사용했다. 이 라이브러리 외에도 mdx 파일 컴파일을 위해서는 대안이 몇가지 존재한다. velite, contentlayer, next/mdx 등이 있다. 하지만 아직 안정화되지 않았거나, 지원이 중단되는 등의 이유로 next-mdx-remote를 선택했다. 공식 문서에도 next-mdx-remote를 사용한 예시가 나와 있는 등 자료도 꽤 많이 존재하기 때문에 이 라이브러리를 사용하기로 하였다. Next.js 공식문서(next-mdx-remote)↗

gray-matter↗ 마크다운 파일의 frontmatter를 추출하기 위해 사용한다. frontmatter는 마크다운 파일의 맨 위에 위치하며, 메타데이터를 담고 있다. 개발 초기 mdx 파일 자체에 제목과 작성일 등 메타데이터를 넣어두고, 이를 추출해서 사용했지만 현재는 테스트용으로만 사용 중이다.

rehype↗ rehype는 HTML을 파싱하고, 변환하는 라이브러리이다. MDX로 작성된 파일을 next-mdx-remote를 통해 HTML로 변환하고, 이를 rehype를 통해 파싱하고 변환하는 곳에 사용한다. 주로 스타일링이나 커스터마이징을 위해 사용한다. 예를 들어 제목 태그에 하거나, 시켜 주는 등의 역할을 한다. 특히 라이브러리를 사용하면 수식을 렌더링할 수 있다.

Prisma↗ API 엔드포인트를 만들기 위해 DB 접근에 사용한 라이브러리이다. Prisma는 ORM(Object-Relational Mapping) 라이브러리로, SQL을 사용하지 않고도 DB에 접근할 수 있다. 필자는 Supabase의 PostrgreSQL을 사용했는데, Prisma는 PostgreSQL을 주력으로 지원한다. 또한 TypeScript를 지원하며, 코드 자동완성이나 타입 체크 등의 장점이 있다.

이 스택과 라이브러리들은 현시점에서 가장 최선의 선택을 했다고 생각한 것이다. 하지만 라이브러리나 기술은 빠르게 변화하고 발전하기 때문에, 앞으로도 새로운 기술이나 라이브러리를 적용해볼 생각이다. 언젠가 있을 을 위해 라이브러리의 의존도를 최대한 줄이고, 개발 중 라이브러리의 역할을 명확히 하려고 노력했다.