바이브코더를 위한 터미널 명령어

25.09.14 / JUN

터미널은 소트프웨어 개발의 조종석 같은 도구예요.
소프트웨어 개발을 처음 접하는 바이브코더에게 터미널은 낯선 환경이지만 꾸준히 활용하며 적응만 되면 생산성을 크게 높여줄 수 있어요.

P1. 바이브코더에게 터미널이란?
P2. 터미널을 활용한 React/Vite 프로젝트 관리
P3. 바이브코더의 깃허브 활용을 위한 터미널 명령어 TOP15
P4. 다른 개발자가 공개한 우수한 소스코드 활용하기

P1. 바이브코더에게 터미널이란?

1. 터미널 개요

터미널(Terminal)은 컴퓨터와 대화하는 텍스트 기반 인터페이스예요.
마우스로 클릭하는 대신, 명령어(Command)를 입력해서 폴더 이동, 파일 생성, 프로그램 실행 등을 합니다.
Mac → 기본 앱이 “터미널(Terminal)”
Windows → “명령 프롬프트(CMD)” 또는 “PowerShell”, 최근엔 Windows Terminal 많이 사용
개발자용 IDE (예: Cursor, VS Code)에도 터미널이 내장돼 있어 바로 명령어 실행 가능

👉 바이브코딩에서는 터미널을 주로

프로젝트 생성
서버 실행
패키지 설치

같은 작업에 사용합니다.

2. 터미널 입문자를 위한 핵심 명령어 TOP10

(폴더 이동 → 내용 확인 → 프로젝트 생성 → 실행 흐름에 맞춰 정리)

명령어	설명	예시
`pwd`	현재 내가 있는 폴더 경로를 보여줌	`/Users/jun/projects`
`ls`	현재 폴더 안의 파일/폴더 목록 보기	`ls` → `src App.jsx index.html`
`cd <폴더명>`	해당 폴더로 이동	`cd my-app`
`cd ..`	한 단계 위 폴더로 이동	`cd ..`
`mkdir <폴더명>`	새 폴더 만들기	`mkdir test-project`
`rm -rf <폴더명>`	폴더/파일 삭제 (⚠️ 조심)	`rm -rf dist`
`npm create vite@latest <이름>`	새 React/Vite 프로젝트 생성	`npm create vite@latest my-app`
`npm install`	필요한 라이브러리 설치	`npm install`
`npm run dev`	개발 서버 실행	`http://localhost:5173` 접속
`Ctrl + C`	실행 중인 서버 종료	dev 서버 끌 때 사용

3. 입문자 포인트

터미널은 폴더와 파일을 다루는 곳 → 기본 흐름은 “어디에 있는지(pwd/ls) → 이동(cd) → 작업 실행(npm run dev)”
잘못 입력해도 걱정할 필요 없음 → Ctrl + C로 중단 가능
프로젝트 작업할 때는 보통 순서가
1. 폴더 만들기/이동
2. 프로젝트 생성(npm create)
3. 의존성 설치(npm install)
4. 개발 서버 실행(npm run dev)

👉 요약

바이브코딩 입문자는 pwd, ls, cd, npm run dev 네 가지부터 익히면 충분합니다. 🚀

지금 바로 터미널을 켜고 pwd, ls, cd, npm run dev 명령을 실행해 보세요.

P2. 터미널을 활용한 React/Vite 작업 흐름 요약표

단계	명령어 / 키	설명
1. 실행	`npm run dev`	Vite 개발 서버를 켬 → 브라우저에서 `http://localhost:5173` 접속
2. 종료	`Ctrl + C`	실행 중인 개발 서버를 멈추고 터미널 제어권 회수
3. 재실행	`npm run dev`	서버를 다시 시작 → 코드 변경 사항 반영된 상태로 실행
4. 브라우저 새로고침	`Cmd + R` (Mac) `Ctrl + R` (Win)	서버는 켜져 있는데 화면만 갱신하고 싶을 때
5. 코드 저장 후 자동 반영	`⌘ + S` (Mac) `Ctrl + S` (Win)	파일 저장 시 Vite가 자동으로 브라우저 갱신(Hot Reload)

✅ 핵심 기억법

실행 → npm run dev
종료 → Ctrl + C
재실행 → 다시 npm run dev

즉, “dev → Ctrl+C → dev” 사이클만 기억하면 됩니다 🚀

P3. 바이브코더의 깃허브 활용을 위한 터미널 명령어 TOP15

깃허브 입문자가 꼭 알아야 할 필수 + 유용한 터미널 명령어
(깃허브 = Git 원격 저장소를 이용하는 서비스 → 터미널에서는 Git 명령어 중심으로 사용)

명령어	설명	예시
`git config --global user.name "이름"` `git config --global user.email "이메일"`	깃허브 계정 정보 설정 (최초 1회)	`git config --global user.name "jun"`
`git init`	현재 폴더를 Git 저장소로 초기화	`git init`
`git clone <URL>`	깃허브에 있는 원격 저장소 복제(다운로드)	`git clone https://github.com/user/repo.git`
`git status`	변경된 파일 상태 확인	`git status`
`git add <파일>`	특정 파일 스테이징	`git add index.html`
`git add .`	모든 변경 파일 스테이징	`git add .`
`git commit -m "메시지"`	변경 내용을 로컬 저장소에 커밋	`git commit -m "add: 로그인 페이지 구현"`
`git push origin main`	로컬 변경사항을 깃허브 원격 저장소에 업로드	`git push origin main`
`git pull origin main`	원격 저장소의 최신 코드 가져오기	`git pull origin main`
`git log --oneline`	커밋 내역 간단히 확인	`git log --oneline`
`git branch -M main`	브랜치 이름 변경(master → main)	`git branch -M main`
`git checkout -b <브랜치명>`	새 브랜치 생성 및 이동	`git checkout -b feature-ui`
`git merge <브랜치명>`	다른 브랜치의 내용을 현재 브랜치로 합치기	`git merge feature-ui`

