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