Next.js Git Blog 자동 배포: GitHub Actions CI/CD
글 작성이나 블로그 업데이트 횟수가 많지 않아 그냥 넘어가고 있었지만, Git Blog를 배포하는 과정에서 repository에 push하는 작업과 배포가 완전히 분리되어 있어 두 부분을 계속해서 신경 쓰며 관리하는 것이 너무 번거로웠다. GitHub에 CI/CD 기능이 있는 것은…
- blog
Next.js Git Blog (8): 국제화(2) - 본문 매칭과 언어 토글
이전 글에서는 pages/[lang]/...으로 프로젝트 구조를 개편하고, 동적 경로를 통해 언어별로 라우팅하는 작업을 진행했다. 그래서 현재는 주소창의 URL만 바뀔 뿐, 실제 내용은 언어에 맞춰 변하지 않는 상태다. 이번 포스팅에서는 현재 접속한 경로(lang)에 맞춰 적절한…
- blog
Next.js Git Blog (7): 국제화(1) - 프로젝트 구조 설계 및 라우팅
아무래도 개발의 영역은 한 국가에 국한되지 않고 세계적으로 통용되다 보니, 국제화 기능을 넣으면 좋을 것 같기는 한데... 으음 이 부분이 정말 고민이 많이 됐다. 실제로 나 역시 영어로 된 문서도 많이 참고하고 있으니, 내가 공유하는 내용도 언어에 국한되지 않았으면 하는 바람은…
- blog
Next.js Git Blog (6): MDX 플러그인(rehype-pretty-code, shiki)
앞서 MDX을 도입하면서 컴포넌트를 통한 확장성을 확보해보았다. 이를 적용하는 과정에서 추가로 확인한 내용이 있는데, MDX는 다양한 플러그인을 활용하여 마크다운의 본문을 더 다채롭게 꾸밀 수 있게 해준다고 한다. 이번 글에서는 코드 하이라이팅을 위한 rehype 라이브러리를…
Next.js Git Blog (5): MDX 도입과 데이터 독립성에 대한 고찰
현재 이 블로그는 마크다운 파일을 불러와 해석하고 렌더링하는 방식을 취하고 있다. 그래서 본문은 마크다운이 약속한 표준 태그들로만 구성되어 있다. 그러던 중 MDX(Markdown + JSX) 라는 재밌는 개념을 접했다. 마크다운 본문 중간에 React 컴포넌트를 직접 삽입하여 글을…
- blog
Next.js Git Blog (4): 폰트 설정 및 최적화
보기 좋은 떡이 먹기도 좋다고, 블로그 인상에 폰트가 주는 영향은 상당히 크다고 생각된다. 이번 포스팅에서는 Next.js 환경에서 폰트를 불러오는 두 가지 방식(Google Fonts, Local Fonts)을 살펴보고자 한다. 사용할 폰트 조합: 코드 영역: Fira Code 본문…