Nodejs_npm vs GitHub

✅ GitHub vs NPM 개념 정리

💡 GitHub는 "소스 코드 저장소", npm은 "패키지(라이브러리) 저장소" 역할을 함.
💡 즉, 코드 공유를 위해 GitHub를 사용하고, 재사용 가능한 기능(패키지)을 공유할 때 npm을 사용함.

📢 1️⃣ GitHub vs npm (NPMJS.com) 차이점

비교 항목	GitHub	npm (NPMJS.com)
역할	코드 저장소 (소스 코드 관리)	패키지 저장소 (라이브러리 관리)
저장하는 것	전체 프로젝트 소스 코드	재사용 가능한 기능 (패키지)
공유 대상	프로젝트 전체 코드	모듈화된 패키지 (예: React, Axios)
사용 목적	버전 관리, 협업, 오픈소스 프로젝트	라이브러리 배포 및 설치
대표 명령어	git push, git pull, git clone	npm install, npm publish
예제 사이트	github.com	npmjs.com

📌 즉, GitHub는 프로젝트 전체 소스를 관리하고, npm은 패키지(라이브러리)를 공유하는 플랫폼!

---

📢 2️⃣ GitHub (코드 저장소)

✅ GitHub는 개발자가 프로젝트의 소스 코드를 저장하고 협업하는 플랫폼
✅ 버전 관리(Git 사용) 및 코드 공유 가능
✅ 오픈소스 프로젝트를 관리하는 용도로 많이 사용됨

📌 GitHub에서 코드 관리하는 과정
1. git init → 로컬 저장소 생성
2. git add . → 변경된 파일 추가
3. git commit -m "메시지" → 변경사항 저장
4. git push origin main → 원격 저장소(GitHub)로 코드 업로드

📌 GitHub에서 코드 가져오기

git clone <저장소 URL>   # 프로젝트 다운로드
git pull origin main     # 최신 코드 가져오기

✅ 즉, GitHub는 소스 코드 저장소이므로, 개발자가 만든 코드를 저장하고 협업할 때 사용됨!

---

📢 3️⃣ npm (패키지 저장소)

✅ npm(Node Package Manager)은 JavaScript 패키지를 관리하는 플랫폼
✅ 개발자가 만든 기능(라이브러리)을 npm에 등록하고, 다른 개발자가 쉽게 설치할 수 있도록 함
✅ 대표적인 패키지: React, Express, Axios, Lodash 등

📌 npm에서 패키지 설치하기

npm install axios   # axios 라이브러리 설치
yarn add axios     # yarn을 사용할 경우

📌 npm에 패키지 업로드하기

npm publish   # 내가 만든 기능을 npm에 올리기

✅ 즉, npm은 다른 개발자와 패키지를 공유하고 설치할 수 있도록 해주는 플랫폼!

---

📢 4️⃣ GitHub vs npm (사용 예시)

✅ GitHub 사용 예시

• 오픈소스 프로젝트 저장 (React, Next.js, Django 같은 프로젝트 코드 저장)
• 팀 협업 (소스 코드 관리)
• 버전 관리 (Git을 사용하여 코드 변경 사항 추적)

📌 예제: https://github.com/facebook/react → React 공식 저장소

---

✅ npm 사용 예시

• 특정 기능(라이브러리)을 만들어서 다른 사람이 쉽게 설치할 수 있도록 배포
• 다른 사람이 만든 라이브러리(패키지)를 프로젝트에 추가하여 사용

📌 예제: https://www.npmjs.com/package/react → React 패키지 페이지

✅ 즉, GitHub는 소스 코드 저장소, npm은 패키지 저장소!

---

📢 결론

✔ GitHub는 코드 저장소, npm은 패키지 저장소!
✔ GitHub는 프로젝트 전체 코드 저장, npm은 특정 기능(패키지)만 저장!
✔ GitHub는 git push/pull, npm은 npm install/publish를 사용!

📌 즉, GitHub는 코드 저장과 협업을 위한 플랫폼이고, npm은 패키지를 관리하는 플랫폼