Toss Slash 라이브러리에 작고 소중하게 기여하기

나의 첫 오픈소스 기여가 toss slash라니...!! ✨✨

토스에서 slash 라는 라이브러리를 오픈소스로 공개했다.
내부 코드를 읽다보면 공부에 도움이 될 것 같아서 라이브러리 문서와 코드를 함께 읽어 보던 중 문서의 오류를 발견했다.

한국어로 설정이 되어있음에도 불구하고 영어 페이지로 라우팅이 되고 있었다.
번역이 되지 않은건가? 내가 번역해서 기여해야겠다!!!! 하면서 신나게 페이지 편집을 통해 github markdown으로 가봤지만 한국어 마크다운은 존재했다.

따라서 이 페이지만 이상한 곳으로 라우팅되는 원인을 찾아야했다.
우선 i18n으로 끝나는 다른 모든 URI와 다르게 혼자 is-mobile-phone-en으로 접근하고 있었다.
파일을 쭉 살펴보니 해당 페이지 영어 파일의 제목만 다른 파일과 조금 다른 점이 있었다.

그래서 파일명이 범인 같은데...?🕵️‍♀️ 하는 심증을 가지고 페이지가 어떻게 파일들을 렌더링하는지 찾기 시작했다.

이 문서는 docusaurus 라는 웹사이트 생성 도구를 이용하고 있는데 처음엔 이것에 대해서 알지 못해서 도대체 이 마크다운을 어떻게 렌더링하는거지???? 라며 코드를 샅샅이 뒤졌다.

slash/docs/scripts/build-docs/index 에 가보면

import { generateDocsFromJSDoc } from './generate-docs-from-jsdoc';
import { generateDocsFromMD } from './generate-docs-from-md';

async function main() {
  await Promise.all([generateDocsFromJSDoc(), generateDocsFromMD()]);
}

main().catch(error => {
  console.error(error.stack);
  process.exit(1);
});

마크다운으로 Docs를 생성하는 함수가 있다.
그래서 generateDocsFromMD라는 함수를 찾아가보면

async function generateDefaultREADMEDocs(outdir: string) {
  const filepaths = await glob(`**/README.md`, { cwd: PACKAGES_ROOT });

  await Promise.all(
    filepaths.map(async filepath => {
      console.log(`Generating docs from README: ${filepath}`);

      const source = path.join(PACKAGES_ROOT, filepath);
      const destination = path.join(outdir, filepath).replace('/README.md', '/README.i18n.md');

      await fse.ensureDir(path.dirname(destination));
      await fse.copy(source, destination);
    })
  );
}

async function generateI18nREADMEDocs(lang: string, outdir: string) {
  const filepaths = await glob(`**/README.${lang}.md`, { cwd: PACKAGES_ROOT });

  await Promise.all(
    filepaths.map(async filepath => {
      console.log(`Generating docs from README: ${filepath}`);

      const source = path.join(PACKAGES_ROOT, filepath);
      const destination = path.join(outdir, filepath).replace(new RegExp(`\\.${lang}\\.md$`), '.i18n.md');

      await fse.ensureDir(path.dirname(destination));
      await fse.copy(source, destination);
    })
  );
}

도큐사우루스의 i18n 기능을 이용하고 있는데,
파일의 path를 받아서 path에 포함되어있는 문자열을 replace해서 destination을 만들어준다.
그리고 source의 파일을 destination에 복사해준다.
파일명에 오류가 있으니 제대로 replace 되지 않아서 생기는 문제였던 것이다.

제대로 물증을 찾고 신나게 PR을 등록했고 머지되었다!!!

그리고 이제는

정상적인 URI로 접근해서 한국어로 문서가 렌더링 된다.

너무너무 사소한 부분이였지만 그래도 내가 기여한 조그만 부분이 저렇게 남게 되어서 기쁘다😁
(코드를 기여할 수 있었다면... 더더더 좋았겠지만....)

그래도 계속 오픈소스 이것저것 들여다보고 관심을 가지면 또 내가 할 수 있는 일이 생기지 않을까?! 👀✨✨