프로젝트 : 오픈소스 기반의 웹 파이프라인 구축 (2) - MDN

 

https://developer.mozilla.org/en-US/

MDN Web Docs

MDN Web Docs란?

개발을 공부하다 보면 태그나 속성, 함수의 의미나 사용법이 헷갈릴 때가 많습니다.
이럴 때 가장 많이 참고하는 사이트 중 하나가 MDN Web Docs입니다.

---

MDN이란?

MDN은 Mozilla Developer Network의 줄임말로,
지금은 MDN Web Docs라는 이름으로 운영되고 있습니다.
**Mozilla(모질라)**에서 만든 웹 개발자들을 위한 공식 문서 사이트로,
웹 개발에 필요한 다양한 내용을 폭넓게 제공하고 있습니다.

---

어떤 내용을 담고 있을까?

• HTML: 태그별 설명, 속성, 사용법
• CSS: 속성별 설명, 예제, 동작 방식
• JavaScript: 문법, 내장 객체, 함수 설명
• Web API: fetch, localStorage 등 브라우저 제공 API 사용법
• 브라우저 호환성 정보
• 접근성, 보안, 성능 최적화 가이드 등

웹 개발을 하면서 궁금해질 수 있는 거의 모든 내용을 정리해두고 있어
웹 개발자들의 백과사전이라고도 불립니다.

---

 MDN이 필요한 순간

상황MDN에서 확인할 수 있는 내용

CSS 속성 설명이 필요할 때	border-radius, flex 등 속성별 설명 및 예제 제공
JavaScript 함수 사용법이 헷갈릴 때	addEventListener, event.preventDefault 등 코드와 함께 설명
브라우저 호환성이 궁금할 때	어떤 속성이 어떤 브라우저에서 지원되는지 표로 제공
Web API를 처음 써볼 때	localStorage, fetch 등 API 개념과 코드 샘플 제공

 

---

어떻게 검색할까?

모르는 게 생겼을 때는
**구글에 “MDN + 키워드”**로 검색하는 것이 가장 빠릅니다.

예시:

• MDN flex
• MDN localStorage
• MDN event.preventDefault

검색하면 대부분의 경우 가장 위에 MDN 문서가 나오며,
친절한 설명과 예제 코드까지 함께 제공되어 학습에 매우 유용합니다.

---

✅ 정리

MDN Web Docs는 HTML, CSS, JavaScript 등 웹 기술 전반을 다루는 공식 문서 사이트로,
웹 개발자라면 꼭 알고 있어야 할 필수 참고 자료입니다.

 

 

 

---

실습

 

mdn/translated-content

GitHub - choihyeonseo38/translated-content: The source repository of all translated content for MDN Web Docs

mdn/content 

GitHub - choihyeonseo38/translated-content: The source repository of all translated content for MDN Web Docs

두개의 파일을 내 깃허브로 포크를 한다.

 

따로 실습 폴더를 만든 뒤,

git clone https://github.com/mdn/content.git

git clone https://github.com/choihyeonseo38/translated-content.git

 git clone을 해준다. 

 

vscode에서 mdn파일을 열어 준 후

 

브랜치를 만들때는
git banch 브랜치 이름
git checkout 브랜치 이름을 해야 만들고 이동까지 하는데
git checkout -d 브랜치 이름 이렇게 쓰면 만들고 이동까지 한번에 된다.

 

[ko] 한국 첫 기여자들을 위한 가이드라인 · Issue #827 · mdn/translated-content

 

 

contribute되어보기

 

파일설정

1. .env파일 설정

2. translated-content/

3. content/경로 아래에 .env만들기

4. .env파일 작성하기

5. localhost:5042

---

이슈

이슈란 :

• 깃헙의 이슈게시판
• 프로젝트의 작업, 개선 사항, 버그 제보 등을 위한 게시판
• 담당자, 라벨 등을 이용해 분류 가능

이슈 만들기

 

1. issue_test라는 레파지토리를 하나 만든다.

2. 상단에 이슈부분으로 들어가서 이슈를 하나 만들어준다.