개요
지금으로 부터 11개월 전 vue.js 를 이용하여 개인 블로그를 제작한 바가 있다. 개발 6개월차 비전공자 , 풀스택 개인블로그 제작기 기능적인 부분에 대한 구현은 부족함이 없었지만, 전체적인 완성이 굉장히 미흡했습니다. 당시 장시간 블로그 작업에만 몰두한 터라 더 이상은 이 코드를 더 주무르고 싶지 않았습니다. 최근 나름 힘들여 만든 블로그를 조금이라도 활용해보고자, 코드 리펙토링과 더불어 원래 사용하던 게시글 작성 방식을 버리고 velog에 작성한 게시글을 가져와 사용하는 방식으로 바꾸는 작업을 하게됩니다.. 프론트개발을 주력으로 하는 입장에서 억지로 만든 백엔드와 데이터베이스를 운영하는건 정말 거추장스러운 일이고, 초보 개발자인 내가 만든 작성방식보다는 수많은 개발자들이 사용하는 velog의 게시글 작성방식이 훨씬 awesome하다고 생각했다.
무엇이 바뀌었는가?
작업을 시작했을때 새로운 것을 만드는것보다는 원래 있던것을 덜어내는것에 조금 더 힘을 줬습니다. 이전에 블로그를 제작하며 가장 힘을 들였던 부분중 하나인 글작성은 과감히 삭제해줬습니다.
이전 블로그에서 사용한 글 작성 방식
github와 velog에서 정보를 가져오는 api
직접 글을 작성하고 저장하는 방식을 탈피하고 velog에서 내가 작성한 게시글을 가지고 오는 방식을 차용했는데, 내가 velog에서 가져오고자 했던 정보는 가장 기본적인 내가 작성한 게시물, 태그, 시리즈 였다. 나의 유저 정보의 경우 github에서 가져왔는데, github api를 사용을 처음 시도하였으나, 가져올 수 있는 유저 정보에 한계가 있어 크롤링을 해줬다. 웹브라우저에서 크롤링을 하게되면 cors 문제가 생기게되므로, 간단한 api 서버도 만들어줬다.
파라미터로 github 아이디를 입력하면 github정보를 불러오는 api
유저정보외의 velog에 있는 여러 정보를 불러오기 위한 api또한 만들어줬다. velog의 gql api로 부터 불러온 정보를 정리하여 rest api로 불러올 수 있도록했다. gql그대로 써도 되지 않느냐고 얘기할것이다. 사실 gql이라는 것을 이번에 처음 사용해봤다. 바로 차용해도 좋았겠지만, 아무래도 처음 만난 기술이다 보니 조금 어려웠다.
유저명을 기반으로 게시글을 불러오는 api
velog에서는 제공하지 않는 게시글 고정 및 시리즈 설명 기능 추가
velog에서는 게시글 고정 및 시리즈에 대한 설명기능을 제공하지 않습니다. 하지만 제가 이전에 만든 블로그의 경우 해당 기능들을 지원하고 있었고, 이러한 기능을 계속해서 가져가고싶었습니다.
게시글 고정
게시글 태그에 pinned 태그가 있을경우 자동으로 고정 된 게시물로 분류하게됩니다.
이렇게 고정된 게시물은 메인페이지의 pinned 부분에 노출됩니다.
시리즈 설명
시리즈내의 ReadMe 게시물을 작성해주었으며 해당게시물의 내용을
시리즈의 설명으로써 보여줍니다.
게시물 열람페이지에 목차 및 댓글 기능 추가
어찌보면 블로그에 필수적으로 가지고있어야 할 목차와 댓글 기능을 이전에 제작하지 않았습니다.
목차
벨로그의 목차기능과 비슷하게 스크롤 위치에 따라 반응하고 클릭을 통해 해당 위치로 이동할 수 있는 목차를 만들어 줬습니다.
벨로그는 hn태그라면 모두 목차에 추가되는 반면대제목(h1)과 소제목(h2)만 목차에 추가되도록 하였습니다.
댓글
간단히 댓글 부분도 디자인 하여 추가해줬습니다.
그럼에도 여전히 미완
이전에 비해 많은 발전을 맞이하였지만, 그럼에도 여전히 완전히 완성시키지 못했습니다. 먼저 SEO에 대한 개념을 이 작업 이전에 전혀 알지 못하였고, 해당 작업을 통해 SEO 를 알게됐지만 CSR에서 SSR로의 전환을 아직 하지 못하여 SEO 최적화를 전혀 하지 못한 상태입니다. 또한 댓글 작성 및 좋아요 기능을 아직 추가하지못했습니다. 작업 시작전의 목표는 github과 velog아이디만 입력하면 모두가 블로그를 사용할 수 있도록 배포하는 것이였는데, 아직 목표까지는 작업이 조금 더 남은것 같습니다. 완벽히 완성을 하게되면 다시 글을 남기도록 하겠습니다. 감사합니다 :)
