MINILAB | 개인 깃허브 블로그/깃블로그 개발 후기

개인 블로그 개발 후기

블로그와 포트폴리오까지 한 번에!

Background

내 블로그가 너무 지루해져갈 찰나에 2월 초중순 내내 개발하게 되었다.
사실 이 블로그가 처음은 아니고 Chirpy theme으로 블로그 테마로 지냈었었다. 대충 아래와 같이 생겼었다.

이 블로그를 보면 알겠지만, 검색 기능과 Table을 포스트마다 제공해주어서 직관적이고 나름 티스토리 블로그처럼 가독성도 편한 테마다.

문제는 이 코드를 뜯어보려고 한 사람들은 알겠지만 재사용성이 쉽지 않고, 무엇보다 쌩 html과 js만 쓰기에는 나에게는 너무 불편했다..ㅠㅠ 위에 이미지에서 봤듯 고작 내가 바꿀 수 있는 거란 배경 사진과 폰트 이 정도였다.

그래서 다른 테마 뒤져보았는데도 jekyll 자체가 뭔가 내가 원하는 블로그 테마도 없고..hexo도 없어서 아예 바닥부터 내가 만들어보자는 심정에 엎게 되었다.

Preliminary

블로그는 1차적으로 아마 작년 6월 경에 바꿨던 것으로 기억한다. 당시 내가 아는 웹 기술 스택은 Reactjs 밖에 없었고, 타입스크립트 배우기도 내가 웹/앱 갈 것도 아니여서 처음부터 내가 뭘하기에는 뭐해서 아마 그 때 구글이랑 깃에 github blog template 이런 식으로 검색했던 것 같다.

블로그 테마 선정 기준에 있어서 나는 아래가 꼭 만족되어야 하는데,

검색 기능 지원
태그 기능
블로그 외 내 소개 페이지 추가가 가능한..

그러다가 마침내 눈에 들어온 테마가 Tailwindcss Nextjs starter blog였다. Example에서 보이는 것처럼 내가 원하는 방향으로 자유롭게 꾸미는 것도 가능하고.. 매력적인 스타터팩인 것 같아서 시작하게 되었다.

Nextjs는 크게 몰라도 프론트엔드만 잘 다뤄서 블로그 구색만 맞추게 했던 것 같다. tailwindcss도 모르다가 점차 만지면서 차차 알게되었고..

근데 뭐..ㅋㅋ 말그대로 구색만 맞춘 거라 테마해서 색 바꾸고 앞에 메인 페이지만 바꿨었다.
처음에는 이것도 뭔가 잘했다고 생각했지만 얼마 안가 손이 안가게 되는 블로그가 되어버렸다..ㅠ

그래서 이번에 바꾸면서 크게 바꾼 몇가지는 아래와 같다.

앞에 메인 페이지에 나에 대해서 간략하게 정보와 블로그 preview 정도
About: 나에 대한 CV를 웹페이지로,
Blog: 블로그에는 네이버 블로그 처럼 프로필이랑 태그가 있었음 좋겠다.

이 정도가 될 것 같다.

들어가기 전에 내가 사용한 기술스택은 아래와 같다

UI/UX Design

UX는 Miro라는 앱을 통해서 시간날때 틈틈이 고민해서 만들었다.
Home 카테고리만 필요해서 아래와 같이 디자인 해주었다.

원래는 까만부분은 threejs를 이용해서 있던 걸 가지고 재밌게 풀어볼까 싶다가.. 뒤에 나오겠지만 vercel에서 계속 터지고 해서 계획을 바꿨다..ㅠㅠ 아래 사이트 디자인들을 합해서 내 테마에 맞게 수정하면 될 것 같아, 저 틀을 토대로 수정해나갔던 것 같다.

색 팔레트는 Tailwindcss에서 기본 제공하는 blue-500, indigo-500 둘 다 사용했다. 좀 일관성이 없는 것 같아 이건 추후에 수정할 것 같다.

프로필에 사용한 이미지 소스는 아이패드에서 제작해서 다운받았다.

Front End

솔직히.. 파일 경로가 좀 엉망이다. 이 repo는..ㅋㅋㅋ 그래서 최대한 경로 꼬이는 걸 방지하기 위해 내 식대로 먼저 정리해놓았다. VS studio를 사용하면 경로도 다 자동으로 재설정해주긴 하지만 경로를 아예 박아버리는 코드 몇개가 꼬일까봐 최소한으로 정리하였다.

1. Repository 내 파일들 설명

추후 이 템플릿으로 작업하실 사람들을 위해 빠른 정리! 이 부분만 건들면 거의 블로그 대부분을 건든 것과 다름없다.

index.js: 홈 화면
AuthorLayout.js: About 카테고리, about.js에서 수정할 수 있으나, data > author > default.md 내용을 최대한 반영하고 싶다면, AuthorLayout에서 작업하는 것을 추천한다.
blog.js, ListLayout.js, PostLayout.js: 블로그 내 코드를 따로 빼서 Listlayout component를 입력으로 넣어줄 것을 추천한다. 추후 코드 재사용성을 위해 나는 그렇게 하였다. PostLayout.js는 지금 보는 포스트의 디자인이다! 나의 경우 Sticky TOC를 추가하였다.
[tag].js: Nextjs 특성상 route 구조 = 파일 구조, 이런식으로 만들어지는데, blog에서 따로 뺀 component를 [tag].js에 적용해주었다.