✅ 입문자 핵심 워크플로우

프로젝트 시작 git init git branch -M main git remote add origin <깃허브URL>
변경 → 업로드 루틴 git status git add . git commit -m "메시지" git push origin main
팀 협업 시 최신 코드 가져오기 git pull origin main

👉 요약:

로컬에 저장: git add → git commit
깃허브로 업로드: git push origin main
깃허브에서 가져오기: git pull origin main

P4. 다른 개발자가 공개한 우수한 소스코드 활용하기

다른 개발자가 만든 우수한 (깃허브 리포지토리로 공개된) 프로젝트 소스코드를 나의 Cursor 프로젝트로 가져와서 실행하고, 기능을 추가한 뒤 푸시/PR까지 이어가는 핸드북용 절차 + 터미널 명령어에 대해 알아볼까요?

0) 준비물

GitHub 계정, Git 설치
Node.js LTS(≥18) & npm
Cursor 에디터

1) 리포지토리 가져오기(권장: Fork → Clone)

(A) 내 계정으로 포크

깃허브 리포 열기 → Fork 클릭
내 계정에 vibe-0912-stock-tree-map-viewer가 생김

(B) 로컬로 복제(Clone) + 원격 연결

# 1) 원하는 작업 폴더로 이동
cd ~/projects

# 2) 내 계정의 fork 리포를 클론
git clone https://github.com/<내-아이디>/vibe-0912-stock-tree-map-viewer.git
cd vibe-0912-stock-tree-map-viewer

# 3) 원본(upstream)도 연결해 최신 업데이트를 받을 준비
git remote add upstream https://github.com/junsang-dong/vibe-0912-stock-tree-map-viewer.git
git remote -v

2) Cursor에서 열기 & 실행

# Cursor 열기
cursor .

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev
# → http://localhost:5173 접속

문제 해결

포트 충돌 시: npm run dev -- --port 5174

패키지 오류 시: rm -rf node_modules && npm install

3) 주 데이터 소스 연결(선택지)

정적 JSON(기본) : public/data/에 stocks.json(티커, 섹터, 시가총액/등락률) 두고 로드
간단 API 프록시 : CORS 회피 위해 /api/prices(Vercel Serverless) 구성
실사용 API : Finnhub/Alpha Vantage 등(무료 키) → 요청은 서버 라우트에서 수행 권장

4) 기능 추가 아이디어(입문자 우선)

섹터별 필터: 체크박스/멀티셀렉트로 섹터 on/off
컬러 스케일 옵션: 등락률 기준 빨강↔초록/단색 그라데이션 토글
기간 스위치: 1D / 1W / 1M 버튼 → 데이터셋 교체
검색: 티커/종목명 입력 시 하이라이트
툴팁 강화: 시가총액, 거래대금, 등락률(%) 표시
반응형 레이아웃: 모바일/데스크톱 자동 리사이즈
새로고침: “Refresh” 버튼으로 최신 데이터 재요청

시각화 라이브러리 예시: ECharts, Nivo, D3 treemap(리포에 이미 포함된 게 있다면 그걸 사용)

5) 브랜치 전략(기능별 작업)

# main 최신화
git checkout main
git pull origin main
git pull upstream main    # 원본에 업데이트가 있으면 당겨오기

# 기능 브랜치 생성
git checkout -b feature/sector-filter

작업 후 커밋/푸시:

git status
git add .
git commit -m "feat: sector filter & color scale toggle"
git push -u origin feature/sector-filter

6) 깃허브에서 PR 열기

깃허브 리포에서 Compare & pull request → 설명/스크린샷 첨부
코드리뷰 받기 → 머지

7) 배포(Vercel)

리포지토리 Import
Framework: Vite 자동 인식
Build: npm run build / Output: dist
(API 키가 있다면) Environment Variables 설정
Deploy → URL 공유

8) 자주 쓰는 깃 명령 모음

git clone <url>                      # 리포 복제
git remote add upstream <url>        # 원본 연결
git pull origin main                 # 내 리모트에서 최신 가져오기
git pull upstream main               # 원본에서 최신 가져오기
git checkout -b feature/<name>       # 새 브랜치
git add . && git commit -m "msg"     # 변경 저장
git push -u origin feature/<name>    # 원격 푸시
git merge feature/<name>             # 브랜치 병합(로컬)
git log --oneline --graph            # 커밋 히스토리 요약

9) 체크리스트

로컬 실행(npm run dev) & 주요 페이지 정상 노출
최소 2개 기능 추가(예: 섹터 필터 + 툴팁 강화)
README에 실행 방법/스크린샷/데모 GIF 추가
브랜치 전략 사용(PR 1회 이상)
Vercel 배포 링크 제출

첫 포스팅: 25.09.14 / 포스트 문의: JUN (naebon@naver.com)