github : https://github.com/junah201/velog-helper

😀 Velog Helper 를 제작하게된 계기와 과정을 풀어봅니다.

Velog Helper란?

Velog에서 새 글이 업로드 되었을 때 알려주는 크롬확장프로그램 입니다.

제작계기

Velog를 접한지 얼마 안된 시점에 Velog에 글을 보는 것에 빠져 트렌딩만 돌아다녀도 충분히 읽을 글이 많았지만

얼마지나 트렌딩은 별로 자주 안바뀌고 좋아하는 포스터들의 글이 항상 트렌딩에 올라오는 것이 아니다보니 찾아서보는 것이 아닌 이상 보기 힘들었다.

그러서 저는 ...

북마크한 블로그에 새로운 글이 업로드 되었을 때 알려주는 크롬확장프로그램을 만들자 !

라는 생각을 가지게 되었고, 크롬확장프로그램을 만들기로 마음먹었습니다.

제작과정

기획

일단 간단한 기획을 해보자

초기에는 단순히

벨로그 메인 화면에 버튼을 하나 더 만들고 누르면 새로운 글 목록이 뜨도록 하자!

라는 생각만을 가지고 만들었습니다.

UI 제작

먼저 간단한 버튼을 추가하고

어라? 근데 벨로그는 다크모드도 있는데..?
전에 벨로퍼님 글에서 css 변수를 이용해서 구현했다는 것을 알았기에 바로 옆에 있는 버튼의 CSS를 그대로 복사해오면서 해결!

버튼을 누르면 간단한 목록을 띄우자 !

서버 제작

새로운 글을 가져오려면 어떻게 가져와야하려나?
Velog는 rss 주소를 제공해주기 때문에 이 rss 주소를 이용해서 글 목록을 5분 마다 갱신하고
새로운 글이 올라올 경우 db에 저장해두자

Velog Readme Stat 등의 다른 velog 관련 프로젝트를 보니
어? Velog 서버의 API가 열려있네?

GraphQL는 처음 써보지만 도전해봐야지..

추가기능

새로운 글을 확인하려면 Velog 사이트에 무조건 PC로 접속해야한다는 사실이 불편했습니다
그래서 저는 ..

새 글이 오면 이메일로 알려줘야겠다 !

이메일로 알림을 받도록 gmail api를 이용해서 제작하고

크롬확장프로그램 팝업탭에서 email를 입력할 수 있고, 만약 크롬 로그인이 되어 있다면 이메일을 자동으로 가져올 수 있도록 하였다.

그래서 어떻게 사용하는건데?

크롬 확장프로그램 설치 (웨일에서도 됩니다)

1. 크롬확장프로그램 스토어에서 Velog Helper를 검색하거나 링크를 통해서 접속해주세요.

2. 크롬에 추가 버튼을 통해서 다운로드 해주세요.

3. 이후 Velog 메인화면에 들어가면 종 모양의 알림버튼이 생깁니다.
   

4. 이 버튼을 누르면 아직 아무런 글이 표시되지 않을텐데, 아무 블로그 메인화면에 들어가서 별표시의 북마크 버튼을 눌러주세요
   
   만약 해당 블로그가 이미 Velog Helper에 등록되어 있다면 바로 새 글 알림 목록에 뜨지만, 등록되어 있지 않다면 15분 이내로 목록에 뜰꺼에요.
   #25(해당 블로그가 처음 등록되면, 블로그에 등록된 모든 글이 새로 업로드 된 것 처럼 메일이 엄청 많이 오는 버그가 있어요...블로그 등록 시 포스트를 가져오는 로직과, 꾸준히 새로운 글이 있는지 확인하는 로직이 분리가 안되서 생기는 버그로 시험 끝나고 빠르게 수정할게요..)

5. 만약 크롬이 구글 로그인이 되어 있다면 자동으로 해당 이메일을 가져와서 알림을 전송하지만, 로그인이 안되어있거나 웨일 등의 다른 브라우저를 사용중이면 오른쪽 위 팝업에서
   
   이메일을 등록해주세요.

마지막으로

미숙한부분이 많았을텐데 끝까지 봐주셔서 감사합니다
버그 제보나 기능 제안 등은 Github 🐛 이슈로 남겨주시고
버그 수정 및 기능 추가 등은 ✅ Push Request를 날려주세요 !!

junah201 github 팔로우는 언제나 환영입니다!

github : https://github.com/junah201/velog-helper
크롬확장프로그램 : Link