[Program][보족] GitHub 몰라도 괜찮다 (PLCLink 다운받는 법 단계별 정리)

GitHub 몰라도 괜찮다 (PLCLink 다운받는 법 단계별 정리)

이 글은 GitHub 사용법 전반을 설명하는 글이 아닙니다.

PLCLink를 받아서 실행하는 데 필요한 것만 순서대로 정리했습니다.

GitHub가 뭔지는 대충 알고 있지만,

막상 터미널에서 명령어 치는 건 익숙하지 않은 분들을 위한 글입니다.

---

GitHub가 왜 필요한가

PLCLink 코드는 GitHub에 올라가 있습니다.

github.com/Gweongooing/PLCLink

GitHub는 코드를 저장하고 공유하는 플랫폼입니다.

개발자가 만든 프로그램을 올려두면 누구든 받아서 쓸 수 있는 구조입니다.

코드를 받는 것을 clone(클론) 이라고 합니다. 복제한다는 뜻입니다.

이 글에서 실제로 쓰는 명령어는 딱 세 가지입니다.

git clone   → 코드를 처음 받을 때 (최초 1회)
git pull    → 업데이트된 코드를 받을 때
git status  → 현재 상태 확인 (선택)

 

---

1단계 : Git 설치

GitHub와 Git은 다릅니다.

• GitHub : 코드를 올려두는 웹사이트
• Git : 내 PC에서 GitHub와 연결해주는 프로그램

GitHub에서 코드를 받으려면 Git이 PC에 설치되어 있어야 합니다.

Windows

git-scm.com 접속 → Download for Windows 클릭 → 설치 파일 실행

설치 중 나오는 옵션은 전부 기본값으로 Next를 클릭하면 됩니다.

설치가 완료되면 Git Bash 라는 프로그램이 생깁니다. 앞으로 명령어는 여기서 입력합니다.

 

설치 확인:

git --version
# 출력 예: git version 2.44.0.windows.1

Mac

터미널을 열고 아래를 입력합니다.

brew install git

Homebrew(Mac용 패키지 설치 도구)가 없으면 brew.sh에서 먼저 설치합니다.

---

2단계 : PLCLink 코드 받기 (Clone)

Git 설치가 끝나면 PLCLink 코드를 받습니다. 최초 1회만 하면 됩니다.

코드를 저장할 폴더를 먼저 정합니다.

어디든 상관없습니다.

여기서는 예시로 C:\Projects 를 사용합니다.

Git Bash에서 폴더 이동하는 법

# C:\Projects 폴더로 이동하는 예시
cd /c/Projects

# 폴더가 없으면 먼저 만들기
mkdir /c/Projects
cd /c/Projects

팁: Windows 탐색기에서 원하는 폴더를 열고,
빈 공간에 마우스 오른쪽 버튼 → "Git Bash Here"를 클릭하면
그 폴더에서 Git Bash가 바로 열립니다.

 

 

Clone 실행

git clone https://github.com/Gweongooing/PLCLink.git

완료되면 PLCLink 폴더가 생성됩니다.

C:\Projects\
  └── PLCLink\          ← 생성된 폴더
       ├── backend\
       ├── frontend\
       └── requirements.txt

---

3단계 : Python & Node.js 설치 (최초 1회)

PLCLink는 백엔드(서버)와 프론트엔드(화면) 두 파트로 나뉩니다. 각각 다른 실행 환경이 필요합니다.

Python (백엔드용)

python.org → Downloads → 최신 버전 다운로드

설치 시 반드시 "Add Python to PATH" 에 체크해야 합니다.

이걸 빠뜨리면 나중에 명령어가 안 됩니다.

 

설치 확인:

python --version
# 출력 예: Python 3.11.x

Node.js (프론트엔드용)

nodejs.org → LTS 버전 다운로드 (LTS = 안정 버전)

설치 확인:

node --version   # v20.x.x
npm --version    # 10.x.x

패키지 설치 (최초 1회)

