[알토르] 4주차 과제 : Github와 Vercel 연동

1. 채팅창 레이아웃 만들기

(AI 도움 받아서 구현 -> CursorAI, Claude)

 

우선 사이트 우측 하단에 레이아웃 생성함. 실제 작동은 아직 안 됨.

 

---

2. 개념정리 (복습용)

 

Git : 파일의 변경 사항을 추적·관리해 주는 분산 버전 관리 시스템

// 게임의 '세이브 포인트'처럼, 코드의 역사를 기록하여 언제든 과거로 되돌아가거나 여러 갈래로 나누어 작업

 

Github : Git으로 관리하는 프로젝트를 인터넷에 올려둘 수 있는 클라우드 기반 웹 서비스

// 내 코드를 온라인에 백업. 다른 개발자들과 코드를 공유하고 협업 할 수 있게 해주는 '개발자들의 SNS 겸 클라우드 드라이브'

 

git clone : GitHub에 있는 프로젝트 파일과 Git 버전 기록 전체를 내 컴퓨터로 복제하는 명령어

// 다른 사람의 프로젝트나 내 기존 프로젝트를 새로운 컴퓨터에서 시작할 때 사용

 

add (git add) : 수정하거나 새로 만든 파일을 다음 버전(커밋)으로 저장하기 위해 '준비 영역(Staging Area)'에 올리는 명령어

 

// 버전(커밋) : Git은 파일의 상태를 사진 찍듯이 저장. 이 저장 한 번을 커밋(commit)이라고 부름.

[ 파일 수정 -> git add로 준비 -> git commit으로 저장 -> 새로운 버전(커밋) 생성 ]

 

pull (git pull) : GitHub에 업데이트된 최신 변경 사항을 내 컴퓨터의 코드로 가져와서 합치는 명령어

// 다른 팀원이 코드를 수정해서 GitHub에 올렸을 때, 내 컴퓨터 코드도 최신화하기 위해 사용

 

push (git push) : 내 컴퓨터에서 작업하고 확정(commit) 지은 코드의 변경 사항들을 GitHub에 업로드하는 명령어

 

Vercel : 웹사이트를 빠르고 간편하게 인터넷에 배포할 수 있도록 도와주는 클라우드 플랫폼 서비스

// GitHub와 연결해 두면 코드 push할 때마다 자동으로 변경 사항을 감지, 웹사이트를 새롭게 업데이트 해줌

 

호스팅 : 내가 만든 웹사이트나 애플리케이션을 전 세계 누구나 인터넷을 통해 접속할 수 있도록 서버의 공간을 임대해 주는 서비스

(ex. Vercel, AWS, 카페24)

 

클라우드 :  인터넷을 통해 서버, 스토리지, 데이터베이스, 네트워킹, 소프트웨어, 분석, 인텔리전스 등의 컴퓨팅 서비스를 제공하는 것

 

[ 참고 : AWS가 정의하는 클라우드 ]

클라우드 컴퓨팅은 IT 리소스를 인터넷을 통해 온디맨드로 제공하고 사용한 만큼만 비용을 지불하는 것을 말한다. 물리적 데이터 센터와 서버를 구입, 소유 및 유지 관리하는 대신, Amazon Web Services(AWS)와 같은 클라우드 공급자로부터 필요에 따라 컴퓨팅 파워, 스토리지, 데이터베이스와 같은 기술 서비스에 액세스할 수 있다.

---

3. Vercel, Github에 프론트엔드 프로젝트 배포 해보기

 

[프로젝트 GitHub에 올리기]

1. Git 초기화 (로컬 프로젝트를 Git 저장소로 만들기)

프로젝트 폴더에서 터미널 실행:
git init
git add .
git commit -m "first commit"

 

2. GitHub 저장소 생성

GitHub 접속
New repository 클릭
Repository name 입력
Public 선택
Create repository

 

3. 원격 저장소 연결 (SSH 기준)

git remote add origin git@github.com:아이디/레포이름.git
git branch -M main
git push -u origin main

 

-> GitHub에 코드 업로드 완료

 

4. Vercel 가입 & GitHub 연결
https://vercel.com 접속
GitHub 계정으로 로그인
GitHub 권한 승인

 

5. Vercel에서 프로젝트 Import
Add New → Project
Import Git Repository
배포할 레포 선택

 

//Next.js는 Vercel과 가장 최적화된 프레임워크이기 때문에

별도의 설정 없이 바로 배포가 가능함

-> Deploy 버튼 클릭

 

6. 자동 배포 완료

배포 URL 생성
GitHub에 push 할 때마다 자동 재배포

 

// 배포 후 수정 방법(자동재배포)

git add .
git commit -m "update"
git push

 

->GitHub에 push하면 Vercel이 자동으로 다시 배포

 

라이브 데모 : https://portfolio-web-project-nine.vercel.app

Github 저장소 : https://github.com/chanthedev/portfolio-web-project

---

GitHub와 Vercel을 연동하면 CI/CD 환경이 자동으로 구축되며,
코드를 push하는 것만으로 배포가 자동화된다.

(CI/CD : 지속적 통합 및 지속적 제공/배포)