지금으로 부터 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아이디만 입력하면 모두가 블로그를 사용할 수 있도록 배포하는 것이였는데, 아직 목표까지는 작업이 조금 더 남은것 같습니다. 완벽히 완성을 하게되면 다시 글을 남기도록 하겠습니다. 감사합니다 :)

직접사용해보기

최근 음악 플레이리스트는 단순히 음악 모음집의 개념을 넘어서고 있습니다. 많은 음악 스트리밍 서비스들에서는 자체적으로 상황이나 분위기에 따른 다양한 플레이리스트를 제작하고있으며 심지어는 음악과 관련이 없는 여러 기업들에서 마저 마케팅의 일환으로 플레이리스트를 제작하고있습니다. 플리마케팅 이러한 플레이리스트 전성시대에 발 맞춰 플레이리스트를 기반으로 한 음악 재생 웹을 만들어보고자 생각하게됩니다.

유튜브에서도 볼 수 있는 다양한 플레이리스트 영상들

작동방식

간단합니다. 유저가 원하는 플레이리스트를 검색하면 그 에 맞는 플레이리스트를 스포티파이 api를 통해 불러와줍니다. 그중 유저가 고르는 플레이리스트의 곡들을 불러와준후 그 곡들을 유튜브를 통해서 재생해줄 것입니다. 스포티파이 api 다 년간 스포티파이를 직접 사용하며 스포티파이에서 제공하는 여러 플레이리스트, 유저들이 만들어 놓은 여러 플레이리스트들은 강력하다는 것을 몸소 느낀바 있어 스포티파이를 통해 플레이리스트를 불러오도록 하였습니다. 또한 유튜브 영상 재생시에는 react-player 라는 모듈을 이용하였는데, 리액트 전용 모듈로써 비교적 리액트에서 쉽고 빠르게 적용가능하다는 점이 해당 모듈을 선택하게 된 이유입니다. react-player npm 유튜브에서 영상을 가지고 올때는 흔히 유튜브 data api를 많이 사용하는데, 구글에서 제공하는 유튜브api의 경우 할당량 문제로 인해 하루에 검색의 경우 100회 밖에 사용을 하지 못하기때문에 axios를 통해 유튜브의 검색결과를 불러온 후 필요한 정보만을 추출하는 방향으로 진행했습니다. axios npm / Youtube Data Api 이 외에 프론트엔드 프레임워크 react, react-router, 상태관리 recoil, 스타일 tailwindcss, 백엔드 express.js를 사용하여 개발하였습니다.

디자인

간단히 디자인 컴포넌트와 사용 할 아이콘을 만들어줬습니다. 이를 기반으로 간단히 레이아웃을 잡아줬습니다. 디자인이 익숙치 않아 와이어프레임 수준까지만 제작을 해준 후 개발을 시작했습니다. 개발 과정에서 디자인은 많은 변화를 가지게됩니다.

작동

홈 화면

정말 단순하게도 검색창만 존재합니다. 스트리밍 서비스와 같이 재생기록이 남는다거나 곡등을 저장하는 기능을 전혀 넣지 않았기 때문에 플레이리스트를 검색 할 수 있는 검색창만 만들어뒀습니다.개발 과정에서 간단히 로고를 제작해줬습니다.

검색 결과 화면

검색결과로 플레이리스트의 커버 이미지, 이름 그리고 플레이리스트 제작자 이름을 카드형식으로 표시해줬습니다. 카드들은 grid 를 통해 정렬 됐으며, width 값에 따라 카드의 개수가 변하는 반응형으로 작동합니다. 카드에 hover시 색이 변해 하이라이트가 되고 제목 텍스트에 hover시 텍스트에 underline이 생기도록 디자인 했습니다. 한번에 50개의 플레이리스트를 불러오게 되며, 이후 무한스크롤 방식을 통해 추가로 플레이리스트를 불러오게됩니다. 카드를 눌러주면 곡 재생 페이지로 이동하게됩니다.

곡 재생페이지

