[오픈소스] velog에 image caption 기능을 만들고 PR날리기 까지.

블로그를 고를때 많은 고민을 했다.

`velog`로 갈지, 아니면 브런치로 갈지. 그것도 아니면 github.io페이지를 만들어서 운영할지.

실제로 gatsby의 테마를 사용해서 어느정도 꾸며두긴 했다. (dding-g.github.io)

 

결론적으로는 티스토리를 선택했는데, velog와 티스토리를 사이에 두고 많이 고민했다

velog는 피드 기능이 있어서 사람들에게 내 글을 즉각적으로 보여줄 수 있다는 장점이 있지만 광고를 붙일 수 없었고,

내가 작성한 글의 통계를 볼 수 있는 기능이 없었다.

하지만 티스토리는 광고는 붙일 수 있지만 다른 사람들에게 내 글이 전달되는 속도는 velog보다 훨씬 느렸다.

 

결론적으로 티스토리를 선택했는데, velog를 조금 사용할 때 몇 가지 글을 쓰는 중 티스토리에는 지원하는 기능이지만

velog에는 지원하고 있지 않아 오픈소스로 공개된 코드에 기여해보고 싶어졌다.

 

그 기능은 image 캡션 기능인데, 아래 이미지처럼 하단에 한줄로 이미지를 간단하게 설명하는 기능이다.

이미지 캡션을 사용해서 대충 설명하는 내용. (출처 : velog)

이렇게 이미지에 대한 설명을 간단하게 추가하는 것 만으로 글의 집중도를 높일 수 있다.

 

첫 걸음

첫 오픈소스 기여라 걱정되는 부분도 몇 가지 있었다.

혹시나 내가 기여한 부분이 잘못되면 어쩌지?
이런식으로 메인테이너의 동의를 구하지 않고 제멋대로 기능을 만들어서 PR을 날리는게 혹시 실례되는건 아닐까?

기능 QA를 빡세게 하기로 하면서 일단은 만들어보기로 했다.

메인테이너의 동의를 구하지 않고 만드는건 아직까지 걸리는 부분이다.

velog-client repository 에는 contribute에 대한 가이드라인이 따로 없어서 어떤식으로 기여해야

메인테이너분이 최대한 불편하시지 않게 코드를 보실 수 있고, 마치 한 사람이 짠 것 처럼 될 수 있는지 고민했다.

 

기여 과정

우선 오픈소스에 기여하는 과정은 아래와 같다.

와! 악필!

1. 기존 repository를 fork떠서 자신의 개인 계정으로 가지고 온 다음,
2. 코드 수정을 거쳐서 커밋을 하고
3. 다시 오리지널 메인테이너의 repositroy로 PR을 날린다.

이 때 repository마다 다른데 `CONTRIBUTE.md` 파일이 있는 레포도 있다.

여기에는 기여 방법과 어떤 컨벤션을 따라가는지를 적는데, 많은 사람이 참여하는 프로젝트이니

공통된 양식에 따라 컨벤션을 지키면서 코드를 작성하고 최대한 개인의 스타일이 뭍어나기 보단

오픈소스가 나중에도 잘 활용될 수 있기를 기원하면서 컨벤션에 맞게 코드를 잘 짜는게 중요하다고 생각한다.

[번역]오픈소스 에티켓

 

코드는 어떤 부분을 수정했지?

Pull Request

 

velog는 remark 라는 markdown parser를 사용한다.
Pure ESM project인데 이 Pure ESM이라는건 나중에 블로그에서 다시 한번 다룰 예정이다.

remark는 markdown의 문법들을 파악하고 파싱해서 html로 반환해준다.
#은 h1, ##은 h2 이런식으로.

우리는 이미지를 불러오는 부분이 필요했다.
그래서 src/lib/remark/imgCaptionPlugin.ts를 하나 추가했는데, 내용은 아래와 같다.

import visit from 'unist-util-visit';

export default function imgCaptionPlugin() {
  function transformer(tree: any) {
    const visitor = (node: any) => {
      try {
        const figcaptionEle =
          node && node.alt ? `<figcaption>${node.alt}</figcaption>` : '';

        node.type = 'html';
        node.value = `<figure><img src="${node.url}"/>${figcaptionEle}</figure>`;
      } catch (err) {
        console.log(err);
      }
    };

    visit(tree, 'image', visitor);
  }

  return transformer;
}

unist-util-visit는 tree를 탐색하는 utility 이다.
npm 설명 맨 위에도 나와 있는데 remark, retext, rehype을 사용할때만 유효하다. unist node visitor. Useful when working with remark, retext, or rehype.

 

코드를 살펴보면 아래와 같다.

1. remark를 사용해서 markdonw으로 파싱된 트리에 image 타입이 있는지 탐색하고
2. image타입이 있는 경우 해당 노드를 커스텀한 html로 바꿔준다.
3. 시맨틱한 코드를 위해 MDN figure 표준을 따랐다.

복잡한 코드는 아니다.
다만 velog 프로젝트가 생각보다 오래된 프로젝트이기 때문에 dependency 버전 차이가 조금 있었는데,
마크다운 관련된 dependency들은 대부분 예전 버전을 사용하고 있었다.
최신 버전으로 올리게 되면 node.type을 html로 하지 않고 처리할 수 있지만
버전 관리는 메인테이너가 개입하는게 좋을 것 같아 따로 하지는 않았다.

 

후기

첫 오픈소스 기여인 만큼 정말 뜻 깊다.
메인테이너분의 많이 바쁘셔서 언제 확인해주실지는 잘 모르겠지만, (이전에도 기여해주신 분들이 많지만 아직 처리되지는 않았다.)
그래도 내가 자주 사용하는 사이트에 기여를 했다는게 뿌듯하다.
앞으로도 다른 서비스들도 불편한점이 생긴다면 오픈소스 기여를 통해서 해결할 수 있는 방향이 있다면
꼭! 다시 해보고싶다.