모던 자바스크립트 튜토리얼 (KO) Contribution

김혜지·2021년 1월 11일

어쩌다가

모던 Javascript 튜토리얼을 보며 공부를 하던 도중에, 이해가 잘 되지 않는 부분이 있었다. 모던 자바스크립트 튜토리얼 한글화 프로젝트가 오픈소스로 운영되고 있다는 것을 알고 있어서 좀 찾아보니 영어 본문을 확인할 수 있었다. 오번역의 가능성을 확인했고, 오픈소스 컨트리뷰톤에 참여헀던 경험을 되살려 컨트리뷰션을 해보기로 결심했다.

링크 정리

ko.javascript.info Repository Link
Contributing Guide Link
Dashboard Link
오번역된 글 Link
오번역된 글 영어 원본 Link
내가 생성한 Issue Link
PR Link

Issue

문제를 발견하고, 문제가 맞는 지 확인하고, GitHub 이슈를 생성한 과정까지 정리해본다.

1. 이해가 안되는 부분이 생겼다.

모던 JavaScript 튜토리얼의 Part 1.4.6 옵셔널 체이닝 '?.' 의 ?.()와 ?.[] 단락을 읽고 있었다.

위 사진에서 이해가 되지 않았던 글은 이 부분이다.

위 예시와 마찬가지로 ?.[]을 사용하면 프로퍼티 존재 여부가 확실치 않은 경우에도 안전하게 프로퍼티를 읽을 수 있습니다.

사진의 코드 예시를 보자. 5번째 줄에서 user2가 null 을 가지고 있고, 9번째 줄에서 user?.[key]의 값을 확인해보니 undefined가 나온 것을 확인할 수 있다. 글대로 해석하자면, user2 객체에 "firstName"라는 프로퍼티가 존재하지 않아서 옵셔널 체이닝을 사용해 에러 대신 undefined을 읽을 수 있는 것이다.

하지만 전체 글의 앞 부분에서 옵셔널 체이닝을 아래와 같이 설명했다.

?.은 ?. 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다. 설명이 장황해지지 않도록 지금부턴 평가후 결과가 null이나 undefined가 아닌 경우엔 값이 ‘있다’, '존재한다’라고 표현하겠습니다.

따라서 9번째 줄에서 undefined가 나온 이유는 user2가 null이기 때문이다. 즉, user2 객체의 존재 여부가 확실치 않기 때문이다.

실제로 크롬의 개발자 도구에서 확인을 해보면 다음과 같은 결과가 나온다.

let nullObj = null
let notNullObj = {
  name: "hyex"
}

nullObj.age // TypeError
nullObj["age"] // TypeError
nullObj?.["age"] // undefined

notNullObj.age // undefined
notNullObj["age"] // undefined
notNullObj?.["age"] // undefined

객체가 null이나 undefined가 아니라면, 대괄호 표기법을 통해 값을 읽으려 해도 에러가 아닌 undefined를 반환하는 것을 볼 수 있다.

2. 영문 원본 글을 보자.

이 프로젝트(모던 JavaScript 튜토리얼 한글화)의 레포지토리에 들어가면 javascript.info 링크가 걸려있는 것을 볼 수 있다. 이를 통해 번역본의 원본을 찾을 수 있었다.

Similar to previous cases, it allows to safely read a property from an object that may not exist.

이를 바로 번역기에 돌려보니 아래와 같은 해석이 나왔다.

// 1. Google translation
이전 사례와 마찬가지로 존재하지 않을 수있는 객체(Object)에서 속성(Property)을 안전하게 읽을 수 있습니다.
// 2. Papago
이전의 경우와 유사하게, 존재하지 않을 수도 있는 물체(Object)로부터 안전하게 속성(Property)을 읽을 수 있게 한다.

번역기의 해석과 내 생각을 종합해봤을때, 존재하지 않을 수도 있는 것은 프로퍼티가 아닌 객체이다.

하지만 내가 영어를 잘 못하기도 하고, that절이 object와 property 중 무엇을 수식하는지에 따라 바뀔 수 있는 뜻이라는 생각이 들어 계속 혼란스러웠다. 그래서 조심스럽게 GitHub Issue를 생성했다.

