Skip to content

Latest commit

 

History

History
265 lines (170 loc) · 7.69 KB

slide_contents.md

File metadata and controls

265 lines (170 loc) · 7.69 KB

슬라이드 1: 표지

GitHub Copilot CLI로 개발 시작하기 🚀

터미널을 AI 코딩 비서로 만들기

슬라이드 2: GitHub Copilot CLI란? 🤔

터미널에서 사용하는 AI 도우미입니다.

ChatGPT나 Claude처럼 터미널에서 자연어로 대화하며 개발할 수 있습니다.

무엇을 할 수 있나요?

  • 💬 자연어로 명령어 질문: "지난주에 수정한 파일 찾아줘"
  • 🐙 GitHub 작업 자동화: "PR 만들어줘", "이슈 찾아줘"
  • 🎯 코드 작성 및 수정: "배경색을 파란색으로 바꿔줘"
  • 🔍 코드/명령어 설명: "저 복잡한 grep 명령어 설명해줘"

슬라이드 3: 왜 사용해야 할까요? ✨

  • ✅ 시간 절약: 구글링 시간을 획기적으로 줄여줍니다.
  • ✅ 생산성 향상: 명령어를 외우지 않아도 됩니다.
  • ✅ 학습 도구: 개발하면서 동시에 배울 수 있습니다.
  • ✅ 자동화: 반복적인 Git 작업, 프로젝트 관리를 자동화합니다.

💡 학생 여러분: GitHub Student Developer Pack 가입 시 무료로 사용 가능합니다! 🎓

슬라이드 4: 설치하기 (3분 컷!) 📦

준비물

  1. Node.js (버전 22 이상)
    • 확인: node --version
  2. GitHub Copilot 구독
    • 🎓 학생은 Student Pack으로 무료!
    • (조직 계정은 관리자 활성화 필요)

설치 및 로그인

# 1. 전역으로 설치
npm install -g @github/copilot

# 2. 설치 확인
copilot --version

# 3. 로그인 (브라우저가 열립니다)
copilot /login

슬라이드 5: 사용 방법 (2가지 모드) 🎮

1️⃣ 대화형 모드 (⭐ 추천)

터미널에서 copilot을 입력해 채팅 세션을 시작합니다.

장점: 대화 내용을 기억하고, 에러가 나면 바로 다시 물어볼 수 있습니다.

# Copilot 시작
copilot

# 자유롭게 질문
> Git 상태 확인하는 방법 알려줘
> 지난주에 수정한 HTML 파일 찾아줘
> H1 제목 색상을 파란색으로 바꿔줘

2️⃣ 프로그래밍 모드 (스크립트용)

명령줄에서 바로 실행합니다. 스크립트나 자동화에 유용합니다.

# 한 줄로 바로 실행
copilot -p "열려있는 내 PR 목록 보여줘"

# 파일 수정 시 승인 옵션 (주의!)
copilot -p "README에 사용법 추가해줘" --allow-all-tools

슬라이드 6: ⚠️ 매우 중요: 안전하게 사용하기 (1/2)

Copilot CLI는 여러분을 대신해 파일을 수정하고 명령어를 실행할 수 있습니다. (예: rm -rf, git push --force)

🛡️ 기본 원칙: "항상 확인"

  1. 제안 확인: Copilot이 제안하는 명령어를 실행 전 반드시 확인하세요.
  2. 신뢰 폴더: 안전한 프로젝트 폴더에서만 사용하세요.
    • ❌ 절대 금지: 홈 폴더(~), 다운로드 폴더
    • ✅ 추천: 내 프로젝트 폴더 (~/Documents/my-project)

슬라이드 7: ⚠️ 매우 중요: 안전하게 사용하기 (2/2)

📁 신뢰할 수 있는 폴더 설정

처음 실행 시 폴더 신뢰 여부를 묻습니다.

  • ✅ 1. 이번만 신뢰 (추천)
    • 처음이거나, 확신이 없을 때
  • ⚠️ 2. 앞으로도 계속 신뢰
    • 내가 만든 프로젝트고, 100% 안전하다고 확신할 때만!

🛠️ 도구 사용 승인

Copilot이 rm (삭제) 같은 명령어를 쓰려 할 때, 승인을 요청합니다.

  • ✅ 1. 예 (이번만) (⭐ 가장 안전)
  • ⚠️ 2. 예, 이 세션 동안 계속 허용 (편리하지만 ls 등 확실히 안전할 때만)
  • 🚫 3. 아니오, 다른 방법 사용 (Esc) (위험해 보일 때)

