Git/GitHub · Vercel · DNS : ‘배포 URL’에서 ‘내 도메인’으로

1. Git/GitHub
1-1. Gitㅡ프로젝트의 버전관리

• 소스코드(파일)의 변경 이력을 저장하는 시스템
  • 스냅샷: 특정 시점의 프로젝트 상태를 "사진 찍듯" 저장 (= commit)
    * 커밋: "프로젝트 상태(파일들의 스냅샷) + 설명(메시지) + 메타데이터(작성자/시간) + 이전 커밋과의 연결"로 이루어진 기록 단위
  • 분기Branch: 실험/기능 개발을 메인과 분리해서 안전하게 저장
• 왜 필요한가?
  • 되돌리기 가능: 어제까지 됐는데 오늘은 안됐을 때
  • 메인에 영향 없음: 기능을 추가하다가 엎어도 됨
  • 기록으로 남음: 누가/언제/무엇을 바꿨는지

1-2. GitHubㅡGit 저장소를 올려두는 클라우드 + 협업 플랫폼

• Git 저장소를 인터넷(원격)에 올려두는 서비스
• Git만 쓸 때:
  • PC가 망가지면 기록도 끝
  • 다른 PC/팀원이 접근 불가
• GitHub가 하는 일:
  • 원격 백업 (= 원격 저장소, remote repository)
  • 협업 기능 (이슈, PR, 코드리뷰)
  • 배포 연동 (Vercel 같은 서비스가 GitHub를 보고 자동 배포)

정리:

• Git: 기록하는 엔진
• GitHub: 올려두고 공유하는 플랫폼

1-3. Git의 핵심 구조와 업로드 

• Working Directory: 내가 실제로 수정하는 폴더 (작업 공간)
• Staging Area(Index): 이번 커밋에 넣을 변경분 목록
• Local Repository(.git): 커밋들이 쌓이는 내 컴퓨터 내부 DB

코드를 수정했을 때:

• git add → "이번 저장(커밋)에 포함할게"
• git commit → “한 시점 스냅샷 저장(기록 생성)”

GitHub까지 포함하면: local ↔ remote

• Local repo: 내 PC에 있는 커밋 기록
• Remote repo (GitHub): 서버에 있는 커밋 기록
  • git commit까지는 내 PC 안에서만
  • GitHub로 올리려면 git push
  • GitHub의 최신을 받으려면 git pull

1-4. 명령어 정리

git clone

• 원격(GitHub) 저장소를 처음 한 번 내 PC로 복제
  → 폴더 생성 및 remote(origin) 자동 등록

git add

• 수정한 파일 중 커밋할 것만 스테이징에 올림
• git add . : 현재 폴더 변경분 전부

git commit -m "메시지"

• 스테이징된 변경분으로 커밋(스냅샷) 생성

git push

• 로컬 커밋을 GitHub로 업로드

git pull

• GitHub(원격)의 최신 커밋을 내 로컬로 가져오고 병합
  • 협업/다른 PC에서 수정했을 때 주로 사용

git status

• 현재 상태(변경/스테이징 여부) 확인

1-5. 전체 흐름 정리

내 PC 안:

• Working Directory(수정하는 곳)
  ↓ git add
• Staging Area(커밋 대기열)
  ↓ git commit
• Local Repository(.git, 커밋 기록)
  ↓ git push
  GitHub(웹):
• Remote Repository(내 레포)

---

2. Vercel

2-1. Vercel

• 프론트엔드(특히 Next.js) 앱을 빌드해서 전 세계에 배포(호스팅)하고,
  GitHub와 연결해 자동 배포까지 해주는 플랫폼
• 하는 일:
  1. 빌드(Build): Next.js 프로젝트를 “실행 가능한 형태”로 변환
  2. 호스팅(Hosting): 빌드 결과물을 서버에 올려서 누구나 접속하게 함
     ㅡ기본 URL을 줌: 프로젝트명.vercel.app
  3. 자동 배포(CI/CD): GitHub에 push 하면 Vercel이 감지해서 자동으로 재빌드/재배포

2-2. Vercel과 GitHub

 

• GitHub Repository = 코드가 있는 원격 저장소
• Vercel = 그 레포를 읽어서 빌드/배포하는 서비스

흐름:

1. GitHub에 코드(push)
2. Vercel이 GitHub 변경을 감지(연동/권한 기반)
3. Vercel이 서버에서 빌드 실행
4. 결과물을 전 세계 CDN/서버에 배포
5. URL로 접속 가능

"배포"는 GitHub가 하는 게 아니라 Vercel이 한다.

2-3. 호스팅Hosting

• 웹 사이트를 24시간 켜져 있는 컴퓨터(서버)에 올려서,
  사람들이 인터넷으로 접속하게 하는 것

2-4. 클라우드 서비스

• 클라우드: 서버/저장소/DB/네트워크 같은 IT 자원을 필요할 때 빌려 쓰는 방식
• AWS(EC2, S3 등)처럼 "원재료(서버/네트워크)를 직접 조합"하는 형태
• Vercel처럼 "웹 배포에 필요한 걸 한 묶음으로 제공"하는 형태
  ㅡ프론트엔드 배포 특화 플랫폼

---

3. DNS

3-1. 도메인Domain

• 사람이 읽을 수 있는 형태의 웹 사이트 주소 이름
• "이름(주소)" 그 자체이지, 웹 사이트 자체가 아님
• 이 이름이 "어느 서버로 가야 하는지"를 DNS로 연결해야 함

3-2. DNS

• 도메인(이름)을 접속 대상(IP 또는 다른 hostname) 으로 바꿔주는 시스템/설정
  
  • 사람이 "www.---.com"으로 접속
  • DNS: 이 도메인은 Vercel 서버 쪽으로 보내 라고 안내
  • 브라우저: 안내받은 곳(IP/대상)으로 실제 접속
• DNS 레코드: 도메인이 어디로 연결될지 적어두는 설정 항목
  ㅡDNS 안에 들어가는 구체적인 값(데이터)
  • A 레코드: 도메인 → IPv4 주소(IP) 로 연결
    루트 도메인(example.com, @) 연결에 자주 사용
  • CNAME 레코드: 도메인(보통 서브도메인) → 다른 도메인 이름(별칭) 으로 연결
    www.example.com 같은 서브도메인을 배포 서비스로 연결할 때 많이 사용
• Vercel에 도메인 연결할 때:
  • 서브도메인: CNAME으로 Vercel이 안내하는 대상(hostname)에 연결
  • 루트 도메인(@): A 레코드(또는 ALIAS/ANAME 지원 시 그 방식) 로 Vercel이 안내하는 값에 연결

3-3. 네임서버Name Server

• 특정 도메인에 대해 DNS 질의에 답을 해주는 서버
  = "이 도메인 어디로 가야 해?"에 대해 공식 답변을 주는 곳
• 도메인에 대해 A/CNAME 같은 DNS 레코드 정보를 응답