컴포넌트 - Gravatar 프로필 카드

[cometkim]

Author의 프로필 정보 소스를 Gravatar로 사용

• Site Author
• Post Author

그냥 파일 집어넣는 것 보다 훨씬 좋다고 생각하는게,

• 일단 Author가 될 나 자신이 Gravatar로 프로필 관리를 하고 있다.
• 전세계 워드프레스 사이트들의 프로필을 책임지는 나름 믿음직한 SaaS라 생각한다.
• 그리고 혹여 Post 기여 받을일이 생긴다면, Committer 이메일 정보만으로 프로필을 만들 수 있다는 장점이 있다.

물론 Gravatar 쓴다는 가정하에 얘기므로, Fallback 프로필도 필요하다.

[cometkim]

문제는 이걸 어떤방식으로 구현하는 것이 좋냐..는 것

Gravatar 프로필 정보를 받는 데 필요한 절차는 대략 이렇다.

1. 이메일을 md5 해싱
2. 이메일 해시값을 가지고 Gravatar에 이미지나 메타데이터 요청
3. 있으면 성공할 것이고, 없으면 404

짚어볼 필요가 있는 부분이 Gatsby는 정적 사이트 생성기라 컴파일 타임에 요청해서 미리 받아놓을 수 있다는 건데

• 런타임에 이메일을 매번 md5 해시하는 것은 상당히 비효율적이다.
• 런타임에 요청 실패 볼 필요없이 컴파일 타임에 Fallback 을 결정할 수도 있다.
• 하지만 컴파일타임에 Fetch 하는 경우, 정적 프로필이 되버려 Gravatar 프로필 업데이트를 반영할 수 없다.

[cometkim]

1. 컴파일 타임에 Fetch 한 것을 Fallback 으로 사용, 런타임엔 비동기적으로 업데이트 한다.
2. md5 해시만 컴파일 타임에 미리 만든다.
3. 컴파일 타임에 Fetch 해보고, 실패하면 Fallback을 만들어 넣는다. 성공하면 2번

[cometkim]

1번이 좋아보이는데 🤔

gatsby-source-gravatar 이런거 만들어야 할 듯?

[cometkim]

캐시 컨트롤 보니까 etag는 없고, last-modified가 있다. 컴포넌트 만들면 이거 state에 넣어두고 out-dated 판별하면 될 것 같다.

[cometkim]

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/If-Modified-Since

[cometkim]

?? 잠깐만 이건 브라우저가 알아서 해줘야지 왜 직접하려고 해

[cometkim]

4. md5 해시만 미리 넣는다. 프로필 카드는 fallback으로 초기화하고 비동기 요청으로 업데이트