⭐ 오픈소스 기여 및 보드 사용 방법 공유 ⭐

[soobing]

오픈소스 기여하는 방법

1. eslint 관련 프로젝트 중에서 자신이 기여할 프로젝트를 찾기

eslint 관련 프로젝트로 한정하는 이유는 ? 범위가 너무 넓으면 서로 도움주기 힘들것 같음.

2. 해당 프로젝트의 github 이슈를 들어가서 해결하고자 하는 이슈를 찾기

사실 이게 젤 힘듬. 처음에는 난이도도 잘 모르겠고, 뭘 해결하면 좋을지도 잘 모르겠음. 그래서 이슈에 해결방법이 좀 제시되어 있는건을 픽하면 좋음.

3. 해결하려는 이슈가 겹치면 힘 빠지니까, 우리끼리라도 보드에 공유.

보드에 프로젝트/이슈번호/간략한 제목으로 카드 만들고 이슈화 함.
해결하려는 이슈 링크, 이슈에 대한 요약 정도 description에 쓰기

4. 이슈를 해결 하기 위해, 해당 프로젝트 fork를 뜬다.
5. 브랜치를 따서 작업하고 origin으로 pr날림
6. 본래 프로젝트 이슈에 자신이 PR 남겼다고 한번 더 알려줌.
7. merge 되면 우리 프로젝트의 이슈에 와서 어떻게 해결했는지 공유하기 (예시는 아래에)

[soobing]

이슈 해결 후 내용 정리 예시

typescript-eslint/typescript-eslint#2348 이슈 해결 후 정리

문제점

이 이슈는 Function 이라는 이름을 가진 라이브러리를 import 했을때, Function 키워드를 사용하지 말라고 에러가 뜨는 이슈이다.

보통 new, const, let 이런 문법상에서 사용중인 키워드는 변수명으로 사용하지 않기 마련인데, Function 이라는 이름으로 export 하는 라이브러리가 있었고 그런경우에 Function 생성자를 호출한 것으로 간주하여 에러를 뱉는 상황이었다.

error Implied eval. Do not use the Function constructor to create functions  @typescript-eslint/no-implied-eval

이슈 선택 과정

일단 이슈에서 힌트가 많았다. 메인테이너분이 good first issue라고 라벨도 붙여놔주셨고, 어느 코드를 참고해서 수정하면 되는지도 써주셔서 이 이슈를 선택했다.

해결과정

• 주안님이 어떤방식으로 이슈 해결해야 하는지 방향성을 제시해 주신 부분이 큰 도움이 되었다. 이슈에 참고할 코드도 있었지만, TC에서 해당 이슈를 재현시키고 그다음 코드를 수정해서 모든 TC를 통과하는지 확인하면 된다는 점이 큰 맥락을 잡는데 도움이 되었다.
• FUNCTION_CONSTRUCTOR로 파악이 된 경우에, DefaultLibrary인지(내장된 라이브러리 es6 용, es7 용...브라우져용 등등) 더블 체크를 해줘서 에러를 뱉도록 수정했다. (DefaultLibrary가 어떤 함수인지 처음에 몰라서 import한 라이브러리 함수가 맞으면 true를 반환하는줄 알고 코드를 반대로 짰었는데 주안님이 설명해주신것이 큰 도움이 되었다.)

관련된 내용 정리

1) sourceType

ESLint의 config 중에 sourceType 이라는 것이 있는데, 이게 뭔지 사실 잘 몰랐다. "script" 가 default 값이고 "module"로 설정할 수 있는데, 잘 몰랐던 이유는 너무 import/export에 익숙해져 있어서 였다.

문서를 보면 제일 명확한데 (여러 자료를 봤지만 역시 표준 docs들이 젤 이해하기가 쉬운듯)
https://javascript.info/modules-intro#what-is-a-module

요약하자면,

• sourceType은 모듈 사용 방식에 대한 config를 지정하는 것.
• 모듈 사용 방식은 두가지가 있음. script, module.
• "script"는 script 태그 내에서 module이라는 attribute를 줘서 사용하는 것이고,
• "module"은 우리가 흔히 쓰는 import/export 구문으로 사용하는 것이다.

내가 코드를 넣기 전까지 저 코드에는 다른 파일로 부터 import 해야 했던 경우가 없었기에 설정을 따로 해주지 않았고(그러니까 당연히 default인 script로 설정 되있었을 듯) JS의 import, export 구문을 사용하려면 sourceType을 module로 바꿔줘야 했었다.

2) symbol

• ES6의 primitive type으로 등록되었고, 뭔가 유니크한 값을 생성할때 사용하는건 알고있었는데~ 한번도 쓸 경험이 없어서 대체 언제 필요하고 쓰는거지? 했었는데 뭔가 노드의 타입과 같은 unique한 값을 사용해야 할때 쓰는구나~ 하고 신기했다.
• https://www.typescriptlang.org/docs/handbook/symbols.html
• 이런식으로 사용하나 보다.

// Symbols can also be combined with computed property declarations to declare object properties and class members.
const getClassNameSymbol = Symbol();

class C {
  [getClassNameSymbol]() {
    return "C";
  }
}

let c = new C();
let className = c[getClassNameSymbol](); // "C"

3) eval

• eval은 그냥 머릿속에 절대 사용하지 말것!으로 찍혀있는 함수중에 하나인데 ㅋㅋ
• 다시한번 정리해본다. 문자로 표현된 JavaScript 코드를 실행하는 함수
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval

console.log(eval('2 + 2'));
// expected output: 4

console.log(eval(new String('2 + 2')));
// expected output: 2 + 2

console.log(eval('2 + 2') === eval('4'));
// expected output: true

console.log(eval('2 + 2') === eval(new String('2 + 2')));
// expected output: false

• 근데 의문이 들었다. 왜 에러를 뱉을때 no-implied-eval에서 뱉었을까? 이것 또한 docs에 아주 잘 설명되어 있었다.
  https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-implied-eval.md
• setTimeout(), setInterval(), setImmediate, execScript(), new Function() 안에서 string으로 JS 코드를 작성해도 실행이 되기 때문에 이 아이들 관련된 에러처리를 no-implied-eval에서 하고 있었다.

4) 특정 파일만 test 돌리기

https://github.com/OSS-Contributhon/2020-private/issues/15#issuecomment-667624708

소감

• 힌트가 많은 이슈를 선정하면 좀 하기 수월한것 같다.
• 뭐든지 미루면 정말 더 하기가 어려워지는 것 같다. 다음번엔 이슈를 해결하자마자 해결과정 정리하도록 해야겠다.
• ESLint 이슈를 해결하면 JS 지식이 자동으로 느는거같아서 뿌듯하고 기분이 좋다.
• 주안님이 많이 도와주셔서 이 이슈는 잘 해결했는데, 지금 다른 이슈를 해결하다가 막히고 잘 안되니까 좀 손을 놓은거같다. 정신을 차리고 다시 도전 해봐야겠다. ㅎㅎ (포기하고 다른이슈 하고싶.. 지만 draft를 올려서 주안님께 한번 내 코드의 문제점을 여쭤봐야겠다)

[1ilsang]

기본 리뷰: https://blog.naver.com/qls0147/222087641506

AST 트리: https://astexplorer.net/

[1ilsang]

찍먹내용

• 레파지토리 찍먹하기 #62