두 번째, 오픈소스 컨트리뷰션

geonmyung·2020년 10월 10일

오픈소스 컨트리뷰션

목록 보기

2/2

2020 오픈소스 컨트리뷰톤를 하며 오픈소스 기여에 많은 재미를 느꼈다.
그래서 활동이 종료된 후에 스스로 기여를 해보기로 했다!

1. 주제 선정하기

eslint-plugin-react에서 연산자 다음 줄에 indentation이 제대로 적용되지 않는 문제를 선택했다. 되도록이면 React와 관련된 오픈소스를 기여하고 싶었고 그 중에서 indentation과 관련된 버그가 재밌어보였다!

2. 해결 과정

1) 테스트 케이스 추가하기

테스트 케이스 추가 및 에러가 발생하는지 확인하기!

2) 에러 발생 부분 찾기

이제 코드를 보고 어느 부분을 수정해줘야 하는지 찾아야 한다.
추가한 테스트 케이스를 report 함수에서 린트 에러를 호출해줘야 하는데 그렇지 않고 있다.
checkNodesIndent(nodes, indent)의 if문에서 에러가 발생하는 것 같다.

if (
  node.type !== 'ArrayExpression' && node.type !=='ObjectExpression'
  && nodeIndent !== indent && astUtil.isNodeFirstInLine(context, node)
) {
  report(node, indent, nodeIndent);
}

if문의 조건 중, nodeIndent !== indent 부분을 이용해서 린트 에러를 호출해주자!

3) 코드 수정하기

?, :을 구별하기 위해 정규 표현식을 공부했다.
그리고 아래의 useOperator을 추가해줬는데, 만약 코드의 앞 부분에 ?,:이 있다면 true을 가지게 된다.

  const useOperator = /^([ ]|[\t])*[:]/.test(src) || /^([ ]|[\t])*[?]/.test(src);

그리고 checkNodesIndent(nodes, indent)에서, 윗 줄에는 연산자가 사용된 기록이 있고 현재 줄은 연산자를 사용하지 않았다면 추가로 indentSize를 더 더해주도록 코드를 수정했다.
마지막으로 테스트 케이스를 더 추가해주고 모두 패스하는지 확인!

3. PR ➜ Merge

이번에는 저번과 다르게 Merge까지 5~6일 정도에 시간이 걸렸다. 정말 그때까지 조마조마하면서 계속 Merge가 됐는지 확인했던 것 같다. 딱 Merge가 됐을 때 그 뿌듯함이 오픈소스 기여의 매력인 것 같다.

느낀점

드디어 컨트리뷰터 목록에서 스크롤을 내리면 내 아이디가 보인다..ㅎㅎㅎ
우선 30위 안에 드는 것으로 나만의 목표를 잡았다 🤔
그리고 React, JavaScript를 더 공부해서, 버그 뿐만 아니라 기능 추가부터 문서 수정까지 진행하면서 다양한 부분에서 기여를 하고 싶다!!!