[16주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 72

🌐 MDN Web Docs 기여 실습 후기 & 오픈소스 입문 가이드

📌 개요

이번에 MDN Web Docs 기여 실습을 진행하면서
오픈소스에 기여하는 전체 흐름을 직접 경험해봤다.

단순히 코드를 작성하는 것이 아니라,

• 이슈를 만들고
• 로컬 환경을 세팅하고
• 수정 후 PR을 보내는 과정까지

실제 협업 프로세스를 이해할 수 있었던 경험이었다.

---

🧩 진행 과정 정리

1️⃣ MDN Web Docs 기여 개요

MDN은 전 세계 개발자들이 사용하는 대표적인 문서 사이트로,
누구나 문서를 수정하거나 개선할 수 있는 오픈소스 프로젝트다.

👉 즉,

“코드가 아니어도 기여할 수 있는 오픈소스”

라는 점이 특징이다.

---

2️⃣ 로컬 환경 세팅

기여를 위해 먼저 로컬 환경을 구성했다.

기본 흐름

 

git clone (fork한 레포)
cd 프로젝트
npm install
npm run dev

 

이 과정에서 느낀 점:

• 오픈소스는 환경 세팅이 절반이다
• README를 잘 읽는 습관이 중요하다

---

3️⃣ 에디터 실행 오류 해결

Open in your editor 실행 중 오류가 발생할 수 있는데,
이 과정에서 환경 변수나 경로 문제를 직접 해결해야 했다.

👉 여기서 배운 점:

• 단순 실행이 아니라
  환경 문제를 스스로 해결하는 능력이 중요하다

---

4️⃣ 이슈(Issue) 이해하기

오픈소스에서는 작업을 바로 하지 않고
이슈를 먼저 생성한다.

이슈란?

• “이 작업을 할게요”라고 알리는 것
• 버그 / 개선사항 / 기능 요청 등 기록

예시

 

- 문서 오타 수정
- 코드 예제 개선
- 설명 추가

 

👉 핵심:

협업을 위한 "작업 예약 시스템"

---

5️⃣ 이슈 게시판 실습

직접 이슈를 등록하면서 느낀 점:

• 제목은 명확하게
• 내용은 구체적으로
• 다른 사람이 이해할 수 있게 작성

👉 좋은 이슈의 특징

• 무엇을 수정하는지 명확
• 왜 필요한지 설명 있음
• 재현 방법 또는 근거 존재

---

6️⃣ PR(Pull Request) 보내기

수정 작업 후 PR을 생성했다.

PR 흐름

 

git add .
git commit -m "[docs] 수정: 오타 수정"
git push origin 브랜치명

 

그리고 GitHub에서 PR 생성

---

7️⃣ PR에서 이슈 활용하기

PR을 만들 때 이슈와 연결한다.

 

Closes #이슈번호

 

👉 효과:

• PR merge 시 자동으로 이슈 닫힘
• 작업 흐름 추적 가능

---

💡 느낀 점

✔️ 오픈소스는 코드만 잘한다고 되는 게 아니다

• 커뮤니케이션 능력
• 문서 이해력
• 협업 방식

이 더 중요했다.

---

✔️ 작은 기여가 시작이다

처음에는

• 오타 수정
• 문장 개선

같은 작은 기여부터 시작했지만

👉 이것도 충분히 의미 있는 기여였다.

---

✔️ 실무와 거의 동일한 경험

이번 실습을 통해:

• 이슈 기반 개발
• PR 리뷰 흐름
• Git 협업 방식

👉 실제 회사에서 사용하는 프로세스를 경험할 수 있었다.

---

🚀 앞으로의 방향

이번 경험을 바탕으로

• 더 큰 오픈소스 프로젝트 참여
• 코드 기여 도전
• 문서 개선 지속

을 목표로 해볼 예정이다.

---

✨ 마무리

MDN 기여 실습은 단순한 과제가 아니라
오픈소스 세계에 입문하는 첫 경험이었다.

👉 만약 오픈소스를 시작하고 싶다면

“작은 수정부터 시작해보기”
이게 가장 좋은 방법이다.