클로드로 만든 앱 워드프레스에 게시하기

추가로 다른 앱을 깃허브에 푸시해서 웹에 배포하려고 합니다.
리포지토리부터 새로 만들어서 진행해야할 것 같은데, 조금만 달라져도 응용이 힘드네요.
자주 반복하면 어떻게 몸에 익혀지지 않을까 해서 새로 할때마다 이렇게 포스팅으로 정리해가며 반복하고 있습니다.

GitHub에 새 저장소 만들기

GitHub 접속 → New repository

• Repository name : 앱 이름
• Public / Private 선택
• ❌ README, .gitignore, license 체크하지 말기 (로컬에서 할 거라서)

생성 후 나오는 repo 주소 복사

https://github.com/huchu90/todo-manager

로컬 프로젝트 폴더로 이동

cd 프로젝트_폴더_경로

Git 초기화

git init

• 이 폴더가 이제 Git 관리 대상이 됨

불필요한 파일 제외 (.gitignore)

echo node_modules/ >> .gitignore

터미널에 node_modules/라는 문자열을 출력
그 문자열을 .gitignore 파일 맨 아래에 추가

echo .env >> .gitignore

.env라는 문자열 출력
.gitignore에 추가

또는 직접 .gitignore 파일 만들어도 OK

왜 node_modules/를 무시하나?

node_modules는:

• npm / yarn / pnpm이 자동 생성
• 용량 큼 (수백 MB 가능)
• OS, 환경마다 조금씩 다를 수 있음
• package.json만 있으면 언제든 재생성 가능

그래서 GitHub에 올리면 안됩니다.

대신 필요한 건 이 두 개:

package.json
package-lock.json (또는 yarn.lock)

.env는 왜 무시해야 하나?

.env 파일에는 보통 이런 것들이 들어있습니다.

API_KEY=sk-xxxx
DB_PASSWORD=1234
SECRET_KEY=abcd

이걸 GitHub에 올리면:

• API 키 유출
• DB 털림
• 요금 폭탄
• 보안 사고

그래서 절대 커밋하면 안 되는 1순위 파일

파일 상태 확인

git status

빨간색 = 아직 Git에 안 올린 파일들

파일 추가 (스테이징)

git add .

첫 커밋

git commit -m "Initial commit"

GitHub 저장소 연결

git remote add origin https://github.com/아이디/저장소명.git

.git 붙인 주소 vs 안 붙인 주소

GitHub 서버가 자동으로 처리해 줍니다.

• .git이 없어도
  → GitHub가 “아, 이건 Git 저장소구나” 하고 인식
• 내부적으로는
  → .git 붙은 주소로 리다이렉트됨

이유	설명
관례	Git 공식 문서, 예제 대부분 .git 사용
명확성	“이건 Git 원격 저장소다” 표시
호환성	일부 Git 서버(GitLab, 사내 Git)에서 필요
복붙 안정성	SSH/HTTPS 바꿀 때 실수 줄어듦

메인 브랜치 설정

git branch -M main

GitHub로 푸시

git push -u origin main

-u = --set-upstream
“이 브랜치는 앞으로 이 원격 브랜치를 기본으로 써라”

업스트림(upstream)이 뭐냐면

• 로컬 브랜치: main
• 원격 브랜치: origin/main

이 둘을 짝지어주는 것

한 번만 설정하면

git push
git pull

만 써도 Git이 알아서 origin/main으로 보냄/가져옵니다.

잘 커밋된 것을 확인할 수 있습니다!
이제 Netlify에서 웹배포까지 가봅시다.

---

Netlify에서 새 사이트 생성

Netlify 대시보드에서 Add new project → Imort an existing project 로 들어갑니다.
빌드 설정그리고 방금만든 repository를 선택합니다.

나중에 url 주소 변경하는거 귀찮으니까 Project name에서 미리 바꿔주고 빌드 설정을 해줍니다.

빌드 설정

여기서 앱 종류에 따라 다릅니다.

A. 순수 HTML / JS / CSS (정적 웹)

예: index.html만 있는 경우

항목	값
Build command	비워둠
Publish directory	/ 또는 .

B. React (Vite 기준)

항목	값
Build command	npm run build
Publish directory	dist

C. React (CRA – create-react-app)

항목	값
Build command	npm run build
Publish directory	build

루트에 이거 있는지 확인:

package.json

• 있으면 B or C
• 없으면 A

전 없으니까 A, 즉 정적웹의 설정을 따라갑니다.

Deploy 버튼 클릭해서 배포 완료

이후 수정 배포는 자동

git add .
git commit -m "기능 추가"
git push

Netlify가 자동으로 재배포합니다.