next.js로 블로그 만들기

next.js, typescript, mdx, tailwind

Aug 04, 2020

next.js

next.js가 새로 업데이트 되면서 static site generation 기능이 추가되었다.

next.js를 봉균이로부터 처음 소개를 받았을 때에는 php와 유사한 라우팅 방식이 왠지모르게 찜찜했다.

한참 SPA로 브라우저 상에서 라우트 변경과 함께 트렌지션이 가능한 UX를 선보이던 시점이여서 그런 것 같다.

회사일을 하면서 SSR과 CSR 사이에서 선택의 고민이 많았다.

CSR로 가볍게 시작하다가 필요할 경우 SSR로 넘어갈 수 있는 솔루션을 찾고 있엇다.

next.js는 SSG 기능 추가와 함께 SSR, CSR, SSG 옵션을 모두 가지는 궁극의 솔루션이 되어 버렸다.

tailwind css

주로 less를 사용했다. scss에 불만이 있었던 것은 아니다.

다만 less의 태생이 js이다 보니 브라우저 상에서도 컴파일이 되는 등의 유연성을 기대했다. 비록 의미있게 사용해 본 적은 없지만 말이다.

그러다가 최근에 여기저기 기술 블로그에 tailwind라는 용어가 제법 눈에 들어 왔다.

Utility first라는데 곰곰히 생각해 보면 less 기반으로 컴포넌트 작업을 할때, preprocessor 단에서의 추상화가 하나 둘 추가하는 경우가 있다.

쉽게는 theme color, 자주쓰는 패턴을 모은 함수 같은 거 말이다.

이런 css 단에서의 추상화는 컴포넌트와는 별개로 관리하는 부담감이 있었다.

그리고 tailwind가 그 해결책이지 않을까 하는 조심스러운 기대를 해본다.

아무튼 html, 정확히는 tsx 파일 내에서 css-in-js 방식말고 utility class name을 조합하는 방식으로 코딩하는게 아직까지는 상쾌한 느낌이다.

블로그

그동안 생각만 해온 블로그를 다시 시작해 본다.

hugo를 좀 써봤지만, FE 개발자로서 표현에 제약을 두고 싶지 않았다.

MDX는 마크다운 내에서 더 다양한 표현을 가능하게 해준다.

아직 markdown style 까지 적용해 보지는 못했지만...

일단 여기까지 만들고 github pages로 올려 본다.

Loading script...