Day 55 - 오픈소스와 친해지기, Markdown, Git, MDN Web Docs 기여하기

이유승·2025년 2월 25일

타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기

데브코스 웹 풀스택 개발 5기

목록 보기

55/66

* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.

* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.

📚 오픈 소스와 친해지기

📁 Intro: 오픈소스란 무엇일까?

📌 오픈소스란?

오픈 소스(Open Source)란 누구나 자유롭게 접근하고, 수정하고, 배포할 수 있는 소스코드를 의미한다.
쉽게 말해 집단지성의 결과물이다.
예를 들어, 위키피디아 같은 온라인 백과사전도 넓은 의미에서 오픈소스라고 볼 수 있다.

📌 오픈소스 기여의 장점

좋은 코드 학습: 다양한 개발자들이 만든 코드를 보고 배우는 기회
협업 방식 습득: 실무에서 사용되는 코드 리뷰 및 협업 경험
포트폴리오로 활용: 기여 이력을 개발자 이력서에 포함 가능
영어 독해 실력 향상: 대부분의 오픈소스 문서는 영어로 제공됨

📌 대표적인 오픈소스 라이선스

오픈소스는 라이선스에 따라 사용 및 배포 조건이 다르다.

라이선스	특징	예시
MIT License	무료로 사용 가능, 수정 및 배포 자유	Bootstrap
Apache License	무료 사용 가능, 특허권 포함	Android
GPL License	2차 저작물도 오픈소스로 공개해야 함	Linux Kernel

📁 오픈소스 기여를 위한 사전 지식

📌 Markdown

Markdown은 가벼운 마크업 언어로, 문서를 쉽고 간결하게 작성할 수 있도록 도와준다.
개발 도메인에서 널리 사용되며, GitHub, Notion 등 다양한 플랫폼에서 지원한다.

# 제목 (Heading 1)
## 소제목 (Heading 2)
- 목록 항목 1
- 목록 항목 2

**굵은 글씨**  
_기울어진 글씨_  
`코드 블록`

📌 Git

Git은 소스코드 변경 내역을 추적하고 관리할 수 있는 버전 관리 시스템(VCS)이다.
마치 게임의 세이브 포인트와 같은 역할을 한다.

🔧 Git 기본 명령어

명령어	설명
`git clone`	원격 저장소를 복제하여 로컬 저장소 생성
`git add`	변경된 파일을 스테이징 영역에 추가
`git commit -m "메시지"`	변경 사항을 로컬 저장소에 저장
`git push`	로컬 변경 사항을 원격 저장소에 업로드

📌 GitHub

GitHub는 Git을 기반으로 소스코드를 원격 저장소에서 관리할 수 있는 웹 호스팅 서비스이다.
많은 오픈소스 프로젝트가 GitHub를 통해 협업하고 있다.

🔧 GitHub에서 알아야 할 기능

기능	설명
Fork	원본 저장소를 복제하여 내 계정의 저장소로 가져오기
Issue	버그 리포트, 기능 요청 등을 정리하는 공간
PR (Pull Request)	코드 변경 사항을 원작자에게 병합 요청

📌 Git과 GitHub의 차이점

Git과 GitHub는 다르다. Git은 버전 관리 도구이고, GitHub는 원격 저장소를 제공하는 서비스이다.

구분	Git	GitHub
개념	분산 버전 관리 시스템	Git 저장소를 호스팅하는 플랫폼
사용 목적	로컬에서 코드 변경 사항 관리	협업 및 원격 저장소 관리
설치 필요 여부	직접 설치 필요	웹 기반 서비스

📌 Git 사용법 실습

1️⃣ Git 저장소 초기화

git init

2️⃣ 저장소 복제

원격 저장소에서 내 로컬 환경으로 코드를 가져오기 위해 git clone 명령어를 사용한다.

git clone <원격 저장소 URL>

git clone https://github.com/example/repo.git

3️⃣ 파일 추가 및 커밋

변경된 파일을 스테이징 영역에 추가한 후, 커밋(commit) 을 진행한다.

git add .
git commit -m "첫 번째 커밋"

4️⃣ 원격 저장소에 푸시

로컬에서 작업한 변경 사항을 원격 저장소로 업로드한다.

git push origin main

git push origin feature-branch

👉 feature-branch 브랜치를 원격 저장소에 올리고 싶다면 main 대신 해당 브랜치명을 입력하면 된다.

📌 Git 브랜치 관리

