오픈소스 컨트리뷰톤) 첫 merge 도전하기!!!

이번 2020 오픈소스 컨트리뷰톤에서 멘티로 참가하여 ESLint에서 프로젝트를 진행하며 merge까지 하게 됐습니다!!! 😭
그래서 진행하면서 어려웠던 점, 배웠던 점을 후기로 남기려고 합니다.

1. 주제 선정하기

평소 React에 관심이 많아 eslint-plugin-react에서 이슈를 찾던 중, JSX에서 tab과 space의 간격을 동일하게 인식하는 문제를 해결하기로 결정했습니다.
그리고 혹시 다른 분들이 PR을 먼저 보낼까봐, 해결하겠다는 코멘트를 재빠르게 보내고 프로젝트를 시작했습니다.

2. 해결 과정

1) 어떻게 해결하지?

• eslint-plugin-react를 fork, clone 후 브랜치까지 생성하고 버그 재현을 먼저 진행합니다.
  보통 규칙 하나당 테스트 파일을 하나 가지고 있는데,
  저는 tests/lib/rules/jsx-closing-bracket-location.js에
  문제가 발생하는 테스트 케이스를 추가하여 에러가 발생하는 것을 확인했습니다.
  

• 이제 lib/rules/jsx-closing-bracket-location.js을 보고 코드의 어떤 부분을 수정해야 하는지 찾아봐야 합니다.
  ※ 디버깅을 통해 살펴보면 훨씬 빠르고 정확하게 확인할 수 있습니다 ⭐️⭐️⭐️⭐️⭐️
  (디버깅 방법은 밑에 자세히 적어두겠습니다!)

• 디버깅을 통해 hasCorrection(tokens, expectedLocation)에서 true를 반환하여 린트 에러를 호출하는 함수가 실행되지 않은 것을 알 수 있었고,
  그 이유는 tokens이 tab과 space를 같은 것으로 인식하기 때문이라는 것도 알게 됐습니다.

-> 에러가 발생하는 부분
if(hasCorrection(tokens, expectedLocation)) {
  return;
}
...
context.report({
  node,
  loc: tokens.closing, 

• 정규 표현식을 공부하고 tab은 -1, space는 1로 인식하도록 코드를 작성했는데,
  멘토님의 피드백을 받고, 탭의 사용 여부만 확인하여 훨씬 더 간결하게 코드를 수정했습니다.

  \s : 스페이스, 탭, 폼피드, 줄 바꿈 문자등을 포함한 하나의 공백 문자에 대응합니다.
  \t : 탭 문자에 대응합니다.

-> tab = -1, space = 1로 구별하도록 코드 작성하기

      const openingLine = sourceCode.lines[opening.line - 1];
      const closingLine = sourceCode.lines[closing.line - 1];

      const openingTabSpace = {
        space: /^\s*/.exec(openingLine)[0].length,
        tab: /^\t*/.exec(openingLine)[0].length
      };
      const closingTabSpace = {
        space: /^\s*/.exec(closingLine)[0].length,
        tab: /^\t*/.exec(closingLine)[0].length
      };
      opening.column = openingTabSpace.space === openingTabSpace.tab ? openingTabSpace.space : openingTabSpace.tab;
      closing.column = closingTabSpace.space === closingTabSpace.tab ? closingTabSpace.space : closingTabSpace.tab;



-> 피드백 후, opening, closing line에 tab이 사용됐는지만 체크하기

      const openingLine = sourceCode.lines[opening.line - 1];
      const closingLine = sourceCode.lines[closing.line - 1];

      const isTab = {
        openTab: /^\t/.test(openingLine),
        closeTab: /^\t/.test(closingLine)
      };

• hasCorrection(tokens, expectedLocation)에 usingSameIndentation 변수를 추가하여 tag-aligned 조건에서 같은 indentation을 사용했을 때만 return 할 수 있도록 추가했습니다.

        let usingSameIndentation = true;

        if (expectedLocation === 'tag-aligned') {
          usingSameIndentation = tokens.isTab.openTab === tokens.isTab.closeTab;
        }

        if (hasCorrectLocation(tokens, expectedLocation) && usingSameIndentation) {
          return;
        }

2) 디버깅은 어떻게 하지?

before
처음에는 의심가는 코드에 console.log를 입력해서 테스트를 돌려보고 출력된 내용을 보는 식으로 코드를 확인했습니다...ㅎㅎ

after
멘토님께서 chrome으로 node 디버깅하는 방법을 알려주셨습니다.

npx mocha --inspect-brk "테스트파일.js"

---

1. break point에 debugger; 을 적어준다.
2. npx mocha --inspect-brk "테스트파일.js"
3. chrome://inspect에 접속하면 디버깅을 할 수 있습니다.

---

3) 진행 하다가 방향이 헷갈리면?

에러를 수정하면서 '이 부분을 수정하는게 맞나?', '어떻게 구현해야 할까?'와 같은 질문들이 생기고 제가 하고 있는 부분에 대해 확신이 부족할 때가 있었습니다.
그때 메인테이너에게 코멘트를 남겨 물어봤는데 답변이 와서 다시 자신감을 가지고 진행했습니다.

4) 코드 수정을 올바르게 끝냈다면

테스트를 돌렸을 때 모두 통과했다는 결과를 볼 수 있습니다!

3. PR 후 Merge까지

PR을 보내고 Merge까지 오랜 시간이 걸리지 않았습니다.
2-3시간 후에 바로 답장이 오고 merge된 것을 확인했습니다. 😎

후기

멘토님에게 아침, 저녁 가릴 거 없이 계속 물어봤지만 하나하나 다 알려주신 덕분에 진짜 많이 배울 수 있었습니다. 그리고 잘하시는 멘티분들을 보면서 자극도 받고 여러번 끄덕끄덕 하며 많이 배웠습니다.
이번 경험을 계기로 오픈소스에 더 많은 기여를 해보고 싶습니다.
멘토님과 함께 해준 멘티들 모두 감사합니다!!!