Git&Git Hub

목차(클릭하세요)

0. 핵심 요약

① git 설치

② GitHub 접속 repository(저장소) 만들기

③ 로컬의 프로젝트파일과 깃허브 연결하기

참고로 GUI로 사용하는 방식과 CLI로 사용하는 방식이 있음

[GUI]방식으로 사용하기

해당 레파지토리 사이트에서 키보드 .을 누르게 되면 .dev주소가 열림

github.dev란?

•

GitHub 저장소의 코드를 웹 브라우저에서 직접 수정 가능(VS Code 웹 버전이라 생각하면 편함)

•

 코드 실행/호스팅 불가

•

 HTML 미리보기 불가

•

 저장소에 commit/push 가능

•

예를 들어 레파지토리 주소가

◦

https://github.com/roughkyo/test_AI 라면

◦

https://github.dev/roughkyo/test_AI 가 되는 방식임

여기서 수정 후 commit + push 할수도 있음

1. Git설치

git과 git hub의 개념, 차이

•

버전 관리를 가능하게 해주는 것이 ’git’이라는 프로그램

•

. git은 로컬(사용자 PC)에 있는 파일들에 변동사항이 생길 때마다 github라는 임의의 저장소에 업로드 시켜줌

•

git은 형상 관리(Configuration Management) 툴이라고 함

•

github는 git(=버젼관리 도구)으로 관리된 정보를 백업하는 저장소(일종의 웹하드)

공식 문서: https://git-scm.com/docs

Git 설치방법 참고

설치후 사용자 이름/이메일 등록(최초 1회)

등록된 사용자 확인

•

공식 문서: https://git-scm.com/docs

2. 저장소 만들기

레포지토리?

•

깃허브라는 저장공간 내 카테고리를 구분하는 하위 공간

•

보통 프로젝트 단위로 많이 생성

레포짓 생성 후 해당 레포짓의 주소를 복사

•

레포짓 생성하기

•

생성된 레포짓 확인

•

레포짓 주소 복사: 하늘색 박스 안에 있는 주소(*저장소 주소)를 복사(나중에 필요)

1. 깃허브 핵심 요약(찐)

목차(클릭하세요)

[참고 주소]

구글 Colab과 Github 연동하는 방법

📚 목차 Step 1. Github 리포지토리 준비 Step 2. Access 토큰 생성 Step 3. 코랩의 드라이브 마운트 Step 4. Github 커밋용 폴더 생성 Step 5. 디렉토리 변경 Step 6. Git 클론 Step 7. Git 접근권한 부여 Step 8. Commit 테스트 Step 1. Github 리포지토리 준비 구글 코랩(Google Colab)과 연동할 리포지토리(Repository)를 준비합니다(그림 1). Step 2. Access 토큰 생성 Step 2-1. 개인 Setting 콘솔 접근 우측 상단 프로필 클릭 - Settings 순으로 클릭합니다(그림 2). Step 2-2. Personal access tokens 접근 좌측에 Personal access tokens..

https://heytech.tistory.com/m/393

1. Github 리포지토리 준비

•

구글 코랩(Google Colab)과 연동할 리포지토리(Repository)를 준비

2. Access 토큰 생성

2-1. 개인 개인 Setting 콘솔 접근

2-2. 개발자 셋팅으로 이동

2-3. Personal access tokens 생성

2-4. 토큰 생성하기

2. 구글 Colab과 Github 연동하기

목차(클릭하세요)

먼저 깃허브에 올린 후, 상황에 따라 배포 방법을 결정!!

1. 웹 프로젝트 유형별 권장 배포 플랫폼 정리

웹 프로젝트 유형별 권장 배포 플랫폼 정리 (2025 기준)

정리표: 프로젝트별 최적 배포 플랫폼