앨범커버 확대, 블러, 오퍼시티 값을 조정한 이미지를 통해 배경을 설정해줬습니다. 우측 상단의 햄버거 아이콘을 누르면 재생 대기 곡들이 표시되는 메뉴가 나옵니다. 당연히도 원하는 곡을 누르게 되면 그 곡으로 넘어갑니다. 재생바는 input태그의 range 속성을 통해 제작했으며 버튼들의 경우 react-player 의 기능들을 통해 작동하도록 만들었습니다.

미니플레이어

곡이 재생되고 있는 상태에서 재생페이지를 벗어나게 되면 하단에 위치한 귀여운 미니플레이어를 통해 곡의 재생현황을 볼 수 있습니다. 미니플레이어는 버튼을 통해 숨기거나 보이게 할 수 있습니다.

글을 마치며

장시간 개발을 쉰 후 제작한 첫 웹이기도 하고, 리액트를 사용하여 제작한 첫 웹이기도 하여 여러모로 의미가 깊은 것 같습니다. 완벽한 완성도를 가지진 못하였지만, 머릿속으로만 생각했던 웹페이지를 디자인 부터 제작까지 해냈다는것에 의미를 두고싶습니다. 길고 지루한 글 봐주셔서 감사합니다!

직접사용해보기

개발의 시작

개발을 시작한지 6개월정도의 시간이 흘렀으나 나의 깃허브에는 배포까지 끝마친 프로젝트가 존재하지 않았다. 큰마음먹고 이번엔 무조건 배포까지 해내겠노라 생각하며 개인블로그 개발에 착수하게된다.

콘셉트

개발자스러운 느낌의 블로그를 제작하고 싶다는 생각을 했다. 이런저런 웹사이트들을 참고하던중 가장 개발자스러운 웹사이트가 어딜까에 대해 생각하게 되었다. 그러던중 떠오른 곳이 깃허브. 깃허브페이지를 그대로 블로그로 이식하게로 결정하게된다.

기술스택

Frontend

• vuejs 3

Backend

• nodejs
• express
• mongoDB

  결과물

  메인페이지

  깃허브같다는 느낌을 주기위해 깃허브메인페이지 readme를 작성해보았다.
• 진짜*같이 만들기위해서 이런저런 깃허브꾸미기에 관한 글들을 찾아보았다. 하지만 실제 본인의 깃허브엔 소개글 readme가 작성되어있지않다...

게시글 페이지

역시나 깃허브 레포지터리 페이지의 디자인을 가져왔다. 태그를 통한 게시물찾기 기능이나 제목을 검색해서 게시물을 찾는 기능이 존재한다.

프로젝트 페이지

어떤디자인으로 제작할지 꽤나 고민했던 페이지이다. 깃허브 packages 페이지의 디자인을 가져왔다. 해당페이지에 역시 검색기능이 존재한다. 프로젝트 우측하단의 작은버튼을 통해 프로젝트 정보를 수정할 수 있다.

게시글 작성페이지

깃허브 레포지터리 생성페이지에서 가져왔다. 하지만 레포지터리와 게시글은 형식적으로 차이가 크기때문에 이식과정에서 여러수정과정을 거쳤다. 제목과 패키지내용을 채우면 업로드 토글이 활성화된다.

마크다운 에딧 페이지

marked모듈을 사용하여 마크다운 문법을 지원한다. 코드하이라이트 기능을 지원하는데 언어를 지정해줄수도 있고, 자동언어인식을 하는 기능도 지원한다. highlight.js 모듈을 사용하였다. 이미지 업로드기능이 있다. 백엔드의 multer 를통해 이미지가 s3에 업로드 되며 이미지를 본문에 추가시켜준다. 게시글길이가 길어져 왼쪽 프리뷰창을 넘치는 경우엔 위 영상과 같이 자동으로 스크롤 해준다.

게시글 열람 페이지

프로필 오른쪽 토글을 통해 게시글 수정 삭제 고정을 할 수 있다.

반응형페이지

모든페이지가 이런식의 반응형을 지원한다.

글을 마치며

개발이 후반으로갈수록 개발속도도 느려졌다. 처음으로 풀스택 작업을 진행했던것이고 지금까지 해왔던것들보다 큰 규모의 작업이였다보니, 너저분한 코드로 인해 고생을 하기도 했다. 스스로 부족함을 많이 느꼈던 작업인것같다.