개발블로그 제작을 시작하며
개발 블로그 개발 여정
reactnextjs
Mon May 27 2024
이 글은 개발 블로그 개발 여정의 게시글이예요
해당 포스트는 NextJS를 이용하여 개발 블로그를 만들며 작성한 포스트입니다.
기술 블로그의 전체 코드는 🪢 yonglog github 에서 확인 하실 수 있습니다.
- 1 . 개발블로그 제작을 시작하며
- 2 . CI/CD 파이프라인 구성하기
- 3 . tailwind 환경 설정 및 디자인 레퍼런스 찾기
- 4 . / 경로 레이아웃 , 페이지 디자인 생성하기
- 5 . [BUG] Build 시 발생하는 typeError 해결하기
- 6 . MDX를 사용하기 위한 라이브러리들 설치 및 환경 설정
- 7 . Post들이 저장된 FileSystem 파싱하기
- 8 . PageNavigation UI 만들기
- 9 . tag , series Identifier 만들기
- 10 . / 경로 UI 디자인 하기
- 11 . 서버 컴포넌트에 Dynamic Routing 추가하기
- 12 . Post/page.tsx 생성하기
- 13 . 마크다운 파일 코드블록 꾸미기
- 14 . [BUG] Vercel 에 환경 변수 추가하기
- 15 . Loading Suspense 구현하기
- 16 . generateStaticParams 이용해 SSR 에서 SSG로 넘어가자
- 17 . SSG를 이용한 블로그에서 테마 변경하기
- 18 . 인터렉티브한 사이드바 만들기
- 19 . 기술블로그에 giscus를 이용하여 댓글 기능을 추가하기
- 20 . 기술 블로그의 SEO를 최적화 하기 위한 방법 Part1
- 21 . 기술 블로그의 SEO를 최적화 하기 위한 방법 Part2
- 22 . 바닐라 자바스크립트로 깃허브 OAuth 를 구현해보자
- 23 . 라이브러리 없이 깃허브 API를 이용해 댓글창을 구현해보자
- 24 . 리팩토링 : Promise 패턴을 이용하여 비동기 처리중인 전역 객체에 접근하기
- 25 . NextJS로 만든 기술블로그에서 검색 기능 구현하기
사이드 프로젝트 시작 동기
현재 NextJS
를 사용하기 위해 공식 문서를 읽은지 언연 일주일 ,
요즘 나의 공부 형태를 생각해보면 하루 8시간의 시간 동안 코드를 치는 시간이 얼마나 될까 ? 생각해보면 고작 2시간도 채 되지 않는 다는 사실을 깨달았다.
기초부터 튼튼히 해야 한다라는 가치관으로 인해 공식 문서를 열심히 읽고 있지만 체득하지 않는 정보들이 휘발 될 것 같은 불안감은 여전히 존재했다.
예전 React
를 공부하는 동안 공식 문서를 읽은 약 한달 간의 시간보다 , 머리 깨져가며 만든 토이프로젝트 하나가 더 많은 깨달음을 주었던 기억이 나 이번에는 NextJS
를 이용한 사이드 프로젝트를 진행해보려 한다.
사이드 프로젝트로 기술 블로그를 선택한 이유
가장 직관적인 이유는 나한테 필요했기 때문이다.
예전 리액트로 하는 토이 프로젝트는 중간쯤 가서 많이 해이해졌었는데 그 이유가 나에게 필요하지도 않은데 사이드 프로젝트를 하기 위해 진행해야 했기 때문 이다.
별로 그 사이드프로젝트에서 동기부여를 얻지 못하니 마음도 풀어지고 그로 인해 코드를 치는 시간들이 고역처럼 느껴진 순간들이 있었다.
물론 그 프로젝트를 하는 동안 배운 것들이 매우 많다.
그!래!서! 내게 필요한 것을 만드는 것이야 말로 재밌게 진행 할 수 있을 것 같이 느껴졌다.
나는 현재 기술블로그로 Velog
를 사용하고 있는데 가끔씩 자신만의 기술 블로그를 개발해서 쓰고 있는 블로거들을 보면 동경심이 들었던 적이 매우 많다.
그래서 나도 나만의 기술 블로그를 만들어보려 한다. 이번에는 열심히 해서 배포까지 배워볼 셈이다.
기술 블로그 개발을 시작하며 얻고 싶은 점들
AI 를 최대한 활용해보자
예전 토이 프로젝트 할 때는 고전적으로 근본있게 공식문서 읽고 해야지! 라는 생각을 가졌지만 현재의 모습과 예상되는 미래의 모습들을 생각해보면
AI
와 우리의 거리는 현재보다 훨씬 가까워질 것으로 예상된다.
나는 항상 가치관으로 AI
가 발달 할 수록 그 AI
를 활용하는 개발자만이 잘 살아남을 수 있어! 라고 생각하면서
역설적으로 AI
를 제대로 활용하지 않는 사람이였다.
이번에는 AI
를 최대한 활용해보려 한다. 어떤 정보를 얻는 것 뿐이 아니라 필요한 코드 또한 AI
한테 물어보고 그 코드들을 이용해 최적화 하는 등으로 말이다.
예전에는 그런 방식이 마치 베끼는 것처럼 느껴져 반감을 갖고 있었지만 이는 피할 수 없는 수순인 것 같다. 오히려 그 방식을 통해 생산성을 확장하는 것이 더 필요한 자세일 거라 생각했다.
이쁜 페이지를 만들어보자
예전 토이프로젝트는 나의 매우 거지같은 디자인 감각으로 인해 매우 못생긴 컴포넌트들의 향연이였다.
사실 만들면서도 그렇게 디자인에 대한 생각을 잘 가지지 않았어서 진행하면 할 수록 못생긴 결과물로 인해 할 마음이 너무 사라지더라
이번엔 그런 설욕을 또 겪지 않기 위해 tailwind
를 이용해보려 한다.
또 만들면서 사람들은 컴포넌트의 디자인들을 어떤 식으로 정리하고 사용하는지도 알아봐야지
CI/CD 단계를 공부해보자
사람들이 CI/CD
단계를 이야기 해도 나는 전혀 알아듣지 못했다. 왜냐면 그 부분은 나에게 너무 먼 얘기처럼 느껴졌기 때문이다.
이번에 기술 블로그를 제작하며 삽질을 하는 과정을 통해 CI/CD
에 대해서도 공부해봐야겠다.
글을 마치며
다음 시간부터는 기술 블로그를 NextJS
로 만들기 위해 준비해야 할 것들이 무엇인지 이틀~삼일정도 서칭해보고 계획을 세워보려고 한다.
좀 더 체계적으로 시작해봐야겠다. 프로젝트를 위한 플로우 차트를 만들어야 할까 싶기도 하다.