개인정보 변경은 data > author > default.md 를 변경해주고 추후 포스트를 쓸 때는 data 폴더 안에 마크다운 파일을 만들어나가면 된다. 마크다운 헤더의 경우, 공식 repo에서 확인하면 된다!

2. Threejs 적용 실패? Why?

아래는 메인 페이지에 걸려고 했던 에셋인데

로컬에서는 굉장히 잘되는 모습이지만, vercel에 옮겼을 때는 안되는..그런 대참사 아닌 대참사가 없었다..ㅠㅠ 이것 때문에 중간에 계획을 틀면서 엎어졌지만.. 왜 안되었는지는 나는 모르겠다..

혹시나 이 포스팅을 보시는데 tailwind-nextjs 스타터 템플릿에 적용하시다가 threejs를 적용하시고 싶으시다면..

react-three-next
npm install gltfjsx
Blender / Maya / Cinema4d

이렇게 준비해주심 될 것 같다. gltf 파일 올리는 거 외에 threejs 쓰임새는 무궁무진해서, 공식사이트 방문하는 것도 권함! 국내에서는 아직 잘 안쓰지만 외국에서는 활발히 쓰고 있는 추세라 example 사이트가 많다.. 나오지는 꽤나 된 라이브러리지만 기술 스택 추가하기에 매력적이라고 생각한다.

3. React awesome button과 nextjs와 충돌

왜 그런지는 이것도 잘은 모르겠지만..ㅠ React 18에서는 transition이 defined 되지 않다고 계속 vercel에서 오류가 떴는데, react 18에서 새로 추가된 useTransition 함수 때문이지 않을까 추측한다.. react 17로 내렸으나 가망이 없어서 이건 tailwindcss로 간단하게 구현했다.

Dark 모드에서는 좀 못생기게 나오지만 나름 구현을 잘했다고는 생각한다 ㅎㅎ

Back End

Nextjs 설명 참고하면 좋은 것들:

요약하면, react-router-dom 보다는 로딩 시간을 줄일 수 있다!
하지만 다른 페이지로 넘어갈 때 전체가 새로코침이 되는 단점이 있다.

부하를 좀 줄이고자 블로그 ListLayout.js에서 어차피 전체 블로그 페이지를 초기 때 호출하는 것 같아서 [page].js 호출하지 않고 간단하게 slice한 index 정보를 간단하게 useState로 상태 관리하였다. [tag].js 는 어쩔 수 없이 호출되는 지라 이건 크게 건들지 않았던 것 같다.

Nextjs 특성상 서버에서 미리 랜더링을 하므로 별도의 Loading 페이지는 필요가 없지만 간단하게 timeout으로 구현하였다.

GISCUS 연결하기

giscus 연결은 하라는대로 하면 된다. discussion category 하나 새로 팔 때 Q&A 옵션인지 확인하고, 아래 생성된 <script> 에 나온 정보를 폴더 내 .env.example 에 복붙하면 된다. 여기서 .example을 지워주면 잘 연결된 모습을 볼 수 있을 것이다.

vercel에 올릴 때는 Setting > Project Setting > Environment Variables 에서 .env import 하고 production, develop, preview 모두 체크하고 끝!

Wrap up | Conclusion

이렇게 해서 완벽하게는 완성하진 않았지만, 그래도 어디가서 나 개발하는 사람이다!라고 말할 수 있는 나만의 블로그를 만들었다. 추후 포트폴리오도 정리해서 여기에 업데이트할 듯 싶다. 아쉽게도 awesome button 넣고 싶었는데, 뭐가 문제인지는 잘 모르겠지만.. 아무리 검색해도 안나와서 포기했다. 다크 모드는 곧 업데이트될 것 같고, 추후 실패했던 three.js를 내 연구랑 연결을 해서 올릴 것 같다. 좀 더 재밌게 만드는 방향으로 그 때 가서 볼 듯 싶다. 아무튼 이번 블로그를 만들면서 인공지능 모델 돌릴 동안 공부한 웹공부를 적극적으로 잘 활용한 것 같아 뿌듯하다.

코드를 재사용하는 것에 대해 고민을 하였고 적용해보았다.
클린 코드를 위해 Component화하고 파일 구조도 재정립해보았다.
tailwindcss 사용한지 1년차로서 사용에 있어서 문제가 없을 정도로 성장!
React 3년차로서 클론코딩 movie app 해매면서 만들던게 엊그제 같은데, 남의 코드를 보고 이해하고 내 것으로 다시 코딩하는 실력으로 성장한 것 같다.
Nextjs에 대해 새로 알아가고 많은 공부가 되었다. 정적 사이트에서만 사용할 수 있다는게 단점이지만, 이러한 특징을 살려서 다른 것을 만들 수 있음 활용해보고 싶다.

다음 공부는 Flutter가 될 것 같다. 개발 후기 끝~!