• 개요
  • 블로그를 주기적으로 작성하는 사람들에게 깃허브 리드미에 블로그 이력을 볼 수 있는 기능을 깃허브의 커밋 이력(일명 잔디)처럼 표시해주는 기능을 개발하고 개발기를 남겨보았다.
  • 프로토타입으로 Velog에만 적용하였는데 추후에 다양한 블로그에 적용할 수 있도록 하기 위해 Blograss라는 이름을 지었고, 추후에 다양한 형태를 지원할 수 있도록 할 예정이다.

1. Velog Server

• 먼저 Velog의 글 목록을 가져오기 위해 오픈 소스로 공개되어 있는 Velog-Server를 살펴보았다.
  • https://github.com/velopert/velog-server

1-1. 기술 스택

• TypeScript
• Apollo GraphQL
• PostgreSQL
• TypeORM
• Redis
• ElasticSearch
• Koa
• Serverless
• AWS
  • Lambda
  • SES
  • API Gateway
  • S3
  • Cloudfront

1-2. Apollo GraphQL 살펴보기

• Apollo Server Docs
  • https://www.apollographql.com/docs/apollo-server/
• Velog Client에서도 Apollo GraphQL를 사용함 (data fetch로도 사용이 가능하다고 함)
  • https://medium.com/humanscape-tech/apollo-graphql-알아보기-1eab47c7b1d7

1-3. Velog Server GraphQL 살펴보기

• GraphQL Network Inspector
  • https://chromewebstore.google.com/detail/graphql-network-inspector/ndlbedplllcgconngcnfmkadhokfaaln
  • 내 벨로그 페이지 조회 시 Request Query를 보여준다.
    • Response를 확인해보면 released_at, updated_at를 알려준다.
    • 조회하는 방법을 알면 작성 일자 파악 가능할 것 같음.
      
    • 새로고침하거나 다시 로그인해도 Variables에 cursor가 변경되지는 않음
      

• GraphQL Playground for Chrome

  • https://chromewebstore.google.com/detail/graphql-playground-for-ch/kjhjcgclphafojaeeickcokfbhlegecd
  • 실패 - 연결 안 됨

• Altair GraphQL Client

  • https://chromewebstore.google.com/detail/altair-graphql-client/flnheeellpciglgpaodhkhmapeljopja
  • 실패 - 연결 안 됨
    • 504 time out
      

• 추측 : v3의 경우 CORS나 auth가 필요한 것이 아닐까??

  • velog-server 프로젝트에서 확인해보려고 했는데 v2만 확인할 수 있었음
  • https://github.com/velopert/velog-server/tree/master/src/routes/api

• v2는 사용할 수 있었다.

  import { GraphQLClient } from "graphql-request";
  
  async function test() {
      const client = new GraphQLClient("https://v2.velog.io/graphql");
  
      const query = `query Posts($cursor: ID, $username: String, $temp_only: Boolean, $tag: String, $limit: Int) {
          posts(cursor: $cursor, username: $username, temp_only: $temp_only, tag: $tag, limit: $limit) {
            id
            title
            short_description
            thumbnail
            user {
              username
              profile {
                thumbnail
              }
            }
            url_slug
            released_at
            updated_at
            comments_count
            tags
            likes
          }
        }
  `
      const res = await client.rawRequest(query, {
         username: "velopert",
         limit:10
      });
  
      const data = res.data;
  
      console.log(data);   
  }
  
  test();

2. velog-readme-stats

• https://github.com/eungyeole/velog-readme-stats
• Velog 관련 정보를 마크다운으로 가져올 수 있는 프로젝트가 있어서 살펴보았다.

2-1. V2 RSS 반환값

