(외국 포스팅 해석) 시간을 절약해서 전문가 수준으로 보이는 Application 을 만들기 위해 많은 개발자들이 Bootstrap 이니 MUI 와 같은 UI 프레임워크를 사용하려고 합니다. 안타깝게도 생각한대로 잘 되지는 않을 것입니다.

Nextjs 나 Gatsby 를 이용하여 React 애서 서버 사이드 렌더링을 구현하는 방법은 편리합니다. 하지만 Rehydration 를 포함한 렌더링 개념을 재대로 이해하지 않고 있다면 해결이 어려운 문제가 나오기 쉽습니다. CSR 베이스인 React 에서 SSR 을 구현할 때 놓치기 쉬운 개념인 Hydration 에 대해 알아보겠습니다.

React router 에서 BrowserRouter 는 클라이언트 사이드 라우팅 특성상 URL 직접입력과 새로고침을 처리하지 못합니다. 하지만 이상하게도 CRA 로 제작하여 Vercel 로 배포한 프로젝트가 정상적으로 처리되는 현상을 발견했습니다. 이 혼란스러운 현상을 분석하며 알게 된 CRA 설정에 대해 정리합니다.

react-markdown 을 사용하여 포스팅 페이지를 만들고, react-syntax-highlighter 를 사용하여 포스팅 내 코드 블록을 간편하게 디자인하는 방법에 대해 정리했습니다.

Nextjs 의 정적 사이트 생성 기능을 이용하면 마크다운으로 작성한 포스팅을 등록한 이후에도 라우팅 추가나 수정없이 수정 배포가 가능합니다. 이 포스팅에서는 마크다운 파일의 메타데이터를 관리해주는 gray-matter 라이브러리를 이용하여 마크다운 기반 정적 사이트의 기반을 만드는 작업에 대해 설명합니다.

욣해부터 시작한 개인 블로그 프로젝트의 목표를 간단하게 소개하고, 이를 위한 Typescript 기반 Nextjs 와 Tailwind 초기 세팅 방법에 대해 기록합니다.