Tistory 카드를 Github Profile Readme에 올려보자 (Tistory Badge, Post Card)

Tistory 카드를 Github Profile Readme에 올려보자

Github Profile Readme.md를 사용하여 소개글을 쓰는 오픈 소스중 31.8k의 스타를 받은 github-readme-stats가 가장 대표적입니다. 블로깅하는 개발자로서 이와 관련된 오픈소스를 찾던 중 velog-readme-stats을 발견하게 되었습니다. 저한테도 유용하겠다 싶었지만 아쉽게도 해당 서비스는 velog 한정이었습니다. 원하는 오픈소스가 보이지도 않고 제작도 어느정도 간단해보여서 그냥 제가 원하는 tistory 카드를 직접 만들기로 했습니다.

• 해당 프로젝트는 anuraghazra/github-readme-stats와 eungyeole/velog-readme-stats의 영향을 받아 제작되었습니다.
• 해당 프로젝트는 Tistory 뱃지 및 카드를 원하는 색상으로 등록이 가능합니다. (색상을 직접 커스텀할 수 있습니다.)
• Tistory Open API를 참고하여 개발을 진행했고 Github Profile에서 결과물을 확인할 수 있습니다.

 

Github Readme에 Tistory 카드 사용하기

 

Tistory Badge 사용하기

[](https://github.com/loosie/github-readme-tistory-card)

 

Tistory Badge는 name과 theme 두 옵션을 입력할 수 있습니다. theme은 총 5가지(default, dark, vue, blue, kakao)로 구성되어있습니다.

• name={insert_name}
• theme={insert_theme} 

 

Tistory Badge

 

Tistory Post Card 사용하기

[](https://github.com/loosie/github-readme-tistory-card)

 

Tistory Post Card는 name과 theme, postId 세가지 옵션을 입력할 수 있습니다. name은 블로그 도메인에 사용되는 이름을 입력해야 하며, theme은 총 6가지(default, tistory, santorini, bluedot, vue, vue-dark, kakao, gatsby)중 마음에 드는 것을 골라서 입력하면 됩니다.

• postId={insert_postId}  > (default: 블로그 가장 최신 글)
• name={insert_blogName}  > (필수 입력: xxx.tistory.com의 xxx을 입력)
• theme={insert_theme} 

 

전체 theme

 

직접 색상 커스텀해보기

사실상 이 SVG 카드를 만들기 시작한 이유 중 가장 큰 이유는 제가 원하는대로 직접 색상을 커스텀해서 사용하고 싶었기 때문입니다. 그래서 혹시 사용하려는 분들 중에 저처럼 커스텀하고 싶은 분이 있다면 Fork 후 원하는 색상을 설정하신 후 Pull Request로 날려주시면 해당 색상을 직접 적용해 볼 수 있습니다.

 

직접 색상 커스텀하러 가기(Add your theme)

• 로컬 프로젝트 실행방법 : fork후 터미널에 npm run start를 입력

자세한 사용법은 Github에서 확인이 가능합니다.

 

Netlify vs Vercel

이번에 serverless 서비스를 배포해보면서 Netlify와 Vercel 두 개를 모두 사용해 볼 경험이 생겨서 이를 공유합니다.

 

더보기 클릭 ↓

Netlify와 Vercel은 Serveless 플랫폼이다. 정확히는 AWS lambda를 기반으로 하는 FaaS(Functions as a Service) 플랫폼이다. AWS와 같은 IaaS의 경우에는 서버 인프라를 구성하고 배포하면 24시간 그 코드가 돌아가지만, FaaS는 프로젝트를 여러 개의 함수로 쪼개서 거대하고 분산된 컴퓨팅 자원에 함수를 등록하고, 이 함수들이 실행되는 횟수(혹은 시간)만큼 비용을 내는 방식을 말한다.

 

두 플랫폼의 형식상 차이는 다음과 같다. netlfy free plan vs vercel free plan

Build

• Netlify는 월 300분 무료 빌드가 가능하다.
• Vercel은 월 100시간 무료 빌드가 가능하다. 하지만  일/100개 제한이 있다. 그래도 Vercel이 더 좋다.

BandWidth

bandwidth 는 기본적으로 모두 100GB/month 이지만, Netlify의 경우 100GB당 $20로 추가 구매를 할 수 있고 Vercel의 경우 월별 요금제로 등록해야만 제한을 늘릴 수 있다. 그래서 확장성에서는 Netlify가 좋다.

Serverless Functions 개수와 크기 제한

serverless function은 실제 서버사이드에서 렌더링 되는 함수를 의미하는데, Vercel의 경우 이러한 serverless function을 12개로 제한한다. 또한 50MB를 넘어서는 안된다.

Serverless Functions 사용법

Netlify의 경우 build시에  functions 프로젝트 폴더에 디렉토리를 만든다. 그런 다음 JS또는 Go를 통해 AWS Lambda핸들러(netlify-lambda)를 추가해야 한다. netlify-lambda serve는 local에서 테스트가 가능하고, build는 배포할 때 사용하면 된다. 예제 샘플

• netlify-lambda serve {folder-name}
• netlify-lambda build {folder-name} 

그리고 api 사용법이 특이하다. Netlfiy가 functions 디렉토리를 만들어 배포하기 때문인지 /.netlify/functions/{function_name} 형태로 사용해야 한다. 만약 server.js라는 폴더이름으로 배포했다면 {base URL} + /.netlify/functions/sever로 사용해야 한다. 가시성이 좋지않을 뿐더러 굉장히 헷갈렸다.

 

Vercel의 경우 api 디렉토리를 사용하는 방식으로 python, ruby, js, go에 대한 지원이 가능하고 express.js와 유사한 (req, res) -> {...}형식도 지원한다. 배포과정은 거의 할게 없다. api 디렉토리에 함수를 작성해주고 해당 깃 프로젝트를 올리기만 하면 끝이다. 예제 샘플

 

Vercel의 api는 단순 {baseURL} + /api 로 사용하면 된다.  index.js폴더로 배포하였다면 단순 /api로 시작하고 만약 다른 이름(name.js)으로 지정하였다면 /api/name으로 시작한다. 두 플랫폼 모두 경로를 변경하는 방법은 있을 것인데 라이트 유저로써 딥하게 들어가고 싶지는 않았다.

 

그래서 둘다 똑같은 api를 배포한다고 했을 때 (index.js폴더로 get("/badge")) 호출 방법은 다음과 같다.

• Netlify : {Base URL} + /.netlify/functions/badge
• Vercel  : {Base URL} + /api/badge

 

쉽게 배포하고 싶을 때 두 플랫폼 모두 사용하기 좋았다. 그래도 고르라면 Vercel이 더 좋았다. 해당 프로젝트 특성상 express를 사용한 serverless 서비스 이었기 때문에 전체적인 배포 설정 과정과 api url가시성등을 고려했을 때 개인적으로 사용성이 더 좋았다. 위의 두 오픈소스도 모두 Vercel을 사용하여 배포하였는데 다 이유가 있었던 것 같다.

 

+ 두 코드는  netlify(exrpess/server.js 파일, netlify.toml파일)와 vercel(/api 디렉토리)를 통해 비교해볼 수 있다.

 

끝

추가 기능으로 Open API에 방문자 통계 확인 기능도 있으면 좋았을 텐데 그 부분을 구현못해서 아쉬웠습니다. python으로 크롤링해보려 했지만 커스텀된 블로그 스킨이 제각각이라 방문자 수 표현방법이 달라서 이는 포기했습니다. 무튼 제가 직접 쓰기 위해서 제작하였지만 다른 분들도 도움이 되었으면 좋겠습니다.