3. GitHub Issue 생성

먼저 README.md나 CONTRIBUTING.md를 훑어보았다. 모든 내용이 한글로 써있어 참 읽기 편했다. 😊 issue 생성에 대한 특별한 규칙은 없어보여서 바로 Issue Tab - New Issue 버튼을 클릭했다.

친절하게도 이슈의 주제마다 알맞는 템플릿이 주어져 있었고, 나는 오번역수정 템플릿을 사용했다.

오번역 수정 템플릿은 다음과 같이 생겼다.

<!-- 
    README.md에서 '번역 규칙'을 확인할 수 있습니다.

    번역 모범 사례를 Wiki에서 확인할 수 있습니다.
    ( https://github.com/javascript-tutorial/ko.javascript.info/wiki/%EB%B2%88%EC%97%AD-%EB%AA%A8%EB%B2%94-%EC%82%AC%EB%A1%80 )
-->

## 오번역
<!-- 번역이 잘못되거나 애매한 부분 -->

## 번역
<!-- 수정한 내용 -->

## 이슈
<!-- 그렇게 수정한 이유 혹은 관련된 이슈에 대해 적어주세요 -->

## Pull Request(PR)를 통해 수정할 의향이 있습니까?

주석에 알맞게 각 내용을 채워넣고 이슈를 생성했다!

Pull Request

이슈를 해결하기 위한 전 과정과 PR 작성까지 정리한다.

1. Project 개발 환경 준비

모든 오픈 소스 컨트리뷰션에서 공통적인 부분일 것이다.

상단 우측의 fork 버튼 클릭
내 계정에 생성된 레포지토리의 URL을 복사
git clone
먼저 프로젝트 파일을 저장할 디렉토리로 이동하는 것을 잊지 말자! 나는 Desktop 경로로 이동했다.

cd Desktop
git clone <URL>

4. 프로젝트로 이동한 뒤, 내가 작업할 branch를 생성하고 체크아웃한다.

cd ko.javascript.info
git checkout -b <branch_name>

보통 필요한 패키지를 설치하는 단계가 있지만, 이 프로젝트에 따로 설치할 것은 없어보여 생략한다.

2. 오번역 수정

사실 단어 하나만 변경하면 되는 Issue라 이렇게 거창하게 글 쓸 것도 없다 😅
내가 수정해야 할 파일을 찾아 수정하면 된다!

cd <file_directory>
vi <file_name>

vim 에디터를 사용해서 코드를 수정했다.
수정이 잘 되었는지는 git diff 명령어로 확인할 수 있다.

3. add, commit, push

commit 메시지 작성에 대한 규칙은 없어보인다. 이럴 때는 현재 올라와있는 PR의 commit 메시지를 살펴보고 비슷하게 따라하면 될 것 같다.

git add <file_directory>
git commit -m "<commit_message>"
git push origin <branch_name>

4. Pull Request

이제 내 계정의 레포지토리에 내가 생성한 브랜치와 커밋이 올라갔을 것이다. PR을 생성하기 전에 먼저 관련 규칙을 확인해야 한다.
/CONTRIBUTING.md

- 번역과 관련된 PR에는 번역 규칙을 준수하지 않은 경우 PR을 받지 않습니다.
- PR을 올릴 시 체크리스트를 꼭 확인해주세요.
- PR에는 이슈를 확인할 수 있게 의미 있는 제목과 함께 이슈넘버를 기재해주세요.
    - 예시 :
      - [과제번역] Part3. 3.5 Fetch: Cross-Origin Requests 과제 번역 #735
      - [오타수정] Part1 9.2 클래스 상속 #809
    - 승인된 PR을 참고하여 작성해주세요.
- 한국어 원본 저장소와 동기화할 때는 rebase를 사용해주세요.
  - git rebase upstream/master
- PR 리뷰를 받고 수정 작업을 완료했다면, 코멘트로 /done을 작성해주세요.(change request에서 review needed로 라벨 태그가 변경됩니다.)

꼼꼼히 확인하고, PR을 생성한다.