🧰 [개발자 입문] Git 설치부터 VS Code 웹사이트 배포까지 완전 정복

작성일: 2025년 6월 30일
작성자: 박윤재
키워드: Git 설치, VS Code, GitHub Pages, 정적 웹 배포

1. 🛠️ Git 설치 방법 (Windows 기준)

✅ 공식 다운로드: https://git-scm.com/downloads

✅ 설치 시 기본 옵션 그대로 진행해도 무방합니다.
※ 권장 설정 항목:

  • ✔ Git from the command line and 3rd-party software
  • ✔ Checkout Windows-style, commit Unix-style line endings

설치 확인:

git --version

2. 💻 VS Code 설치

✅ 공식 다운로드: https://code.visualstudio.com/

✅ 추천 확장 기능:

  • Python
  • GitLens
  • Live Server
  • Prettier

3. 🔐 Git 기본 설정

처음 한 번만 실행:

git config --global user.name "박윤재"
git config --global user.email "your@email.com"

💡 GitHub의 Settings > Emails에서 noreply 이메일도 사용 가능
예: 12345678+yourname@users.noreply.github.com

4. 📁 프로젝트 폴더 생성

mkdir lotto-site
cd lotto-site
code .

5. 📄 기본 웹사이트 파일 구성

  • index.html
  • style.css
  • script.js

index.html 예시:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>로또 번호 생성기</title>
</head>
<body>
  <h1>🎲 로또 번호</h1>
  <button onclick="generate()">뽑기</button>
  <div id="result"></div>

  <script src="script.js"></script>
</body>
</html>

6. 🧠 Git 초기화 및 커밋

git init
git add .
git commit -m "🎲 최초 커밋: 로또 번호 생성기"

7. 🌐 GitHub 저장소 생성 & 연결

  1. https://github.com 에서 새 저장소 생성
  2. 아래 명령어 실행
git remote add origin https://github.com/yourname/lotto-site.git
git branch -M main
git push -u origin main

8. 🌍 GitHub Pages 배포

  1. GitHub 저장소 → Settings → Pages
  2. Source: main / (root) 선택

💡 몇 초 후 다음과 같은 주소 생성:
https://yourname.github.io/lotto-site/

9. ✅ 요약

단계 설명
Git 설치 공식 Git 다운로드 후 기본 설정
VS Code 설치 코드 작성 도구 설치
Git 설정 user.name / email 등록
GitHub 연결 remote 설정 후 push
Pages 설정 Settings → Pages로 정적 배포

10. 🧠 다음 목표

  • 로또 제외 번호 기능 추가
  • 회차별 로또 API 연동
  • 모바일 반응형 개선
  • Vue 또는 React로 리팩토링

🎉 처음엔 어려웠지만, 이 과정을 정리해두니 다음엔 10분 만에 배포할 수 있게 되었습니다.

+ Recent posts

티스토리툴바