Feat: articles -> posts로 바꾸고 첫 블로그 포스팅

Author: gitgitWi

pages/posts/from-jekyll-to-nextjs-mdx/00.mdx

@@ -0,0 +1,83 @@
+import { TitleTexts } from "../../../components/molecules";
+
+## GitHub Pages, `Jekyll` 기반에서 `Next.js` + `MDX`로
+
+<TitleTexts titleText="(00) 잘 쓰고 있던 걸 굳이 바꾸는 이유" />
+
+<br />
+
+### intro.
+
+작년 2월, 본격 개발에 입문한 지 만 2개월 정도 되어서 `GitHub Pages`라는 걸로 블로그를 만들 수 있다는 걸 알게 되었다.
+
+뭣도 모르고 유튜브 따라, 블로그 따라 헤매면서 어찌어찌 `Jekyll` 기반 블로그를 만들게 되었고..
+처음 한두달은 "이런 게 개발자 블로그지!"라며 교육 받은 거, 멘토링 행사 참여한 거, 생애 첫 코딩 테스트 후기 등등 신나게 올렸다.
+
+<br />
+
+### 문제는
+
+- `Ruby` 기반이어서 레퍼런스를 찾기도 어렵고,
+- 그래서 뭔가 커스텀을 하고 싶어도 하기 어려워지고,
+- 무엇보다 포스팅이 많아질수록 **_컴파일하는 시간이 크게 늘어난다_**
+  - 단순히 글만 올리는게 아니라, 태그별 검색도 넣고, 페이지네이션도 들어가는데,
+  - 이걸 전부 `html`로 만들어버리기 때문에 불필요한 중복이 너무 많아지는 느낌
+
+그래서 한동안은 그냥 티스토리, velog를 사용하거나, Notion에 정리하거나, _~~아예 안하게 되었..~~_
+
+<br />
+
+### 블로그 못 잃어..
+
+최근까지 거의 강의 수강이나 독서를 하면서 Notion에 정리하고 있었다
+
+아무래도 `Markdown` 문법을 지원하고 거기에 이런저런 임베딩도 편하고 공유도 편한 편이라 쓰게 되는 것 같다
+
+한편으로는 구글링으로 뭔가를 검색할 때 나오는 블로그 글들의 수준이..
+
+나까지 굳이 소음을 더 만들어야 하나하는 생각에 블로그를 잘 안하게 되기도 했다
+
+그런데 최근 텔레그램에서 재테크 네임드들이 블로그 좀 하라고 강력 권장하는 글을 많이 보게 되기도 했고,
+
+무엇보다 사내 블로그 스터디를 하게 되면서 좀더 반강제적인(!) 동기가 생기게 되었다
+
+<br />
+
+### 왜 `Next.js` + `MDX` 인가
+
+`Next.js`를 선택하게 된 데는 특별한 이유는 없었고,
+
+요즘 FE 개발한다면 십중팔구는 `React`를 하고, `React`를 하다보면 `Next.js`를 하게 되는, 대유행(?) 시대이기 때문에, 나도 언젠가 다음 개인 프로젝트는 `Next.js`로 해야겠다는 막연한 생각이 있었다
+
+지금 회사에서는 `Vue.js`를 쓰기 때문에 `Nuxt.js`를 쓸 수도 있긴 하겠지만, `Vue.js` 레퍼런스도 그리 많지 않은데 `Nuxt.js` 관련해선 더 없을 것 같기도 하고, `VSCode`에서 타입추론이나 자동완성이 잘 안되는게 답답한 맛도 있기도 하고, Udemy에 결제해 논 `React`, `Next.js` 강좌도 살살 들어야해서 `Next.js`로 가기로 했다
+
+그렇다면 `Jekyll`에서 했던 것처럼 `Markdown` 으로 글을 작성할 수 있는게 `Next.js`에선 뭐가 있을까 검색해보니, `Markdown` 관련 플러그인을 설치하기도 하고, MDX를 사용하기도 하는 것 같았다.
+
+`MDX`는 `Markdown`에 `React` 컴포넌트를 그냥 `import`로 가져와서 붙여넣기만 하면 되는 식이어서 글 쓰기도 편하고, 컴포넌트로 뭔가 커스텀하기도 좋아보였다. 다만 코드(?)가 너무 변태 같다는 것이 조금 어색하긴 하다..
+
+```mdx
+import Text from "../component/Text.tsx";
+
+## 이건 마크다운 헤더
+
+<Text innerTexts="이건 리액트 컨포넌트" />
+```
+
+<br />
+
+### 마지막으로, 앞으로의 로드맵
+
+할게 많구만..
+
+- [ ] 아름다운 컴포넌트 구현 (⭐️⭐️)
+- [ ] custom code syntax hightlight (⭐️)
+- [ ] GitHub 댓글 컴포넌트 붙이기
+- [ ] 사이트 맵 -> 구글 검색 다시 등록하기
+- [ ] RSS 생성
+- [ ] 다른 사이트 임베딩; 노션 북마크, 임베딩 효과 참고..
+  - [ ] Gist나 Codepen, Stackblitz 등 웹 IDE
+  - [ ] Youtube
+- [ ] post 마다 OpenGraph 태그 생성
+  - [ ] 썸네일 자동 생성기..?
+- [ ] 사이트 내 검색 -> 서버리스 SQL 사용??
+- [ ] 개인 포트폴리오 연동