받은 코드를 실행하려면 필요한 라이브러리들을 먼저 설치해야 합니다.

백엔드 패키지:

# PLCLink 폴더로 이동 (본인 경로로 변경)
cd /c/Projects/PLCLink

pip install -r requirements.txt

프론트엔드 패키지:

cd /c/Projects/PLCLink/frontend

npm install

---

4단계 : PLCLink 실행 (매번)

터미널 창 2개를 열어야 합니다.

백엔드와 프론트엔드를 각각 따로 실행합니다.

 

터미널 창 1 : 백엔드 실행:

cd /c/Projects/PLCLink/backend

uvicorn main:app --host 0.0.0.0 --port 8765 --reload

실행되면 이런 메시지가 나옵니다:

INFO:     Uvicorn running on http://0.0.0.0:8765 (Press CTRL+C to quit)

이 창은 닫으면 안 됩니다.

터미널 창 2 : 프론트엔드 실행:

cd /c/Projects/PLCLink/frontend

npm run dev

실행되면 이런 메시지가 나옵니다:

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.x.x:5173/

두 창 모두 실행 중인 상태에서 브라우저를 열고 접속합니다.

 

접속 주소:

상황	주소
같은 PC에서	http://localhost:5173
확인 모드 (같은 PC)	http://localhost:5173/?view=1
다른 PC · 핸드폰	http://[서버 PC IP]:5173
확인 모드 (핸드폰)	http://[서버 PC IP]:5173/?view=1

서버 PC의 IP를 모르면 CMD에서 ipconfig 입력 → IPv4 주소 항목 확인

 

종료:
각 터미널 창에서 Ctrl + C

---

5단계 : 업데이트 받기 (Pull)

PLCLink가 새 버전으로 업데이트됐을 때 내 PC 코드도 최신으로 맞추는 방법입니다.

# PLCLink 폴더로 이동
cd /c/Projects/PLCLink

# 최신 코드 받기
git pull

변경된 파일 목록이 출력되면 업데이트 완료입니다.

아무것도 없으면 이런 메시지가 나옵니다:

Already up to date.

처음 clone한 직후에는 pull 할 필요 없습니다.
이후에 GitHub에 새 버전이 올라왔을 때만 하면 됩니다.

---

환경이 바뀌었을 때 (새 PC, 재설치)

PC를 바꾸거나 포맷했을 때 다시 세팅하는 순서입니다.

1. Git 설치 (git-scm.com)
2. Python 설치 (python.org) — "Add Python to PATH" 체크
3. Node.js 설치 (nodejs.org) — LTS 버전
4. git clone https://github.com/Gweongooing/PLCLink.git
5. pip install -r requirements.txt   (PLCLink 폴더에서)
6. npm install                        (PLCLink/frontend 폴더에서)

이 여섯 단계가 끝나면 바로 실행 가능합니다.

코드 자체는 GitHub에 있으니까, 어떤 PC에서도 이 순서대로 하면 됩니다.

---

TMI (자주 생기는 문제)

"git: command not found" 오류

Git Bash를 새로 열어보세요. 설치 후 기존에 열려있던 창에는 적용이 안 됩니다.

 

"uvicorn: command not found" 오류

pip install이 제대로 됐는지 확인합니다.

pip list | grep uvicorn
# 없으면 다시 설치
pip install uvicorn

 

"npm: command not found" 오류

Node.js 설치 후 Git Bash를 새로 열어야 환경 변수가 적용됩니다.

 

핸드폰에서 접속이 안 됩니다

핸드폰과 서버 PC가 같은 WiFi에 연결되어 있는지 확인합니다.

ipconfig로 확인한 IP 주소로 접속하고 있는지도 확인해주세요.

 

포트 번호를 바꾸고 싶습니다

백엔드: uvicorn main:app --host 0.0.0.0 --port [원하는 번호] --reload
프론트엔드는 frontend/vite.config.js 에서 변경 가능합니다.