⚠️ 고급 (위험): --allow-all-tools 옵션은 자동 승인입니다. (초보자는 절대 사용 금지)

슬라이드 8: 🚀 실습: 나만의 소개 페이지 만들기

목표: Copilot CLI와 대화하며 나만의 웹페이지를 만들고 배포합니다.

배울 것:

  • AI와 협업하여 코딩하기
  • Git & GitHub 기본 명령어
  • GitHub Pages로 무료 웹사이트 배포

추가 준비물:

  • Git (git --version)
  • GitHub CLI (gh --version)
    • 없다면? copilot 실행 후 > GitHub CLI 설치 방법 알려줘

슬라이드 9: 실습 Step 1 & 2: 프로젝트 시작하기

터미널에서 copilot을 실행하고 대화를 시작합니다.

1. 폴더 만들기

> 'my-intro'라는 이름의 폴더를 만들고 그 폴더로 이동하는 명령어 알려줘

(Copilot이 mkdir my-intro && cd my-intro 제안)

2. Git & GitHub 설정

> Git 저장소를 초기화하고,
> GitHub에 'my-intro' 이름으로 public 저장소를 만들고 연결해줘

(Copilot이 git init -b main 및 gh repo create ... 명령어 제안)

슬라이드 10: 실습 Step 3 & 4: AI와 웹페이지 코딩

1. HTML/CSS 생성 요청

copilot 대화창에 요청하세요.

> 개인 소개 페이지 HTML 코드를 만들어줘.
> 이름, 소개, 기술 스택, 연락처 섹션을 포함해줘.
> CSS도 포함해서 모던한 디자인으로 부탁해.

2. 파일 생성 및 커스터마이징

  1. Copilot이 준 코드를 index.html 파일에 복사/붙여넣기
  2. "홍길동" -> "내 이름"으로 수정
  3. 막히면 다시 질문! 
    > 헤더 그라데이션 색상을 파란색 계열로 바꾸고 싶어
> 프로필 사진을 넣을 수 있게 코드 수정해줘

슬라이드 11: 실습 Step 5 & 6: 확인 및 업로드

1. 로컬에서 미리보기

> 방금 만든 index.html 파일을 브라우저로 여는 명령어 알려줘

(Mac: open index.html, Windows: start index.html)

2. GitHub에 업로드

> 변경사항을 "첫 페이지 완성" 메시지로
> GitHub에 커밋하고 푸시하는 방법 알려줘

(Copilot이 git add ., git commit -m "...", git push 제안)

슬라이드 12: 실습 Step 7: 배포하기 (GitHub Pages)

내 사이트를 전 세계에 공개합니다! (https://<내ID>.github.io/my-intro/)

1. GitHub Actions 설정 요청

> 이 저장소를 GitHub Pages에 자동 배포하는
> GitHub Actions 워크플로우를 만들어줘

2. 워크플로우 파일 생성 및 푸시

  1. Copilot이 알려준 대로 .github/workflows/pages.yml 파일 생성
  2. 파일 내용을 GitHub에 푸시 
    > 새로 만든 Actions 파일을 GitHub에 푸시해줘
  3. 잠시 후 (1-3분) 내 사이트 주소로 접속! 🎉

슬라이드 13: 💡 Copilot 활용 팁: 좋은 질문 vs 나쁜 질문

AI는 **구체적인 맥락(Context)**과 **명확한 의도(Intent)**를 좋아합니다.

❌ 막연한 질문 ✅ 구체적인 질문
> 안 돼 > git push할 때 "permission denied" 에러가 나. 왜 그럴까?
> 에러 > 이 CSS 코드가 모바일에서 깨지는데, 반응형으로 수정해줘
> 파일 어떻게 해? > index.html 파일을 만들고 VS Code로 열고 싶어

슬라이드 14: 🚀 다음 단계 & Q&A

더 배워보기

  • VS Code에서 Copilot 사용: 코드 에디터에서 실시간 코드 제안 받기
  • GitHub Actions 심화: CI/CD 파이프라인 자동화하기
  • 프로젝트 개선: Copilot에게 "다크 모드 추가해줘", "애니메이션 넣어줘"라고 요청해보세요!

공식 문서

감사합니다! 🎉

Q&A