GitHub에 있는 프로젝트를 내 컴퓨터로 가져와서 실행하는 과정은 개발을 시작할 때 반드시 익혀야 하는 기본 단계입니다. 하지만 처음 접하시는 분들은 “어디서부터 시작해야 하는지”, “왜 폴더가 두 개 생기는지”, “연결은 제대로 된 건지” 등 여러 부분에서 혼란을 겪는 경우가 많습니다.
이 글에서는 GitHub에 있는 프로젝트를 로컬 환경에 가져오는 과정을 초보자 기준에서 단계별로 정확하게 설명드리겠습니다.
1. 목표
이번 작업의 목표는 다음과 같습니다.
- GitHub에 있는 프로젝트를
- 내 컴퓨터로 가져오고
- 실행까지 확인하는 것
즉, 단순히 파일을 다운로드하는 것이 아니라, GitHub 저장소와 연결된 상태로 프로젝트를 가져오는 것이 핵심입니다.
2. 전체 흐름 이해하기
전체 과정은 크게 세 단계로 나눌 수 있습니다.
- 폴더 만들기
- GitHub 코드 가져오기 (clone)
- 실행 확인
이 세 단계만 이해하시면 GitHub 연동의 기본은 끝입니다.
3. 1단계: 폴더 만들기
먼저 터미널을 열고 아래 명령어를 입력합니다.
cd 폴더명
각 명령어의 의미는 다음과 같습니다.
- mkdir : 새로운 폴더를 생성합니다
- cd : 해당 폴더로 이동합니다
이 단계는 프로젝트를 정리된 위치에 두기 위한 준비 과정입니다.
다만, 이 과정은 필수는 아닙니다. 더 깔끔한 방법이 있기 때문에 다음 단계에서 함께 설명드리겠습니다.
4. 2단계: GitHub 코드 가져오기 (핵심)
GitHub에 있는 프로젝트를 가져오는 핵심 명령어는 다음과 같습니다.
깃허브에서 'Code' 를 클릭 -> url 주소 복사를 하면 됩니다.
아래는 요새 핫한 Korean-law-mcp 의 깃허브 레포지터리 주소입니다.
이 명령어를 실행하면 GitHub에 있는 프로젝트가 내 컴퓨터로 복사됩니다.
결과 구조
명령어 실행 후 폴더 구조는 다음과 같이 생성됩니다.
└── 폴더명/
├── package.json
├── src/
└── ...
즉, 폴더 안에 동일한 이름의 폴더가 하나 더 생깁니다.
5. 더 깔끔한 방법 (추천)
위와 같은 중첩 구조를 피하고 싶다면 아래 명령어를 사용하는 것이 좋습니다.
여기서 중요한 것은 마지막의 .입니다.
이 점 하나 때문에 다음과 같은 차이가 발생합니다.
- . 없이 실행 → 폴더 안에 또 폴더 생성
- . 포함 실행 → 현재 폴더에 바로 복사
따라서 미리 폴더를 만들어두고 그 안에서 .을 붙여 실행하는 방법이 가장 깔끔합니다.
6. 핵심 개념: clone의 의미
git clone은 단순히 파일을 다운로드하는 명령어가 아닙니다.
이 명령어는 다음 두 가지를 동시에 수행합니다.
- GitHub에 있는 코드 복사
- GitHub 저장소와 연결
즉, 이후에 코드를 수정하고 다시 GitHub로 업로드(push)할 수 있는 상태까지 한 번에 만들어줍니다.
7. 3단계: 정상 연결 확인
GitHub와 정상적으로 연결되었는지 확인하려면 아래 명령어를 실행합니다.
정상적으로 연결되었다면 다음과 같은 결과가 출력됩니다.
이 결과가 보이면 GitHub와 로컬이 정상적으로 연결된 상태입니다.
8. 4단계: 프로젝트 실행
React나 Next.js 기반 프로젝트라면 아래 명령어를 순서대로 실행합니다.
npm run dev
각 명령어의 역할은 다음과 같습니다.
- npm install : 필요한 라이브러리 설치
- npm run dev : 개발 서버 실행
실행 후 브라우저에서 해당 주소로 접속하면 프로젝트를 확인할 수 있습니다.
9. 자주 발생하는 문제
1) Git이 설치되지 않은 경우
이 경우에는 Git을 설치해야 합니다.
2) 권한 문제
GitHub 저장소가 private인 경우 로그인 또는 권한 인증이 필요합니다.
3) node_modules가 없는 경우
프로젝트 실행 시 오류가 발생한다면 아래 명령어를 반드시 실행해야 합니다.
10. 정리
GitHub 프로젝트를 로컬로 가져오는 과정의 핵심은 다음 한 줄로 정리할 수 있습니다.
- git clone은 단순 다운로드가 아니라
- GitHub와 연결된 상태로 프로젝트를 복사하는 명령어입니다
11. 마무리
처음에는 단순한 명령어 하나도 어렵게 느껴질 수 있지만, 이 과정을 몇 번 반복하면 자연스럽게 익숙해집니다. GitHub와 로컬 환경을 연결하는 것은 모든 개발의 시작점이므로 반드시 정확하게 이해하고 넘어가시기를 권장드립니다.
'front-end development' 카테고리의 다른 글
| 웹페이지 기획과 사용자 경험(UX) 디자인, 그리고 실제 구현 과정에서 자주 쓰이는 핵심 용어들 (1) | 2026.04.08 |
|---|---|
| border-radius 값에 따른 테두리 변경 바로 테스트해보기 (0) | 2026.02.04 |
| JavaScript DOM 완벽가이드 - Part 2: DOM 트리 구조 이해하기 (0) | 2026.01.24 |
| JavaScript DOM 완벽가이드 - Part 1: DOM이란 무엇인가? (개념 이해) (0) | 2026.01.23 |
| JavaScript console.log(): 개발자의 필수 도구 (0) | 2026.01.22 |