오픈소스 라이브러리 읽어보기

 

 

naver에서 발행하는 FE News라는 뉴스를 구독 중인데, 최근에 받은 이메일 중에서 흥미로운 라이브러리를 발견해서 한번 읽어보았다. 

es-hangul 이라는 라이브러리인데, toss에서 공개한 것으로 한글을 쉽게 다룰수 있도록 돕는 Javascript 라이브러리랍니다.

초성검색, 조사붙이기 같은 한글작업을 간단하게 할 수 있는 기능을 제공합니다. 

매번 오픈소스 기여하기를 해봐야지, 혹은 오픈소스를 읽어봐야지! 생각하며 해볼려고 시도를 하면 쏟아지는 영어와 엄청난 량의 파일수에 압도되어서 늘 back을 눌렀는데 이번에는 왠지 시도해볼만한데? 라는 생각이 들어서 한번 전체적인 프로젝트를 살펴봤습니다. 

 

 

 

오픈소스 프로젝트 보는 방법

1. README 를 천천히 읽어봐라 

2. 첫번째로 봐야 할 파일은 package.json

3. 전체 프로그램이 작성된 논리구조를 파악하자

4. 찾아낸 로직영역을 한 줄 한 줄 읽어보자

5. 이해 못하는 걸 찾으면 거기에 더해진 주석을 읽어라

 

 

제가 자주 보는 한상훈님의 유튜브에 있는 영상입니다. 위에 요약된 내용이 디테일하게 아래 영상에 설명되어있습니다. 

 

 

 

위에 나온 영상을 참고해서 es-hangul 프로젝트를 읽어봤습니다. 

우선 package.json을 확인해보니  

 "scripts": {
    "build": "tsup",

...}

 

build 부분에 tsup 이 있더라고요. TypeScript 를 위한 번들러.TSUP의 주요 특징 중 하나는 별도의 플러그인 설치 없이도 TypeScript를 CommonJS와 ESM 형식의 JavaScript로 컴파일 할 수 있고, 타입 정의 파일도 자동으로 생성됩니다. 이 파일을 확인해보니 entry 파일이 index.ts 였습니다. 

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
});

 

index.ts에는 각종 주요 ts 파일들이 export 되어있었어요. 

그래서 하나씩 들어가보니 주요 함수들이 등장했습니다. 

예를 들자면 chosungIncludes.ts 파일이 초성검색을 도와주는 함수가 들어가있는 파일입니다. 

그리고 그 위로 같은 이름에 spec.ts 라는 명이 붙은 파일이 하나 더 있습니다. 클릭해보서면 test 코드라는 걸 확인하실 수 있답니다

다시 초성검색 파일로 돌아와서 보면, 또 다른 util 파일에서 가져온 함수들이 등장합니다. 

그 외에도 파일 안에서 어떤 함수들이 쓰여있는지 확인하실 수 있습니다. 

 

 

이렇게 처음부터 오픈소스 라이브러리를 읽어보는건 처음이였습니다.

이런식으로 코드를 짤 수 있구나, 아 이렇게 함수에 대한 설명을 덧붙이는구나, 테스트 코드는 이렇게도 쓸 수 있구나 등 다양한 생각이 교차했습니다. 오픈소스를 읽어보고 기여해보는 습관을 가지면 좋다고 이야기하는 포인트를 알 것 같았습니다.

로직을 하나하나 따라가면서 보려고 하니 여러 파일을 넘나들며 읽어야하고 자연스레 구조도 보게 되고 로직의 흐름도 따라가려고 생각하게 됩니다. 더 톺아보고 싶어진 프로젝트입니다.