[오픈소스] Typescript-eslint에 기여한 후기!

이번 여름에는 2020 컨트리뷰톤 "ESLint"팀에 참여하여 오픈소스 기여 활동을 하고 있다.

2018년도에 "큐브리드"팀에 참여하였을 때는 Git도 잘 몰랐던 때라 아무것도 못했었는데

이번에는 처음으로! 오픈소스에 기여를 해보았다😎

(물론 멘토님의 도움이 컸다. 감사합니다😊😊)

 

기여는 아래와 같은 단계로 진행 했다.

 

1. 프로젝트 및 이슈 선정

2. 이슈 분석

3. 이슈 해결

4. PR

1. 프로젝트 및 이슈 선정

나는 최근 React와 Typescript를 주로 사용하고 있어서, 둘 중 고민하다가 typescript-eslint 프로젝트를 보기로 결정했다.

한참 Typescript와 친해지는 중이라서.. 이슈 해결하면서 rule도 보고, eslint가 어떻게 돌아가는지 공부하면 재밌을 것 같았다!

 

typescript-eslint 프로젝트를 선택한 후에 issue를 살폈다.

bug, good first issue 태그가 붙은 것 중에 난 이 이슈를 골랐다.

이슈를 해결하는 중에 다른 사람이 PR을 올리는 슬픈 일이 생길까봐 "내가 해결할게!" 라고 코멘트를 남기고 이슈 분석을 시작했다.

(이 이슈 전에 다른 이슈를 골랐을 때 다른 사람의 PR이 올라와버렸었다😥)

2. 이슈 분석

내가 고른 이슈는 prefer-includes rule에서 에러가 발생하는 이슈였다.

다행히 메인테이너분이 나의 "내가 해결할게!" 코멘트를 확인 후 이 이슈가 어떤 방향으로 고쳐져야하는지 코멘트를 남겨주셨다.

 

메인테이너분의 코멘트

그래서 메인테이너분의 설명을 참고하여 이슈를 분석했다.

 

먼저 룰을 보면, prefer-includes rule은 includes 메소드가 있는 변수(string type)에서 어떤 글자가 포함되어 있는지 확인 할 때 indexOf 메소드가 아니라 includes 메소드 사용을 강제하는 룰이다. 또한 간단한 정규표현식의 검사에도 includes 메소드 사용을 강제한다.

//bad
str.indexOf(value) !== -1;
 
//good
str.includes(value)

 

내가 고른 이슈에서 문제는 바로 아래 케이스에서 prefer-includes 룰이 잘못된 auto fix를 하는 것이었다.

 

const pattern = new RegExp("bar")
function f(a) {
  return pattern.test(a)
}

 

즉, test 메소드의 인자로 들어간 변수의 타입을 확인하지 않아 발생하는 이슈였다.

이제 어떻게 해결할지 방향을 잡았으니 코드를 수정할 차례였다.

3. 이슈 해결

먼저 prefer-includes의 test case들이 들어있는 파일을 찾아 valid 케이스에 이슈에서 제기한 코드를 넣었다.

그리고 전체 TC를 돌렸을 때 내가 새로 추가한 TC에서만 fail이 나는 것을 확인하고 코드를 수정했다.

 

eslint의 경우 AST를 사용하므로, 나는 이슈를 해결하면서 Typescript AST Viewer를 보며 트리 노드를 확인했다.

그리고 멘토님께 Nodejs inspector로 디버깅하는 법을 배웠는데, 덕분에 빠르게 코드를 파악 할 수 있었다!

그 전까지는.. console.log로 확인했었다 ㅎㅎㅎ 

다만 나는 window 환경이라, 이런저런 에러가 발생했어서.. 이것저것 찾아보다가 아래와 같은 명령어로 실행할 수 있었다.

node --inspect-brk ../../node_modules/jest-cli/bin/jest.js --runInBand --watch ./tests/rules/prefer-includes

또한 수정한 코드를 commit하는 과정에서, commit이 되지 않아 잠시 음!? 하고 당황하였었는데 commit 메세지에 컨벤션이 걸려있어서였다.

기존 commit 로그들을 확인한 후 나도 맞춰서 commit 메세지를 작성하니 다행히 잘 commit되었다.

 

(컨트리뷰팅 가이드를 살펴보았는데, PR에 대한 가이드는 있었지만 따로 commit 메세지에 대한 가이드는 찾지 못했다.🤔)

4. PR

이후로 PR을 날리는 건 간단하다. 가이드에 따라 PR을 작성하면 된다!

코드 리뷰를 받고 수정할 점이 생기면 수정할 준비를 하고 있었는데,

다행히 바로 통과되어서 머지가 되었다.😊😊

 

| 개인적인 감상?

일전에도 혼자 오픈소스에 기여해보려고 했었는데 그때는 오픈소스에 기여하는건 뭔가,, 엄청난 일 같고 어떤 프로세스로 진행해야하는지 모르겠는 막막함이 있었다.

그런데 멘토님의 도움도 받고 다른 분들 하는 것도 구경하면서 진행하니까 혼자 시도했을 때보다는 훨씬 수월하게 진행했다!회사일이나 토이프로젝트를 개발하는 것과는 또 다른 재미도 있었다 ㅎ.ㅎ

 

무엇보다 이슈 해결을 위해 코드를 보는데 함수나 변수의 네이밍이 간결하고 확실하게 되어 있어서 너무 좋았다..항상 함수, 변수 등 코딩 할 때 네이밍이 막막한 경우가 많았는데 typescript-eslint 코드를 보면서 많이 배웠다.

 

이제 다른 이슈 찾아서 해결해야지~ 룰루~