기술 블로그 개발

오랜만에 기술 블로그 코드를 봤다.
이전에 netlify 오류 때문에 삽질한 이후 처음 본 것 같다.

최근 회사에서는 TS 기반 Vue3를 사용하고 있어서, 오랜만에 JS 기반의 Vue3를 보니 조금 어색했다.
기술 블로그 개발을 시작할 당시에는 Vue3를 하나의 도전으로 사용한 것이어서, Vue3를 조금 다뤄본 지금 보니 약간 어색한 부분들이 보이는 듯 하기도 했다.

우측 목차, Toc

오늘 원래 개발하려던 내용은 화면 우측에 스크롤을 따라오는 목차(정식 명칭이 뭔지 모르겠다)를 만들려고 했는데, 생각보다 쉽게 되는 내용이 아니었다.

이전에도 찾아보긴 했지만, 지금 쓰고있는 UI 라이브러리인 PrimeVue에 혹시 관련 컴포넌트가 있는지 다시 찾아봤는데 없었다.
그래서 <ul>, <li> 등을 사용해서 직접 구현해야겠다고 생각했다.

그런데 markdown 문서의 제목들을 얻어올 방법이 마땅치 않아서 구글링을 하다가 찾은 것이 있다.

Toc에 대해 설명한 블로그를 보게 되었다.

이 분께서 구현하신 걸 보니, 내 생각보다 꽤 큰 작업이었다..
오늘 당장 해 보기에는 시간이 좀 부족할 듯 해서, 이 작업은 다음에 하기로 했다.

컴포넌트 정리

오랜만에 본 코드는 꽤 난잡(?)한 상태였다..

위에서 말했듯이 Vue3 사용 초기이다보니 한 컴포넌트에 너무 많은 것들이 들어가있는 것들이 있었다.

그래서 컴포넌트를 조금 나눠주고, 그에 맞게 폴더 구조도 다시 설정해줬다.

ts와 js

조금 번거로웠던 점이, 회사에서 ts로 작업할 때는 eslint가 경로가 변경되면 이전 경로에 해당하는 파일이 없다고 에러를 만들어줬는데, js로 만든 이 코드에는 그런 것이 없었다.

이게 정확히 ts와 js의 차이 때문인지는 확실하지 않지만, eslint 문서를 좀 찾아봐도 관련된 내용을 찾을 수 없어서 이 차이 때문인가 하고 추측만 하고 있다.

netlify 배포

이전에 netlify 의존성을 삭제해서, 이게 과연 빌드가 제대로 될 지 걱정이 되었다.
하지만 빌드 명령어를 실행시켜 보니 다행히 이전처럼 잘 동작했다..

MariaDB SQL

컴포넌트 정리까지 마친 후에 MariaDB SQL 책을 마저 봤다.

저번에 테이블 생성만 다 해놓고 데이터를 입력하지 않았었는데, 데이터 입력만 해도 시간이 꽤 걸렸고 다 입력하고 나니 좀 지쳐서 오늘은 데이터 입력까지만 했다..
이 다음 내용이 sql의 시작인데, 그래도 오늘 지루한 부분은 다 해 놓아서 다음에 볼 땐 꽤 많이 책을 볼 수 있지 않을까 하는 생각이 든다..

이 책을 10월내로 다 보는 것이 목표였는데, 그건 힘들 것 같다..
그래도 최대한 빨리 읽어 봐야 겠다.