[V0_FILE]typescriptreact:file="app/page.tsx" import TutorialContent from "../components/TutorialContent" import ProgressBar from "../components/ProgressBar" import TableOfContents from "../components/TableOfContents" export default function Home() { return (

누구나 따라 할 수 있는 Git & GitHub 입문

Step-by-Step Tutorial

) } [V0_FILE]typescriptreact:file="components/TutorialContent.tsx" "use client" import { useContext } from "react" import TutorialStep from "./TutorialStep" import { tutorialSteps } from "../data/tutorialSteps" import { TutorialContext } from "../context/TutorialContext" export default function TutorialContent() { const { currentStep, setCurrentStep, totalSteps } = useContext(TutorialContext) const handleNextStep = () => { if (currentStep < totalSteps - 1) { setCurrentStep(currentStep + 1) } } const handlePreviousStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) } } return (

) } [V0_FILE]typescriptreact:file="components/TutorialStep.tsx" import Image from "next/image" import type { TutorialStepType } from "../types/tutorial" export default function TutorialStep({ step }: { step: TutorialStepType }) { return (

{step.title}

{step.content.map((item, index) => (

{item.type === "text" &&

{item.content}

} {item.type === "code" && (

              {item.content}

)} {item.type === "image" && ( {`Step

)}

))}

) } [V0_FILE]typescriptreact:file="components/ProgressBar.tsx" "use client" import { useContext } from "react" import { TutorialContext } from "../context/TutorialContext" export default function ProgressBar() { const { currentStep, totalSteps } = useContext(TutorialContext) const progress = ((currentStep + 1) / totalSteps) * 100 return (

) } [V0_FILE]typescriptreact:file="components/TableOfContents.tsx" "use client" import { useContext } from "react" import { TutorialContext } from "../context/TutorialContext" import { tutorialSteps } from "../data/tutorialSteps" export default function TableOfContents() { const { currentStep, setCurrentStep } = useContext(TutorialContext) return ( ) } [V0_FILE]typescriptreact:file="context/TutorialContext.tsx" "use client" import { createContext, useState, type ReactNode } from "react" import { tutorialSteps } from "../data/tutorialSteps" type TutorialContextType = { currentStep: number setCurrentStep: (step: number) => void totalSteps: number } export const TutorialContext = createContext({ currentStep: 0, setCurrentStep: () => {}, totalSteps: tutorialSteps.length, }) export function TutorialProvider({ children }: { children: ReactNode }) { const [currentStep, setCurrentStep] = useState(0) return ( {children} ) } [V0_FILE]typescriptreact:file="types/tutorial.ts" export type ContentItem = { type: "text" | "code" | "image" content: string } export type TutorialStepType = { id: number title: string content: ContentItem[] } [V0_FILE]typescriptreact:file="data/tutorialSteps.ts" isFixed="true" isQuickEdit="true" import type { TutorialStepType } from "../types/tutorial" export const tutorialSteps: TutorialStepType[] = [ { id: 1, title: "1단계: Git & GitHub 소개", content: [ { type: "text", content: "Git은 분산 버전 관리 시스템으로, 소프트웨어 개발에서 소스 코드의 변경사항을 추적하고 여러 사용자 간의 작업을 조율하는 데 사용됩니다.", }, { type: "text", content: "GitHub는 Git 저장소를 호스팅하는 웹 서비스로, 협업과 코드 공유를 쉽게 만들어줍니다.", }, { type: "image", content: "/placeholder.svg?height=400&width=600", }, ], }, { id: 2, title: "2단계: GitHub 가입 및 저장소 생성", content: [ { type: "text", content: "GitHub에 가입하고 첫 번째 저장소를 만드는 방법을 알아봅시다.", }, { type: "image", content: "/placeholder.svg?height=400&width=600", }, { type: "code", content: "# GitHub 저장소 생성 후\ngit clone https://github.com/username/repository.git", }, ], }, { id: 3, title: "3단계: Git 설치 및 초기 설정", content: [ { type: "text", content: "Git을 설치하고 기본 설정을 진행합니다.", }, { type: "code", content: '# Git 설치 확인\ngit --version\n\n# Git 사용자 이름 설정\ngit config --global user.name "Your Name"\n\n# Git 이메일 설정\ngit config --global user.email "your.email@example.com"', }, ], }, { id: 4, title: "4단계: 기본적인 Git 명령어", content: [ { type: "text", content: "가장 자주 사용되는 Git 명령어들을 알아봅시다.", }, { type: "code", content: '# 저장소 초기화\ngit init\n\n# 파일 스테이징\ngit add <파일명>\n\n# 변경사항 커밋\ngit commit -m "커밋 메시지"\n\n# 원격 저장소에 푸시\ngit push origin main', }, ], }, { id: 5, title: "5단계: 브랜치 생성 및 관리", content: [ { type: "text", content: "브랜치를 사용하여 독립적인 작업 공간을 만들고 관리하는 방법을 배웁니다.", }, { type: "code", content: "# 새 브랜치 생성\ngit branch <브랜치명>\n\n# 브랜치 전환\ngit checkout <브랜치명>\n\n# 브랜치 생성 및 전환\ngit checkout -b <브랜치명>\n\n# 브랜치 병합\ngit merge <브랜치명>", }, ], }, { id: 6, title: "6단계: GitHub에서의 협업", content: [ { type: "text", content: "GitHub를 사용하여 다른 개발자들과 협업하는 방법을 알아봅니다.", }, { type: "text", content: "풀 리퀘스트(Pull Request)를 생성하고 리뷰하는 과정을 배웁니다.", }, { type: "image", content: "/placeholder.svg?height=400&width=600", }, ], }, { id: 7, title: "7단계: 충돌 해결하기", content: [ { type: "text", content: "여러 개발자가 동시에 같은 파일을 수정할 때 발생할 수 있는 충돌을 해결하는 방법을 배웁니다.", }, { type: "code", content: '# 충돌이 발생한 파일 확인\ngit status\n\n# 충돌 해결 후\ngit add <해결된 파일>\ngit commit -m "충돌 해결"', }, ], }, { id: 8, title: "8단계: Git 고급 기능", content: [ { type: "text", content: "Git의 고급 기능들을 살펴봅니다. 리베이스(rebase), 체리픽(cherry-pick) 등을 배웁니다.", }, { type: "code", content: "# 리베이스\ngit rebase <브랜치명>\n\n# 체리픽\ngit cherry-pick <커밋 해시>", }, ], }, { id: 9, title: "9단계: GitHub Pages로 웹사이트 배포", content: [ { type: "text", content: "GitHub Pages를 사용하여 정적 웹사이트를 무료로 호스팅하는 방법을 배웁니다.", }, { type: "image", content: "/placeholder.svg?height=400&width=600", }, ], }, { id: 10, title: "10단계: Git & GitHub 모범 사례", content: [ { type: "text", content: "Git과 GitHub를 효과적으로 사용하기 위한 모범 사례와 팁을 알아봅니다.", }, { type: "text", content: "의미 있는 커밋 메시지 작성, 브랜치 전략, 이슈 및 프로젝트 관리 등을 다룹니다.", }, ], }, { id: 11, title: "11단계: GitHub에 변경된 파일 업데이트하기", content: [ { type: "text", content: "GitHub에 변경된 파일을 업데이트하는 기본적인 과정을 알아봅시다.", }, { type: "code", content: `# 변경된 파일 확인 git status # 변경된 모든 파일을 스테이징 영역에 추가 git add . # 변경 사항을 커밋 git commit -m "파일 업데이트" # GitHub 원격 저장소에 변경 사항 푸시 git push origin main`, }, { type: "text", content: "위 명령어들을 순서대로 실행하면 로컬에서 변경한 내용이 GitHub 저장소에 반영됩니다.", }, ], }, { id: 12, title: "12단계: GitHub Pages로 웹사이트 배포하기", content: [ { type: "text", content: "GitHub Pages를 사용하여 간단한 웹사이트를 무료로 호스팅하는 방법을 알아봅시다.", }, { type: "text", content: "1. GitHub 저장소 페이지로 이동합니다.", }, { type: "text", content: '2. "Settings" 탭을 클릭합니다.', }, { type: "text", content: '3. 왼쪽 사이드바에서 "Pages"를 클릭합니다.', }, { type: "text", content: '4. "Source" 섹션에서 "Deploy from a branch"를 선택합니다.', }, { type: "text", content: '5. "Branch" 드롭다운에서 "main"을 선택하고, 폴더는 "/(root)"를 선택합니다.', }, { type: "text", content: '6. "Save" 버튼을 클릭합니다.', }, { type: "text", content: "7. 페이지 상단에 표시되는 URL로 몇 분 후 귀하의 사이트에 접속할 수 있습니다.", }, { type: "image", content: "/placeholder.svg?height=400&width=600", }, { type: "text", content: "이제 main 브랜치에 변경 사항을 푸시할 때마다 자동으로 웹사이트가 업데이트됩니다.", }, ], }, { id: 13, title: "13단계: 변경 사항 확인 및 되돌리기", content: [ { type: "text", content: "때로는 변경 사항을 확인하거나 이전 버전으로 되돌려야 할 수 있습니다. 이를 위한 기본적인 Git 명령어를 알아봅시다.", }, { type: "code", content: `# 변경 사항 확인 git diff # 특정 파일의 변경 사항 확인 git diff <파일명> # 마지막 커밋 취소 (변경 사항은 유지) git reset --soft HEAD^ # 변경 사항을 이전 커밋 상태로 되돌리기 git checkout -- <파일명> # 모든 변경 사항 되돌리기 git reset --hard HEAD`, }, { type: "text", content: "주의: git reset --hard는 모든 로컬 변경 사항을 영구적으로 삭제합니다. 신중하게 사용해야 합니다.", }, ], }, ] [V0_FILE]typescriptreact:file="app/layout.tsx" import "./globals.css" import { Inter } from "next/font/google" import { TutorialProvider } from "../context/TutorialContext" import Link from "next/link" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "누구나 따라 할 수 있는 Git & GitHub 입문", description: "Step-by-Step Tutorial for Git and GitHub beginners", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } [V0_FILE]javascript:file="next.config.js" isFixed="true" isQuickEdit="true" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, output: "export", images: { unoptimized: true, domains: ["localhost"], // Add this line to allow local image uploads }, assetPrefix: "/my-git-tutorial/", basePath: "/my-git-tutorial", } module.exports = nextConfig [V0_FILE]typescriptreact:file="app/deployment-guide/page.tsx" import DeploymentTutorial from "../../components/DeploymentTutorial" import ImageUploader from "../../components/ImageUploader" export default function DeploymentGuidePage() { return (

초보자를 위한 GitHub Pages 배포 가이드

) } [V0_FILE]typescriptreact:file="components/ImageUploader.tsx" "use client" import { useState } from "react" export default function ImageUploader() { const [uploadedImages, setUploadedImages] = useState([]) const handleImageUpload = (event: React.ChangeEvent) => { const files = event.target.files if (files) { const newImages = Array.from(files).map((file) => URL.createObjectURL(file)) setUploadedImages((prev) => [...prev, ...newImages]) } } const handleApplyImages = () => { // Here you would typically send these images to your backend // or update your application state console.log("Applying images:", uploadedImages) alert("Images applied successfully!") } return (

이미지 업로더

{uploadedImages.map((img, index) => ( {`Uploaded

))}

) } [V0_FILE]typescriptreact:file="components/DeploymentTutorial.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import Image from "next/image" const steps = [ { title: "1. GitHub 저장소 생성", content: ( <>

먼저, GitHub에 새 저장소를 만들어야 합니다:

GitHub 계정에 로그인합니다.
오른쪽 상단의 '+' 아이콘을 클릭하고 'New repository'를 선택합니다.
저장소 이름을 입력합니다 (예: 'my-git-tutorial').
'Create repository' 버튼을 클릭합니다.

팁:

저장소 이름은 프로젝트를 잘 설명할 수 있는 간결한 이름으로 정하세요. 나중에 변경할 수 있지만, URL도 함께 변경되므로 처음부터 신중히 선택하는 것이 좋습니다.

), }, { title: "2. 로컬 프로젝트 설정", content: ( <>

이제 로컬 컴퓨터에서 프로젝트를 설정합니다:

터미널을 열고 프로젝트를 저장할 디렉토리로 이동합니다.
다음 명령어를 실행하여 Next.js 프로젝트를 생성합니다:
```
npx create-next-app@latest my-git-tutorial
```
프로젝트 디렉토리로 이동: cd my-git-tutorial

팁:

Next.js는 React 기반의 강력한 프레임워크입니다. 프로젝트 생성 중 질문에 대해 기본 옵션을 선택하면 됩니다. TypeScript를 사용하면 코드의 안정성을 높일 수 있지만, 초보자라면 JavaScript로 시작해도 좋습니다.

), }, { title: "3. GitHub Pages 설정", content: ( <>

GitHub Pages를 사용하기 위해 몇 가지 설정이 필요합니다:

next.config.js 파일을 열고 다음과 같이 수정합니다:

              {`/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
  assetPrefix: '/my-git-tutorial/',
  basePath: '/my-git-tutorial',
}

module.exports = nextConfig`}

package.json 파일의 "scripts" 섹션에 다음 줄을 추가합니다:

              "deploy": "next build && touch out/.nojekyll && git add out/ && git commit -m \"Deploy\" && git subtree
              push --prefix out origin gh-pages"

팁:

이 설정은 Next.js 프로젝트를 정적 웹사이트로 내보내고, GitHub Pages에서 올바르게 작동하도록 합니다.{" "} assetPrefix와 basePath는 GitHub Pages의 URL 구조에 맞게 설정된 것입니다.

), }, { title: "4. 이미지 처리", content: ( <>

Next.js의 Image 컴포넌트를 사용하여 이미지를 쉽게 처리할 수 있습니다:

프로젝트의 public 폴더에 이미지를 저장합니다.

컴포넌트에서 다음과 같이 이미지를 사용합니다:

              {`import Image from 'next/image'

`}

팁:

Next.js의 Image 컴포넌트는 자동으로 이미지를 최적화하고 지연 로딩을 적용합니다. 이는 페이지 로딩 속도를 크게 향상시킵니다. GIF도 동일한 방식으로 사용할 수 있습니다.

), }, { title: "5. GitHub에 코드 푸시", content: ( <>

이제 코드를 GitHub에 푸시합니다:

              {`git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/my-git-tutorial.git
git push -u origin main`}

팁:

커밋 메시지는 변경 사항을 명확하게 설명해야 합니다. "Initial commit"은 첫 커밋에 적합하지만, 이후에는 더 구체적인 메시지를 사용하세요. 예: "Add homepage layout" 또는 "Fix navigation bug".

), }, { title: "6. GitHub Pages에 배포", content: ( <>

마지막으로, GitHub Pages에 사이트를 배포합니다:

터미널에서 다음 명령어를 실행합니다: npm run deploy
GitHub 저장소 설정에서 Pages 섹션으로 이동합니다.
"Source" 드롭다운에서 "gh-pages" 브랜치를 선택합니다.
"Save" 버튼을 클릭합니다.

팁:

배포 후 사이트가 즉시 보이지 않을 수 있습니다. GitHub Pages가 변경 사항을 적용하는 데 몇 분 정도 걸릴 수 있으니 조금만 기다려주세요. 문제가 지속되면 저장소의 Actions 탭에서 배포 과정을 확인할 수 있습니다.

배포가 완료되면 https://your-username.github.io/my-git-tutorial 에서 여러분의 사이트를 볼 수 있습니다!

), }, { title: "7. Git 태그와 GitHub 협업", content: ( <>

Git 태그와 GitHub를 이용한 협업에 대해 알아봅시다:

Git 태그 사용하기:

              {`# Lightweight 태그 생성
git tag v1.0.0

# Annotated 태그 생성
git tag -a v1.1.0 -m "버전 1.1.0 릴리즈"

# 태그 푸시
git push origin v1.1.0`}

GitHub에서 협업하기:
- Fork & Pull Request 모델 사용
- Issues를 통한 작업 관리
- Project 보드를 이용한 작업 진행 상황 추적

팁:

태그는 주요 릴리즈나 중요한 마일스톤을 표시하는 데 사용됩니다. GitHub의 협업 기능을 최대한 활용하여 팀 작업의 효율성을 높이세요.

), }, { title: "8. 고급 Git 명령어", content: ( <>

협업 시 유용한 고급 Git 명령어를 알아봅시다:

원격 저장소 상태 확인:

              {`# 원격 브랜치 정보 가져오기
git fetch origin

# 원격과 로컬의 차이 확인
git status`}

변경 사항 가져오기 및 병합:

              {`# 변경 사항 가져오기
git fetch origin

# 가져온 변경 사항 확인
git checkout FETCH_HEAD

# 변경 사항 병합
git merge FETCH_HEAD`}

팁:

git fetch와 git merge를 별도로 사용하면 변경 사항을 더 세밀하게 제어할 수 있습니다. 팀 작업 시 이 방법을 통해 충돌을 최소화하고 안전하게 코드를 통합할 수 있습니다.

), }, { title: "9. Git 워크플로우와 브랜치 전략", content: ( <>

효과적인 Git 워크플로우와 브랜치 전략에 대해 알아봅시다:

Git Flow:
- master: 제품 출시 브랜치
- develop: 개발 브랜치
- feature: 기능 개발 브랜치
- release: 출시 준비 브랜치
- hotfix: 긴급 버그 수정 브랜치
GitHub Flow:
- master 브랜치에서 직접 feature 브랜치 생성
- Pull Request를 통한 코드 리뷰
- 승인 후 master에 병합

팁:

프로젝트의 규모와 팀의 작업 방식에 맞는 브랜치 전략을 선택하세요. 작은 프로젝트는 GitHub Flow가, 큰 프로젝트는 Git Flow가 적합할 수 있습니다.

), }, ] export default function DeploymentTutorial() { const [currentStep, setCurrentStep] = useState(0) const nextStep = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } } const prevStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) } } return (

{steps[currentStep].title}

{steps[currentStep].content}

) }