깃헙 README.md 에 랭킹 태그 달기 (feat.OPGC)

안녕하세요! 운동'했'던 개발자 Jay입니다 ㅋㅋㅋ (운동 안 한 지 꽤 됐네요...;;)

아무튼 이게 중요한게 아니라 ㅋㅋ

 

https://github.com/anuraghazra/github-readme-stats

다른 개발자들의 깃헙을 가보시면 README.md에 위와 같이 휘황찬란하게 꾸며진 태그들을 본 적이 있을 것입니다. 요런 태그들이 있으면 나의 깃헙 프로필이 좀 더 멋지고 이쁘죠 ㅋㅋ 

 

개발자 랭킹 사이트 OPGC

OPGC가 개발자 랭킹 사이트이기 때문에 저렇게 랭킹이나 수치에 대한 정보를 태그로 제공하면 좋을 것 같다는 생각을 많이 했습니다! 그래서 이번에 기능을 추가하게 됐고, 그 과정에 대해서 설명해보려고 합니다.

 

🤔 What is SVG?

---

일단 저런 것들이 어떻게 제공되는지 알아보기위해 기존에 사용하던 github-readms-stats가 어떻게 보여지는지 살펴보겠습니다!

img 태그로 불러오는 github-readme-stats

문서에 보면 img태그로 사용하라고 나와있었습니다. 처음에는 정말 이미지를 불러오는 건가? 했는데 그건 또 아닌 게 애니메이션 같은 것도 있고 테마도 변경할 수 있기 때문에 이건 아니다 싶었고 url을 직접 호출해서 확인해봤습니다!

 

src의 url을 호출한 response 는 svg

오! 그냥 평범한 image가 아닌 svg 구나?! 사실 svg는 첫직장에서 웹을 할 때 일반 이미지보다 해상도가 높고 확대해도 깨지지 않는 파일?이라고 알고 있었습니다. 이게 정확하게 알고 있는지도 몰랐고 아 그런가 보다 했죠.

 

여하튼 svg의 정확한 의미를 찾아보면 아래와 같습니다.

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다
(출처: 위키백과)

 

뭐 간단히 말하자면 일반 픽셀방식의 표현이 아닌 벡터 형식의 표현으로 수학적 함수 등으로 선과 도형을 표현한다고 합니다. 그래서 확대할수록 픽셀 방식의 이미지와는 다르게 이미지가 깨져 보이지 않는다고 하네요.

 

여기서 중요한건 XML 텍스트 파일로 정의된다는 것입니다. svg 파일을 열면 xml코드로 되어있는 걸 볼 수 있습니다. 사실 여기서 HTML, XML의 차이 등에 대해 더 설명하자면 길어지는데... 고것은 여기 에서 보시길 바래요! (저도 잘 몰라요~ 라고 할뻔)

🚀 API로 SVG 전달하기

---

SVG 이미지 요소

(출처: MDN Web Docs) 에 내용을 보면 위 내용처럼 svg 이미지를 표현할 수 있다고 합니다. 다만 위 예제에서는 svg태그 내부에 image를 표시하는 거라, svg 내부에 html을 사용하여 저만의 커스텀한 디자인을 그려보겠습니다.

 

svg 내부에 html을 표현하기 위해서는 <foreignObject>를 사용한다고 합니다.

 

svg 내부 html 로 만든 이미지 예제

오 대충 느낌은 잡았고 이걸 그럼 api로 전달해 보겠습니다!

 

response로 svg를 전달하는 DRF view

profil.html에는 위 예제 코드 그대로 넣었습니다. api view에서는 Content-Type에 image/svg+xml이라고 명시해줬습니다. Cache-Control은 웹 캐싱 정책인데, no-cache로 한 이유는 조금 뒤에서 설명하겠습니다.

 

위처럼 구현하고 postman을 통해 api response를 확인해보면 아래와 같이 svg 이미지가 표현되는 것을 볼 수 있습니다. 

 

Postman 응답

와우... 이제 다 되었습니다. 그럼 이제 제가 표시하고자 하는 내용을 만들어 보겠습니다. 저는 context로 랭킹 정보(순위, 1일1커밋, 티어)를 넘겨서 django template rendeing을 통해 콘텐츠를 만들었습니다!

 

opgc 정보를 넣어서 만든 svg 이미지

