# Github ## GitHub --- - Git을 사용하는 프로젝트를 지원하는 웹 호스팅 서비스 - GitHub느 단순한 원격 저장소를 넘어 개발자들이 코드를 공유하고 협력할 수 있는 플랫폼 - 개발자 커뮤니티 구축, 오픈 소스 프로젝트의 호스팅, 이슈 트래킹, 코드 리뷰, CI/CD가 포함 - 여러 명의 사람이 참여하여 버전 제어 및 공동 작업이 가능 **Git vs Github** ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/212437_rwjYbpgj84D5P5f8BY?q=80&s=1280x180&t=outside&f=webp) - **git**은 remote 저장소를 지원한 형상관리 도구 - → 본인의 코드와 수정 내역을 기록하고 관리하는 버전 관리 프로그램 - **github**가 깃에서 지원하는 remote 저장소 - git은 로컬 저장소를 사용하여 실시간 협업 및 작업 공유가 불가능하지만, - github을 사용하면 공동 작업이 가능하다 ## GitHub 계정 생성 --- ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/212647_RbAC1AjzClPFGn0ixD?q=80&s=1280x180&t=outside&f=webp) - [https://github.com/에](https://github.com/%EC%97%90) 가서 우측 상단에 위치하는 `Sign up` 을 클릭한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/212653_usJExGRtULDN8HfuqK?q=80&s=1280x180&t=outside&f=webp) - email, password, username을 순서대로 채운 뒤 Continue를 클릭한다. - Copilot을 무료로 사용하고 싶다면 학교 계정으로 가입하거나 뒤에서 나오는 방법 대로 다른 이메일로 가입 후 학교 계정을 추가할 수 있다. - 이후 로봇 가입 방지용 퍼즐을 풀고 Create account를 클릭한다. - 가입한 이메일로 전달된 코드 6자리를 입력하면 가입이 완료된다. ## GitHubGlobal Campus - Copilot을 사용할 때 학생 및 교직원인 경우 Copilot을 무료로 사용할 수 있다. - 학생임을 인증하기 위해 GitHub Global Campus에 신청해야한다. ### **요구사항** - 현재 고등학교, 중등학교, 전문대학, 대학, 홈스쿨 또는 유사한 교육 기관과 같은 교육 과정 수료증을 부여하는 학위 또는 졸업장에 등록되어 있음 - 입증할 수 있는 학교 발급 메일 주소를 가지고 있거나 현재 학생 상태를 증명하는 문서 업로드 - GitHub 개인 계정이 있음 - 만 13세 이상이어야 함 ### **1. GitHub 이메일 확인하기** ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213029_Hb8WNiKGZgzrjVdHNG?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213018_zHOnUJwo5i7nefRpJe?q=80&s=1280x180&t=outside&f=webp) - GitHub Global Campus를 신청하기 위해 이메일에 학교 계정이 등록되어 있어야 한다. - 만약 가입한 이메일이 학교 계정이 아니라면 우측 상단 프로필을 선택하여 `Settings`에 들어가 `Emails`를 선택한다. - `Add email address`에 자신의 학교 이메일 계정을 작성한 뒤 `Add`버튼을 누른다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213046_4GQPQtPWqBx5NWHZfm?q=80&s=1280x180&t=outside&f=webp) - 학교 계정으로 온 verify 이메일에서 `verify email address`를 클릭하여 인증을 완료한다. ### **2. 2단계 인증하기** - GitHub에서는 2024년도까지 2단계 인증을 필수로 하는 것을 목표로 하고 있어, 2단계 인증이 완료 되어야 학생 계정을 만들 수 있다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213103_yVKTtH88eSuNgWbiKW?q=80&s=1280x180&t=outside&f=webp) - 2단계 인증을 위해선 인증 프로그램이 필요하다. - 1Password, Authy, Microsoft Authenticator 등 다양한 프로그램을 사용하여 인증을 진행할 수 있다. - 이번 인증에서는 편리한 인증을 위해 크롬 웹스토어([https://chromewebstore.google.com/)에서](https://chromewebstore.google.com/)%EC%97%90%EC%84%9C) 인증 도구를 검색하여 확장자를 설치하여 인증을 진행하였다. - 웹스토어에서 authenticator를 검색한 뒤 2단계 인증 코드를 생성하는 프로그램을 클릭한 뒤 chrome에 추가 버튼을 선택한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213114_pU1P1Qh6xgn9DbmLBJ?q=80&s=1280x180&t=outside&f=webp) - 우측 상단 프로필을 선택하여 `Settings`에 들어가 `Password and authentication`을 선택한다. - Two-factor authentication에 있는 `Enable two-factor authentication` 버튼을 클릭한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213125_yEnqcPs8FNESWttvR9?q=80&s=1280x180&t=outside&f=webp) - 인증도구에서 QR 코드 아이콘을 클릭한 뒤 QR 코드를 스캔하면 GitHub 코드가 생성된다. - GitHub 아래에 뜨는 6자리 코드를 Verify the code from the app에 입력하고 Continue를 클릭한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213539_3zusbEP9tXfDW7FvC9?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213545_yQM7I6K8D4lehtatKj?q=80&s=1280x180&t=outside&f=webp) - recovery code들이 출력되는데 이 코드들을 download한다. - recovery code는 타인에게 노출되지 않도록 조심해야한다. - I have saved my recovery codes를 클릭하면 성공적으로 인증을 완료할 수 있다. ### **3. GitHub Education** ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213603_GJs1nTiP33dIedEfyd?q=80&s=1280x180&t=outside&f=webp) - 이메일 인증을 완료한 뒤 Dashboard에 들어가면 Join GitHub Education 창이 생긴다. - `Join GitHub Education`을 클릭한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213612_kYbGHsTtEsVjY6aYHR?q=80&s=1280x180&t=outside&f=webp) - 창을 삭제하였다면 [https://education.github.com/에서](https://education.github.com/%EC%97%90%EC%84%9C) Join Global Campus를 클릭해도 같은 창으로 넘어갈 수 있다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213621_vi9bnM62NQU5TJSx9r?q=80&s=1280x180&t=outside&f=webp) - 교사면 Teacher, 학생이면 Student를 선택한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213631_V4Bqr4g2GnSgZEsE70?q=80&s=1280x180&t=outside&f=webp) - 학교 계정을 인증했다면 자동으로 학교 계정이 선택되고 학교 이름이 입력되어 있을 것이다. - Continue를 클릭한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213644_1o2JG3DnMCFT6EQNAk?q=80&s=1280x180&t=outside&f=webp) - 학생증이나 재학증명서 등 학생임을 나타낼 수 있는 문서를 사진 찍는다. - 이때 학생증에는 날짜가 반드시 들어가야 한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213650_7K1jkB8MoGLB0dyNpx?q=80&s=1280x180&t=outside&f=webp) - 컴퓨터에 카메라가 있다면 Take a picture버튼을 눌러 컴퓨터 카메라로 문서를 촬영한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213703_0pLw3265k09ThD8UCl?q=80&s=1280x180&t=outside&f=webp) - 컴퓨터에 카메라가 없다면 핸드폰 카메라로 문서를 촬영한다. - 핸드폰으로 [https://github.com/에](https://github.com/%EC%97%90) 들어가서 로그인을 한다. - 2단계 인증 페이지가 나오면 chrome 인증코드 확장자를 켜고 인증번호를 입력한다. - (만약 다른 인증 프로그램을 상용했다면 해당 프로그램의 인증번호를 입력한다) - Join GitHub Education을 클릭한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213716_Ek8X0iw3m0Z2fsnvYB?q=80&s=1280x180&t=outside&f=webp) - Take a picture 버튼을 클릭한 뒤 학생증 또는 재학증명서를 촬영한다. - Proces my application 버튼을 누르면 학생 인증 과정이 완료된다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/213724_heLMrodEmixt7AJkS1?q=80&s=1280x180&t=outside&f=webp) - 학생 인증과 관련된 이메일은 학교 이메일로 8일 이내에 받을 수 있다. ## Repository 생성하기 --- ### Repository 생성 ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205015_KLqy4bSg4nwCxbnq4o?q=80&s=1280x180&t=outside&f=webp) Github 사이트에서 로그인을 한 뒤 Repositories에 들어간다 ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205029_pQz4ocproQGBWoRtlq?q=80&s=1280x180&t=outside&f=webp) `New`를 클릭하여 새로운 Repository를 만들어준다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205049_Tsw9hqGSdJIxGCsQt8?q=80&s=1280x180&t=outside&f=webp) 이 때 `[사용자ID].github.io`를 이름으로 지정하면 github pages에서 해당 페이지가 출력된다. 이름을 입력했다면 `create repository`로 repository를 생성한다 ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205116_A77TZOHILEWCzsXP9J?q=80&s=1280x180&t=outside&f=webp) 위의 코드를 사용하여 현재 사용 중인 컴퓨터에서 github에 git할 수 있다. ## Git 기초 --- ### VSCode에서 Git 사용 현재 컴퓨터에 해당 레포지토리에 git할 파일을 만들어준다. Visual Studio Code에서 `File > Open Folder`로 해당 파일을 연다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205200_KzpxsWjL8VHSSoHHUc?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205203_vFeCNlOinN7qhuATDS?q=80&s=1280x180&t=outside&f=webp) 연결 테스트를 하고 안정적인 git을 위해 branch들을 만들어 줄 것이다. `Ctrl + Shift + P`로 `Terminal: Select Default Profile` 를 검색한 뒤 `Git Bash`를 기본 터미널로 설정한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205210_fVbyMMXnZKnBj4kpDe?q=80&s=1280x180&t=outside&f=webp) 테스트를 위해 `tndexest.html` 파일을 생성하고 Hello world를 작성한다. `Terminal > New Terminal`에서 새 터미널 창을 열어준다. ```javascript git init git add . git commit -m "first commit" git branch -M main git remote add origin [주소] git push -u origin main ``` reposittory를 생로 생성했을 때 `..or new repository on the command line`에 작성되어 있는 코드를 차례로 입력한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205227_A9wf9eI2WQLrOm69EK?q=80&s=1280x180&t=outside&f=webp) 그러면 새로운 commit이 생성된다. ### Branch 추가 ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205236_erlsv24JmxI3ZFcEcN?q=80&s=1280x180&t=outside&f=webp) ```javascript git checkout -b develop git add . git commit -m "develop first commit" git push origin develop ``` main의 내용을 보호하기 위해 develop이라는 branch를 새로 만들어준다. develop이 정상적으로 작동하는지 알아보기 위해 develo ptest라는 문구를 추가해주었다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205245_CPjpsq07EYzT0GMrph?q=80&s=1280x180&t=outside&f=webp) github.io 레포지토리로 돌아가면 compare&pull request 버튼이 생성된다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205253_PP7kPWF2BhMYklPrtX?q=80&s=1280x180&t=outside&f=webp) Add a description에 내용을 작성하고 `Create pull request`를 클릭한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205304_orgk6ibsEJCVYdEPMY?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205301_LEcqj7dChPuDYdfmhn?q=80&s=1280x180&t=outside&f=webp) `Merge pull request`와 `confirm merge`를 차례로 클릭한다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205404_4X71r0WtRAfOJzrwvH?q=80&s=1280x180&t=outside&f=webp) 그러면 성공적으로 merge된 것을 확인할 수 있다. ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205354_zEXQL2ZhMSqWW8fFdm?q=80&s=1280x180&t=outside&f=webp) ```javascript git checkout -b Pro1 git add . git commit -m "develop first commit" git push origin Pro1 ``` develop과 같은 방식으로 Pro1을 추가한다 ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205440_a33HNpBdn4BeDeZJ7Y?q=80&s=1280x180&t=outside&f=webp) Pro1은 main이 아니라 develop과 연결해준다. 그 뒤의 과정은 develop과 같으며, 변경사항을 main에 저장하고 싶으면 develop에서 다시 main에 pull request해주는 과정이 필요하다 ### Main 보호 ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205454_e6614wZrmwWPN3uZAf?q=80&s=1280x180&t=outside&f=webp) `Settings > Branches > Add branch protection rule` 을 클릭한다 ![Image](https://upload.cafenono.com/image/slashpagePost/20250117/205507_TqgameqYkkCT4sSKSa?q=80&s=1280x180&t=outside&f=webp) Branch name pattern에서 `main`을 입력하고 `Require a pull request before merging`과 `Lock branch`를 체크해준다. 그러면 다른 branch들에서 main에 접근할 수 없으며, branch에 merge할 때는 빨간색 경고 문구가 나타나게 된다. For the site tree, see the [root Markdown](https://slashpage.com/yerim-devnote.md).