저번 포스트에 언급했던 GatsbyJS로 만들었던 개발 블로그를 (보일러플레이트를 그냥 바꾼 거 밖에 없지만) Nextra로 새롭게 단장을 해보았습니다.

Built with...

URL: www.apensiablog.dev

Nextra라는 NextJS의 정적 사이트 빌더를 통해 만들었습니다. 적절할지는 모르겠지만 굳이 비교를 하자면 ReactJS의 정적 사이트 빌더인 GatsbyJS라 할 수 있겠네요. 다만, Nextra의 생태계는 NextJS를 거의 그대로 따라간다고 보시면 됩니다. 즉, Routing 자체도 파일명을 따른 Routing 서비스를 제공합니다. 또한, static generation을 통해 페이지를 빌드 타임에 생성하여 페이지를 미리 정적으로 렌더링(pre-rendering)하여 보여줍니다.

GatsbyJS로 만들었을 때와 같이 Nextra 때도 .mdx 파일을 통해 블로그 글을 작성했습니다. 확실히 굉장히 쉬운 markdown의 문법으로 만들다보니 훨씬 작업이 수월했던 것 같습니다.

ps) 그리고 Vercel은 사랑입니다ㅠㅠ

What has been changed?

1. 다크/라이트 모드 전환 기능

눈뽕 맞는 것을 방지하기 위하여 다크/라이트 모드 전환 기능을 넣었습니다.

2. 다국어(i18n: internationalization) 기능

나만의 기록장이 아닌 모두의 기록장을 위하여 다국어 지원을 넣었습니다.

3. 목차 기능

원하는 섹션의 내용을 바로 볼 수 있도록 목차(Table of Contents) 기능을 넣었습니다.

4. 다이나믹 스크롤 스니펫 기능

스크롤하면서 어떻게 코드가 바뀌어 가는지 쉽게 볼 수 있도록 다이나믹 스크롤 스니펫(?) 기능을 넣었습니다.

What to do next...

1. 예시코드

무작정 따라치는 코드는 제 코드가 아니라고 계속해서 다짐하고 또 다짐합니다. 그래서 "나만의" 코드를 적어갈지 계속해서 고민해 갈 것입니다 (여전히 제 영원한 스승인 구글과 StackOverflow를 참고하겠지만요)

그러한 제 코드 산물을 예시코드 페이지에 "기억"보다는 "기록"해 나가도록 하겠습니다.

2. 프로젝트

시간은 걸리더라도 좀 더 완성도가 있는 개인/팀 프로젝트를 소개하는 깔쌈한(?) README 페이지를 작성해 나가면서 어떤 기술 스택을 썼는지, 그런 기술 스택을 왜 썼는지, 다른 기술 스택과는 어떤 차이점이 있는지, 어떤 부분이 제일 어려웠고 그 이슈를 어떻게 해결할지, 제 문제해결능력을 좀 더 어필할 수 있는 프로젝트 소개글을 하나둘씩 채워넣겠습니다.

노마드코더에 계신 분들에 비하면 전 새발의 피만도 못한 실력이긴 하지만 끈기와 초심을 잃지 않고 계속해서 나가는, 그리고 개발의 길을 처음 걷는 분들께도 조금이나마 도움을 드릴 수 있는 멋진 개발자가 되어보도록 하겠습니다!