와우...지..지립니다...ㅋㅋㅋ Postman으로 보니까 css가 조금 안 맞아 보이는데 web에서는 잘 보입니다. 

 

OPGC Tag가 추가된 저의 README

하... 예쁩니다... 아주 예뻐요 ㅋㅋㅋ 여러분들도 혹시 OPGC 태그를 넣고 싶다면 OPGC문서 한번 읽어보시고 적용해보세요! 

OPGC 유저 프로필에서 태그를 복사할 수 있습니다

아니면 그냥 OPGC에서 여러분 깃헙 아이디 검색하고 상세 프로필 보시면 태그 복사하기 버튼이 있는데, 복사된 텍스트를 그대로 README.md에 추가하시면 됩니다!

OPGC: Over Programmed Good Coding

 

💰 Cache-Control 을 no-cache 로 한 이유

---

github에서 실제 svg 이미지를 보여줄 때는 제 서버의 api를 직접적으로 호출해서 매번 보여주는 게 아닌 camo(?)라는 proxy를 통해서 호스팅을 해줍니다.

Camo is all about making insecure assets look secure. This is an SSL image proxy to prevent mixed content warnings on secure pages served from GitHub.

Camo는 혼합 컨텐츠 경고를 예방하기 위한 SSL image Proxy 라고 하네요. 혼합 컨텐츠 경고는 https로 연결될 때 일부 컨텐츠들이 http로 불러올 때 나오는 경고입니다.

 

개발자 도구를 통해 보면 src가 camo 링크인걸 확인 할 수있습니다

개발자 도구를 통해 img를 보면 img src가 camo링크인 걸 확인할 수 있습니다. 그 옆에 data-canonical-src 에 실제로 svg를 제공하는 링크가 있네요.

 

중요한 건 camo에서는 이 image를 캐싱하게 되는데, 캐싱을 사용하게 되면 만료되기 전까지 변경되는 정보를 보여줄 수 없게 됩니다. 그리고 결정적으로 처음 캐시 만료 시간을 1시간으로 설정하고 배포했었을때, 어느 순간 잘 나오던 이미지가 보이지 않은 적이 있었습니다;;

 

처음에는 제 서버가 이상한가 싶었는데 포스트맨으로 호출했을 때 제대로 이미지가 보였습니다 ㅠㅠ

 

한 3-4시간 삽질하다가 어느 순간 다시 깃헙에서 이미지가 보이는 걸 확인했습니다. 근데 조금 이상했던건 처음 호출하는 정보에 대해서도 제대로 이미지가 보이지 않는걸 보니 뭔가 camo에서 host(제 api server 주소)별로 캐시정책을 해주는게 아닌가 싶기도 했습니다 (추측)

 

그리고 또 다른 추측으로는 제가 설정한 캐시 만료시간과 camo에서 처리되는 설정이 뭐가 다른지 캐시가 만료됐음에도 불구하고 api를 재호출 하지 않는 것 같았습니다.

 

404를 리턴하는 camo

그래서 애초에 caching을 한지 않도록 no-cahce를 사용했고, no-cahce, no-store, must-revalidate 3가지를 사용한 이유는 여기서 확인하길 바랍니다. 위 옵션으로 수정해서 api 서버를 재배포한 뒤로는 README.md에서 이미지가 잘 나왔습니다.

 

👋 마무리

---

예전부터 해보고 싶었던 내용인데 이번에 토이 프로젝트 피쳐로 개발할 수 있어서 재밌었고, 제가 모르던 사실들을 많이 알게 되어서 더 재밌었던 것 같습니다. 예를 들자면 깃헙에서 camo를 통해 이미지를 서빙 한다는거?

 

이 글을 읽으시는 분들 중 비슷한 기능을 만드시는 분들이라면 svg, xml, cache-control 등에 대해 좀 더 찾아보시면 좋을 것 같습니다! 그럼 오늘도 좋은 하루 되시고 즐거운 코딩 하세요!

 

[참고한 글]

https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial

SVG 튜토리얼 - SVG: Scalable Vector Graphics | MDN

https://coding-groot.tistory.com/42

GitHub README.md 이미지가 갱신/업데이트 안 되는 경우 해결법

https://www.huskyhoochu.com/cache-control/

[TIL] Cache-Control이란?

https://mygumi.tistory.com/149

캐시 제어 응답 헤더 설정 :: 마이구미