[풀스택] 260105월 - 포트폴리오 / 협업 환경 구성(3)

2026. 7. 2. 16:46타입스크립트로 함께하는 웹 풀 사이클 개발

# 1주차 · OT & 포트폴리오 / 협업 환경 구성

[3일차] 포트폴리오 / 협업 환경 구성 (3)

26.01.05 · Part 3. 깃허브로 협업하기

📋 오늘 다뤄본 것들

오늘은 로컬 저장소를 실제 GitHub와 연결해봤다. 새 레포지토리를 만들어 연동하는 법과, 반대로 기존 레포지토리를 로컬로 clone 받는 법을 모두 실습했다. 토큰 발급, remote 연결/해제, 브랜치 생성과 이동까지 하루 만에 GitHub 협업의 기본 골격을 다졌다.

원격 연동
remote addremote -v
업로드 / 다운로드
pushpullclone
인증
Personal Access Token
브랜치
branchcheckout

🗂️ Part 3. 깃허브로 협업하기

Chapter 6. 깃허브 연동하기 — 레포지토리 생성

GitHub에서 새 레포지토리를 만드는 것부터 시작한다. 이후 두 가지 방향으로 연동을 실습했다: 새 레포지토리를 만들어 연동하기기존 레포지토리를 로컬로 받아오기다.

1
깃허브에 새 레포지토리 생성 GitHub 웹사이트에서 New repository로 빈 저장소를 만든다
2
로컬과 연결 git remote add 명령으로 로컬 저장소와 원격 저장소를 연결한다

레포지토리 연결시키기 — remote add

git remote add 원격저장소별칭 원격저장소URL 형태로 로컬과 원격(=깃허브 레포지토리)을 연결한다.

git remote add origin https://github.com/yundlab/first-repository
git remote -v
명령어 / 개념 의미
git remote -v 내 프로젝트가 어떤 원격 저장소와 연결돼 있는지 확인
fetch 서버의 코드를 가져올 때
push 로컬 컴퓨터의 코드를 업로드할 때

로컬 소스 올려보기 — push

git push 원격저장소별칭 원격저장소레포지토리명으로 로컬의 커밋을 원격 저장소에 올린다.

git push origin main

토큰 생성 — Personal Access Token

GitHub는 비밀번호 대신 토큰으로 인증한다. username은 깃허브 ID, password 자리에는 발급받은 토큰을 입력한다.

1
프로필 → Settings GitHub 계정 설정으로 이동
2
Developer settings → Personal access tokens Tokens (classic) 메뉴로 이동
3
Generate new token → classic 사용처(note)를 입력하고 유효기간을 설정해 토큰 발급
발급된 토큰은 다시 볼 수 없으니, 발급 즉시 안전한 곳에 복사해둬야 한다.

기존 깃허브 레포지토리를 로컬로 받아오기 — clone

흐름은 두 단계다: 연결소스 코드 받아오기. VS Code에서 새 창을 열고 새 폴더(GitTestClone)를 만든 뒤, 그 안에서 clone을 실행했다.

git clone https://github.com/yundlab/first-repository

수정된 코드 올리고, 수정된 코드 받아오기

수정된 코드를 올릴 때의 흐름은 다음과 같다.

1
수정 후 저장
2
소스 컨트롤 창 → Changes + 변경 내용을 스테이징
3
Commit 버튼
4
이름 작성 후 저장 + 체크 표시 커밋 메시지를 작성하고 확정
5
git log로 연결 여부 확인
6
git push origin main 원격 저장소로 업로드

자주 하는 실수 — pull 위치 문제

수정된 코드를 내려받을 때 git pull origin main을 잘못된 위치에서 실행해 꼬인 경험을 정리했다. GitTestClone 폴더에서 실행했더니 그 안에 하위 폴더(FirstRepository)가 새로 생겼고, 그 상태에서 git remote -v를 확인하면 GitTestClone 폴더 자체는 레포지토리로 연결되지 않았다고 나온다. cd FirstRepository로 들어가 확인해야 비로소 정상 연결된 걸 볼 수 있었다.

1
git remote remove origin 연결 해제. 이후 git remote -v는 아무것도 뜨지 않음
2
cd .. 후 FirstRepository 폴더 삭제 상위 폴더로 이동해 잘못 생긴 폴더 정리
3
git init GitTestClone 폴더를 깃 레포지토리로 다시 지정
4
git clone 원격저장소URL 다시 clone을 시도했지만 여전히 하위 폴더로 다운로드됨 → 다시 연결 해제 및 폴더 삭제
git clone https://github.com/preludyun/FristRepository.git
GUI로 clone해보고 나서야 원인을 알았다 — 폴더를 미리 만들지 말고, clone을 시작하는 시점에 다운로드할 폴더 자체를 새로 받아야 한다. 새 창을 열고 "Clone Repository" 버튼으로 레포지토리 URL을 입력해 클론하면, 방법은 같지만 폴더가 잡히는 위치(포커싱)가 다르다는 걸 확인했다.

정리 — 올리고 내려받기

결국 오늘 흐름은 "로컬 → 원격"(push)과 "원격 → 로컬"(clone, pull)을 반대 방향으로 실습해본 것이다.


Chapter 7. 깃 브랜치 실습 — 브랜치란?

branch(나뭇가지)라는 이름처럼, 프로젝트를 가상으로 복사해서 사용하는 개념이다.

명령어 의미
git status 내 프로젝트가 Git 기준에서 어떤 상태인지 확인
git branch 브랜치 목록 확인 (*는 현재 있는 브랜치)
git branch 브랜치명 새 브랜치 생성 (예: git branch dev)
git checkout 브랜치명 해당 브랜치로 이동 (예: git checkout dev)
git checkout - 직전에 있던 브랜치로 이동
git status
git branch
git branch dev
git checkout dev
git checkout -

✍️ 마치며

오늘은 GitHub 연동의 실전 편이었다. 특히 clone 위치를 잘못 잡아서 폴더가 꼬였던 경험이 오히려 "왜 이렇게 동작하는지"를 이해하는 데 도움이 됐다. 브랜치 개념까지 배우면서, 내일부터는 여러 버전을 병렬로 다루는 법을 익힐 준비가 된 것 같다.

🏷️ Git  |  GitHub  |  Clone  |  Push  |  Pull  |  Branch  |  Token  |  학습일지  |  데브코스