Git에서는 브랜치를 사용하여 독립적인 작업을 수행할 수 있다.

🔹 브랜치 목록 조회

git branch

🔹 새로운 브랜치 생성

git branch feature-branch

🔹 브랜치 이동

git checkout feature-branch

🔹 브랜치 생성과 동시에 이동

git checkout -b feature-branch

🔹 브랜치 병합 (main 브랜치로 병합)

git checkout main
git merge feature-branch

🔹 브랜치 삭제

git branch -d feature-branch

👉 병합이 완료된 브랜치는 삭제하여 정리하는 것이 좋다.

📌 GitHub에서 PR(Pull Request) 보내기

1️⃣ 내 GitHub 계정에서 원본 저장소 Fork

2️⃣ Fork한 저장소를 내 로컬 환경에 Clone

git clone https://github.com/my-account/my-repo.git

3️⃣ 새로운 브랜치 생성 후 작업

git checkout -b fix-bug

4️⃣ 커밋 후 원격 저장소로 푸시

git push origin fix-bug

5️⃣ GitHub에서 PR(Pull Request) 생성 후 원본 저장소에 병합 요청

📌 Git 오류 해결

🔹 최근 commit 메시지 수정

git commit --amend -m "수정된 메시지"

🔹 최근 commit 되돌리기 (소스는 유지, 커밋만 제거)

git reset --soft HEAD~1

🔹 강제 push (주의!)

git push --force

👉 이전 커밋을 덮어쓰기 때문에 신중하게 사용해야 한다.

📁 오픈소스 기여 마인드셋

📌 오픈소스 기여는 쉬울까? 어려울까?

👉 쉬움: 명확한 목표를 세우고, 결과보다 과정을 즐기면 된다.

📌 오픈소스 기여 방법

기여하고 싶은 라이브러리 찾기
쉬운 부분부터 기여하기
- 문서 수정, 오타 수정, 번역 등
코드 기여에 도전
- 코드 개선, 기능 추가, 버그 수정

📚 MDN Web Docs 기여하기

📁 세상에서 가장 쉬운 오픈소스 기여

📌 문서 기여부터 시작하자!

문서 관련 기여는 진입장벽이 낮다.
기여할 수 있는 프로젝트를 찾고 가이드에 따라 기여해보자.

📌 적절한 문서 기여 프로젝트 찾기

자주 사용하는 라이브러리의 공식 문서
MDN Web Docs, 모던 자바스크립트 튜토리얼 등 위키 성격의 문서
번역 기여, 오역 개선, 기술 문서 작성 등 선택 가능

📁 Contributor 되어보기

📌 Contributor란?

Contributor(기여자)는 오픈소스 프로젝트에 기여한 이력이 있는 사람을 의미한다.

📌 MDN Web Docs란?

웹 개발 자료를 제공하는 Mozilla Developer Network(MDN)의 공식 문서 사이트
누구나 문서 번역, 개선을 통해 기여할 수 있음
오타 수정부터 번역까지 단계적으로 도전 가능

📌 MDN Web Docs 기여 준비

🛠 사전 설치해야 할 도구

Git
Node.js
Yarn
VSCode

📁 MDN Web Docs 기여 실습

📌 번역 기여하기

MDN 번역 저장소에서 기여 가능

📌 가이드라인 확인

MDN 기여 가이드 참고

📌 로컬 환경 셋팅

1️⃣ Fork & Clone

git clone https://github.com/[사용자네임]/content.git
git clone https://github.com/[사용자네임]/translated-content.git

2️⃣ 작업 브랜치 생성 및 체크아웃

git checkout -b my-translation

3️⃣ 환경 변수 설정 .env 파일 생성 및 내용 추가:

CONTENT_TRANSLATED_ROOT=/Users/[사용자명]/mdn_proj/translated-content/files
EDITOR=code

4️⃣ 실행

yarn install
yarn start

5️⃣ 로컬 문서 확인

http://localhost:5042/ko/docs/Web 접속

6️⃣ 편집

화면에서 open in your editor 버튼 클릭 후 수정

📌 결론 및 다음 단계

Git의 기본 명령어를 익히고 직접 실습해보자.
브랜치를 활용하여 협업하는 연습을 해보자.
GitHub에서 PR을 활용하여 오픈소스 기여에 도전해보자! 🚀

이유승

프론트엔드 개발자를 준비하고 있습니다.

이전 포스트

Day 54 - IaC, 테라폼, Kubernetes + Terraform + Jenkins

다음 포스트