번호	프로젝트 종류	권장 배포 플랫폼	설명
1	HTML/CSS/JS만 포함된 정적 웹사이트	GitHub Pages	단순 포트폴리오, 정적 웹페이지 전용
2	HTML/JS 기반이고, 외부 API를 호출하거나 클라이언트에서 동작하는 동적 기능 포함	Render 권장	1. 서버(API) 요청이 포함되면 Render 필요 2. JS가 클라이언트 단에서만 동작하고, 서버 요청이 없다면 GitHub Pages 도 가능함
3	Flask (Python 웹서버 기반 앱)	Render	-Flask는 서버 실행이 필요하므로 GitHub Pages에서는 불가 -Render는 WSGI 기반 Python 앱 배포에 적합
4	Streamlit 앱 (데이터 시각화, 대화형 앱)	Streamlit Cloud Render	-Streamlit은 자체 서버가 필요한 앱이므로 정적 호스팅은 불가 - 개인/데모 목적 → Streamlit Cloud - 확장성/기타 용도 → Render

보충 설명

GitHub Pages

•

HTML/CSS/JS 기반 정적 사이트에 가장 적합

•

외부 API를 fetch()로 호출하는 정도의 동작은 문제 없음

◦

 클라이언트(브라우저)에서 JS로 외부 서버에 요청을 보내고, 받은 데이터를 화면에 표시만 하는 방식

◦

백엔드 서버나 DB 없이, JS가 외부에 요청만 보내는 구조일 때

◦

JS에서 https://api.weatherapi.com 같은 외부 주소에 요청 → 날씨 정보 받아와서 페이지에 출력하는 경우

•

Python, PHP, Flask 등의 서버 사이드 실행은 불가

Render

웹프로젝트 유형별 배포(Yangphago_st)

목차(클릭)

보다 쉽게, 보다 편하게

1. 개념

VS Code "소스 제어" (Git 기본 기능)

소스 제어란?

VS Code에 내장된 Git 기본 조작 도구

→ 코드 수정 내역을 관리하고 GitHub와 연동하여 버전 관리(Version Control) 가능

GitLens 기본 개념

GitLens는 Git을 위한 최고의 확장프로그램

항목	설명
GitLens란?	VS Code 확장 프로그램, Git 히스토리 시각화 도구
어떤 기능?	커밋 히스토리, 브랜치 비교, 변경 내용 라인별 주석, blame 보기
왜 사용하나?	VS Code 안에서 Git 히스토리를 쉽게 확인하고, 누가 어떤 코드를 바꿨는지 바로 볼 수 있음

1-1. 차이점

항목	소스 제어 (Source Control)	GitLens
기본 기능	Git 커밋, 푸시, 풀, 브랜치 생성 및 전환	커밋 히스토리, blame(라인별 수정자), 그래프 시각화
설치 여부	VS Code에 기본 내장	별도 설치 필요 (GitLens 확장 프로그램)
커밋/푸시/풀	가능	직접 커밋/푸시는 안 됨 (소스 제어와 함께 사용)
라인별 수정자(blame)	지원 안 함	코드 라인 옆에 수정자, 수정 시간 표시
커밋 히스토리 확인	파일 히스토리 직접 확인 불가	파일별/폴더별 커밋 히스토리 상세 확인 가능
커밋 그래프(visualize)	지원 안 함	브랜치 흐름, 머지 그래프 시각화 제공
브랜치 비교	기본 비교 기능만 제공	브랜치 간 변경사항 상세 비교 가능
변경 파일 관리	변경된 파일 감지, 스테이지, 커밋, 푸시 가능	변경 파일 스테이지/커밋 기능 없음

1-2. vsc소스제어

클라우드 드라이브는 뭔가 에러가 발생하니 로컬에서 진행

•

vsc는 터미널 기능뿐만 아니라 깃과 연동되어 소스를 관리하는 기능을 가지고 있음

깃렌즈

1. 깃허브 핵심 요약(찐)

2. 구글 Colab과 Github 연동하기

웹프로젝트 유형별 배포(Yangphago_st)

깃렌즈