2024년 03월 16일·#next.js
블로그를 만들어야겠다..!
이 사이트를 만들게 된 동기 및 기획 내용을 담고 있습니다!
로딩중...
오래 걸리지 않기를 바라요..!
개요
카테캠 라이브 특강을 듣고, 기록의 중요함을 깨닫게 되었다. 단순한 기록이 아닌, 나를 남에게 소개하는 이력서와 같은 글 말이다. 다른 사람의 시선에서 나를 객관적으로 소개를 하다보면 결국 현재 나의 위치에 대해서 명확히 알 수 있게 된다. 이러한 글쓰기를 꾸준히 하게 되면 나의 성장을 한 눈에 볼 수도 있다.
내가 생각한 무엇보다 나의 인생에서 중요한 점은, 성장을 함에 있어서 객관적인 나의 위치를 바라보아야 한다는 것이다. 객관적인 것은… 아무래도 수치적으로 볼 수 있고, 눈으로 확인할 수 있고, 두리뭉술하지 않게 명확히 말할 수 있어야 한다고 생각한다. 객관적으로 나의 열정과 노력 등등 나의 위치를 볼 수 있는 방법이 무엇이 있을까에 대해서 많이 생각을 하게 되었다.
그나마 현재 나와있는 툴로는 깃허브나 백준 등에서 사용하는 잔디 시스템일 것이다. 꽉꽉 채워진 잔디를 보면 아 이사람 진짜 꾸준히 열심히 노력했구나를 알 수 있다. 정확시 어느 날에 어느정도의 노력을 했다는 것 또한 명확히 말할 수 있다.
하지만 잔디는 해당 시스템에 종속되어있으므로 깃허브의 활동이나 커밋, 그리고 문제 풀이 등만 노력의 결과로 들어가게 된다. 하지만, 꼭 코드를 작성하지 않고, 노트정리나 일지를 작성하는 것 또한 노력이지만, 이를 보여주려면 결국 내가 정리한 것들을 보여주어야 한다. 이를 한 곳 에서 볼 수 있도록, 내가 노트 정리 한 것 자체를 깃허브로 볼 수 있으면 좋을 것 같아서 시작하게 되었다.
(지금 나도 사실 컴퓨터 관련 공부를 전역 이후 단 하루도 빠지지 않고 했던 것 같은데, 중간중간 비어있는 잔디를 보면 눈물이 난다.)
만들게 되면 지금것 정리해둔 여러 글들을 하나씩 옮기지 않을까 싶다. 단순히 옮기기엔 내 실력이 많이 부족한 때에 작성된 글도 많이 있으므로, 복습겸 다시 재작성 해보는 것도 좋을 것 같다.
컨셉
다른 사람들도 내 글을 읽을 수는 있겠지만, 무엇보다 내가 중심이 되면 좋을 것 같다.
내가 쓰기 편하고, 내가 보기 편하고, 내가 찾기 편한 블로그가 되면 좋을 것 같다.
나조차 불편하면 이를 보는 사람들은 오죽할까..
이를 위해 내가 노트정리를 하는 형식 그대로 사용할 예정이다.
내 노트정리 형식을 나누어 보면 크게 3가지이다.
- 프로젝트 기록
- 일정
- 회의록
- 회고
- 일지
- 개발 문서
- 개인 개발 공부
- 언어별/기술별 공부 내용 정리
- 개인 일지
- 2개와 별개로 오늘 공부한 내용, 정리한 내용을 레퍼런스 하는 일지
각각은 필요한 내용이 다르다. 그에 따라서 가장 알맞는 형태로 개발을 해나가야 한다.
먼저 프로젝트 기록을 하는 것에 대해서는 많은 부분을 보여줄 수 없다. 그나마 보여줄 수 있는 곳은 일지 및 회고 부분일 것이다. 혹은 해당 프로젝트에 대한 소개 페이지 정도를 만들 수 있을 것 같다. 그리고 이 소개페이지를 아카이빙 할 수 있는 페이지가 있으면 좋을 것 같다.
개인 개발 공부의 경우 간단한 md 형식으로도 전부 커버가 가능할 것으로 보인다. 다만 사진 데이터가 많이 있을 수 있으므로 이에 대한 해결책이 필요하다.
개인 일지의 경우 레퍼런스 형식이 많이 존재한다. 특히나 어느정도 형식이 정해져 있기 때문에 적절한 템플릿을 제공해주는 형식이 좋을 것 같았다.
요구사항
일단 들어가야 할 것들을 나열해보면
- 소개
- 글 모아 보기
- 글 읽는 페이지
- 포스트 정리를 위한 태그
- 프로젝트 아카이빙
가 있다. 추가적으로 구현하면 좋을 것들은 아래와 같다.
- 태그/제목 기반 검색
와이어 프레임
기본적으로 밝고 심플한 느낌이 들었으면 좋을 것 같았다. 그리고 조금은 화려한 애니메이션이 있으면 좋을 것 같았다. 마치 econovation 홈페이지 처럼 말이다.
핵심 색상
https://www.behance.net/gallery/114734803/Registration-form-UI-Design
레퍼런스
벨로그처럼 글을 md 형식으로 작성하고, 이를 모아볼 수 있으면 좋을 것 같다.
내가 참여한 프로젝트에 대해서도 econovation 홈페이지처럼 모아볼 수 있으면 좋을 것 같다.
일지에 대해서는 타 포스트들과 겹칠 수 있으므로, 이를 단순히 포스트들을 아카이빙 할 수 있는 느낌이면 좋을 것 같다. 특히나 일지이다보니 날짜와의 연관성이 많이 존재한다. 한 눈에 볼 수 있는 깃허브의 잔디와 같은 도구들로부터 아이디어를 얻을 수 있을 것 같았다.
카테고리를 누르면 해당 카테고리가 작성된 날짜만 잔디가 보여지고, 특정 날짜 클릭시 해당 날짜에 작성된 포스트를 볼 수 있도록 하고자 한다. 어쩌면 검색 페이지를 대신할 수도 있겠다는 생각이 든다.
기능적 구현
일단 gh-page로 배포할 예정이므로, 정적 배포 특성상 백엔드 로직 자체를 사용하지 못할 것으로 보인다. 이에 따라서 모든 포스트들을 정적으로 가지고 있어야 한다. 이에 따라서 어떻게 해당 폴더를 정리하고, 어떻게 데이터별로 관리 및 가져올 수 있을지에 대해서 많은 고민이 필요해 보인다.
특히나 검색을 해야하는 입장에서 파일에 대한 메타 데이터를 다루어야 하는데, 이를 어떻게 이룰 수 있을지에 대해서 많은 고민이 필요하다.
결국에 포스트는 커밋으로 기록이 남게 될테니, 검색에 대한 모든 책임을 깃허브에게 위임해도 될 것 같기도 한다.
커밋 메시지에 프리픽스를 붙여주면 검색이 조금 더 편해지지 않을까 싶다.
https://docs.github.com/ko/rest/commits/commits?apiVersion=2022-11-28#get-a-commit
환경설정
혼자서 하는 프로젝트이지만, 한번 만들게 되면 어쩌면 평생 사용해야 하는 코드이기도 해서 처음부터 일관된 코드를 작성해 나가기 위해 lint/prettier + husky 설정을 해주었다.
해당 블로그를 많이 참고 하였다 : ttps://velog.io/@zzacodez/next.js-14-typescript에-eslint-prettier-husky-적용하기