Article, Md, Github

Article

블로그의 본 목적인 글을 쓰기 위해, 글의 틀이 될 컴포넌트를 만들었다.

이름은 Article.vue로 지었는데, 글이라는 말을 어떻게 번역해야할지 고민하다가 외국 문서를 볼 때 글을 article이라는 말로 사용했던 것 같아서 이렇게 지었다.

우선 제목, 목차, 본문 정도만 나눠두었다.
여기에도 PrimeVue의 컴포넌트를 적극 활용했다.

Md(Markdown)

본문은 마크다운(Markdown) 형식으로 적으려고 생각했어서, 마크다운을 지원하는 방법을 찾아봤다.

찾던 중에 vue3-markdown-it이라는 오픈소스가 있어서, 이걸 적용시켰다.

Archived 되긴 했는데, 이미 잘 만들어졌다고 생각했고 마크다운이라 크게 변할 일은 없을 거 같아서 그냥 사용하기로 했다.

Github

좌측 메뉴 상단에 About Me 영역을 만들어뒀는데, 여기에 우선 Github 링크만 연결해두었다.
다른 것들은 또 뭘 연결할지 고민을 해 봐야겠다.

애먹은 부분

링크를 연결하는데 <a> 태그를 사용했는데, 이 태그의 특징인 하이퍼링크 스타일(보라색, 밑줄)이 남아서 이걸 지우기 위해 text-decoration: none;을 적용했다.

근데 링크를 눌렀다가 뒤로가기로 돌아오니 밑 줄은 안 생기는데 보라색으로 변하는건 그대로였다..
이 부분은 해결 방법을 찾다가 해결을 못 해서 일단 놔뒀다.

그 외

Vue3의 Composition API를 처음 사용하다보니, 기존에 사용하던 Vue2의 Option API와 다른 부분들에서 조금 헤맸다.

한 가지 예를 들면, Vue router를 사용할 때 Option API는 this.$roter 형태로 라우터 객체에 접근을 했는데, Composition API는 this가 없어서(이 표현이 정확한지는 모르겠다...) 어떻게 사용해야하나 싶었다.

다행히 Vue router 공식 문서에 잘 설명되어 있어서 간단히 적용시킬 수 있었다.

라우터를 상단 메뉴바의 블로그 제목과 좌측 하단 메뉴 중 하나에 Article.vue 컴포넌트를 확인하기 위해 적용시켜 두었다.

추가

마지막에 npm run build를 통해 빌드를 했더니, 아래와 같은 경고를 볼 수 있었다.

아마 dynamic import를 쓰지 않고 그냥 넣어서 로딩 속도가 느려졌나보다 싶었다.
마침 이 부분을 회사에서 알아보고 있던 중이었는데, 타이밍 좋게 이런 경고가 나왔다.
다음에 잊지말고 이것도 수정해 둬야겠다.

후기?

이제 그래도 블로그처럼은 생긴 거 같아서 만족스러웠다.
다음 개발에는 실제 내용을 넣어봐야겠다.