[mac OS]깃 & 깃허브 실습

💻 mac OS 기반 깃 깃허브 활용한 프로젝트 실습

👉 깃(Git) 깃허브(Github)를 처음 배우는 학습자들에게 분명 도움이 될 수 있는 깃(Git)과 깃허브(Github)를 위한 express.js 프로젝트입니다.

 

🔍 Express.js

👉 Express.js 는 웹 애플리케이션과 API를 빠르고 간단하게 개발하기 위해 Node.js 기반 웹 애플리케이션 프레임워크입니다.

 

🔍 express-generator 도구

👉 express-generator는 Express.js 애플리케이션 기본 구조와 파일을 자동 생성해 주는 유용한 도구로서, 애플리케이션을 만들 때 사용됩니다.

 

🎯 깃(Git) 깃허브(Github) 연습을 위한 필요한 환경 구축 및 설치

✅ 체크 포인트

1️⃣ mac OS 터미널 실행 및 명령어 순서대로 입력합니다.

// Node.js 설치
brew install node

// version 확인 만약, version 확인 안되면 node 설치 실패이기 때문에 재설치 필요합니다.
node --version

// 새 폴더 생성(폴더명을 정하세요)
mkdir "새 폴더"

// 새 폴더 이동
cd "새 폴더"

// sudo npm 명령어 사용 express-generator 도구 전역 설치
sudo npm install express-generator -g

 

2️⃣ 새 Express.js 웹 애플리케이션 프로젝트 생성합니다.

// 웹 애플리케이션 프로젝트 생성
express github --no-view

3️⃣ 새로 만든 "새 폴더" 이동한 후,

 

4️⃣ "패키지 설치"합니다.

// 패키지 설치
npm install

 

5️⃣ express 서버 실행합니다.

// localhost:3000 서버 실행
npm start

 

6️⃣ 웹 브라우저(Chrome) 주소 창 localhost:3000 입력 및 확인

지금까지 내 컴퓨터에서 프로젝트 개발을 위한 작업 파일들이 내 컴퓨터 git-github-project 폴더 안 저장 되어 있습니다.

[git-github-project 폴더] - [github 폴더]

 

🎯 깃 지역 저장소(Git Local Storage) 파일 환경 설정

✅ 체크 포인트

 

1️⃣ 깃 지역 저장소(Git Local Storage) 생성

// Git 협업 버전 관리를 위한 저장소 생성 initialized(초기화하다)
git init

 

2️⃣ 깃 사용자 등록 및 사용자 등록 확인

// 깃 사용자 등록
git config user.name "사용자명"

// 깃 사용자 Email 등록
git config user.email "E-mail"

// 사용자 등록 확인
cat .git/config

깃 로컬 사용자 등록 확인 화면

3️⃣ [New repository] 클릭 - [Repository Name] github 입력 - [Create repository] 클릭

깃허브 원격 저장소 생성합니다.

깃허브 원격 저장소 생성 화면

4️⃣ "내 컴퓨터 저장소"와 "깃허브 원격 저장소" 연결합니다.

git remote add origin "깃허브 원격 저장소 URL"

[remote "origin"] 추가된 정보 확인 화면

5️⃣ .gitignore 파일을 생성합니다.

// .gitignore 파일 생성
touch .gitignore

// .gitignore 파일 수정
nano .gitignore

6️⃣ 깃 파일 등록 및 커밋 생성

// 현재 작업 상태 확인
git status

// 변경된 <모든 파일> 추가
git add .

7️⃣ 커밋 메시지 등록

// 커밋
git commit

// log 확인
git log

커밋 메시지 "Add initial files plus .gitignore"

8️⃣ 깃 브랜치 main 설정

// Git branch master 👉 main 설정
git branch -M main

9️⃣ 깃허브 원격 저장소 커밋을 푸시합니다.

git push origin main

깃 허브 원격 저장소 커밋ing

✅ 깃 허브 원격 저장소에 최종 반영된 커밋입니다.

깃 허브 원격 저장소 반영된 커밋 폴더 및 파일

🔟 mac OS 터미널 npm start 실행 및 웹 브라우저 localhost:3000 접속합니다.

// npm 명령어 실행
npm start

localhost:3000 페이지 제대로 작동하는 화면