• graphql말고 v2의 http 요청값도 활용할 수 있을 것 같다.

  • https://v2.velog.io/rss/dev-smile

  • 수정일은 파악하지 못해도 발행일은 파악할 수 있을 듯 (pubDate)
    - 수정일이 파악되면 좋을텐데 아쉽다.

    <rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
    <channel>
    <title>dev-smile.log</title>
    <link>https://velog.io/</link>
    <description/>
    <lastBuildDate>Sun, 17 Dec 2023 12:56:04 GMT</lastBuildDate>
    <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
    <generator>https://github.com/jpmonette/feed</generator>
    <image>
    <title>dev-smile.log</title>
    <url>https://images.velog.io/images/dev-smile/profile/9781a3e1-6d43-4b92-b786-8607e6bbaf38/smile.jpg</url>
    <link>https://velog.io/</link>
    </image>
    <copyright>Copyright (C) 2019. dev-smile.log. All rights reserved.</copyright>
    <atom:link href="https://v2.velog.io/rss/dev-smile" rel="self" type="application/rss+xml"/>
    <item>
    <title>
    <![CDATA[ 데이터 마이닝 정리 2 ]]>
    </title>
    <link>https://velog.io/@dev-smile/%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%A7%88%EC%9D%B4%EB%8B%9D-%EC%A0%95%EB%A6%AC-2</link>
    <guid>https://velog.io/@dev-smile/%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%A7%88%EC%9D%B4%EB%8B%9D-%EC%A0%95%EB%A6%AC-2</guid>
    <pubDate>Sun, 17 Dec 2023 12:56:04 GMT</pubDate>
    <description>
    ...
    </description>
    </item>
    
    ...
    
    <item>
    <title>
    <![CDATA[ 노션 - 명령어 팁 ]]>
    </title>
    <link>https://velog.io/@dev-smile/%EB%85%B8%EC%85%98-%EB%AA%85%EB%A0%B9%EC%96%B4-%ED%8C%81</link>
    <guid>https://velog.io/@dev-smile/%EB%85%B8%EC%85%98-%EB%AA%85%EB%A0%B9%EC%96%B4-%ED%8C%81</guid>
    <pubDate>Thu, 20 Jan 2022 07:52:56 GMT</pubDate>
    <description>
    ...
    </description>
    </item>
    </channel>
    </rss>

• velog 마크다운 백업을 만드신 분도 계신다.
  • https://github.com/cjaewon/velog-backup

3. SVG Markdown

3-1. Tag

• G tag (Group Tag)
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
• 애니메이션 효과도 가능한 듯
  • https://cntechsystems.tistory.com/169
  • https://cntechsystems.tistory.com/170

3-2. 잔디 그림 그리기 플로우

1. 상수 정의
   • 여러 상수가 정의되어 있으며, 이들은 잔디 차트의 수직 및 수평 간격, 월 표시 간격 등의 레이아웃을 정의
2. blograssTitle
   • 이 함수는 카드의 제목을 생성합니다. 사용자 이름을 매개변수로 받아 SVG 내의 <g> 태그로 묶인 <text> 요소를 반환합니다. 이 텍스트는 사용자의 Velog 프로필 링크를 포함합니다.
3. blograssBody
   • 잔디를 생성. 여기에 월, 요일 라벨 및 각 날짜에 해당하는 사각형(잔디)이 포함
   • 월과 요일은 정적 배열을 사용하여 생성
   • 각 월의 일수에 따라 사각형이 생성되며, total_at 배열에 있는 날짜에 따라 색상이 결정
   • total_at 배열은 사용자의 블로그 활동(게시일 및 수정일)을 나타냄
   • currentX와 currentY 변수는 그리기 위치를 추적
4. blograssStyle
   • SVG 내의 스타일을 정의합니다. 텍스트, 월 라벨, 요일 라벨, 그리고 잔디 색상에 대한 스타일이 포함
5. blograss
   • title과 body를 합쳐서blograss를 표시
   • 사용자 이름과 데이터를 매개변수로 받아 전체 SVG 요소를 반환
   • 사용자의 블로그 활동 데이터를 기반으로 total_at 배열을 생성하고, 이를 blograssBody 함수에 전달하여 본문을 생성
6. SVG 구조:
   • 최종 SVG는 카드 배경, 제목, 그리고 본문(잔디 차트)을 포함합니다.

3-3. 프로토타입

• https://blograss-weld.vercel.app/api?name=dev-smile
• 결과물
  

4. 마무리

• 추후에 추가하면 좋을 것 같은 것
  • 블로그 선택
  • 연도, 기간 선택
  • 글쓰지 않는 날의 색을 좀 은은하게 바꾸면 좋을 듯
    • 회색, 벨로그색으로 하니까 너무 휑한 느낌
    • 어두운 초록색, 벨로그색으로 하면 좀 낫지 않을까
  • 꾸준함을 보여주기 위한 표시인데, 블로그 특성 상 매일 작성하기엔 어렵다.
  • 표시 형식을 365일이 아닌 주간, 월간 방식을 추가하여 표시하여 주면 휑한 느낌을 줄일 수 있을 것 같다.