안녕하세요!
지난 포스팅에서는 intellij를 통해서 Github에 내 프로젝트를 올리는 방법에 대해서 알아보았는데요!
제가 적은 글이지만, 보기 조금 헷갈리기도 하고,,다시 한번 연습을 해보고 싶어서
프로젝트 업로드에 관한 글을 다시 적어보겠습니다!
대신 이번 포스팅에서는 VSCode를 사용해서 해보겠습니다!
[VSCode 설치]
1. 실행 파일 다운로드
- 아래의 사이트에서 "Download for Windows" 버튼을 눌러 .exe파일을 다운로드해주세요.
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
2. 실행 파일로 VSCode 설치.
- 아래와 같이 필요한 부분을 체크한 후, 컴퓨터를 재시작하면 환경변수도 자동으로 적용되며 cmd창에서도
사용이 가능해집니다.
[파일 생성]
참고한 영상과 동일하게, 간단한 html파일을 생성하고, 이를 github에 업로드 해보겠습니다.
1. html 파일 생성
- [File] - [New File] 또는 "Ctri+N"을 눌러 새파일을 생성해주세요.
- 생성 후, "Select a language"를 누르고 html을 선택해주세요
2. html 내용 작성
- '!' 또는 'html:5'를 입력하고, enter를 눌러서 기본적인 html코드를 작성해주세요(VSCode의 자동완성 기능 활용)
- 생성된 기본코드의 body 태그 내에 원하는 문장을 아무거나 적어주었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
Hello World!
git 공부용 페이지
</div>
</body>
</html>
3. html 저장
- 작성한 html파일을 저장해줍니다.
- 저는 'C:\Users\user' 내에 vscode란 폴더를 만들고, 그 안에 gitStudy 폴더에 test.html이름으로 저장했습니다.
[Github 업로드]
이제, 작성한 파일을 github에 공유해보겠습니다.
저는 미리 github에 "study_git"이라는 이름의 repository를 생성해두었습니다
repository 생성 방법은 아래의 글에 나와있습니다.
[2. Git&Github] Github가입 및 repository 생성
안녕하세요! 오늘은 git, github를 본격적으로 시작하기 위해서, 회원가입 및 repository 생성작업을 진행해보았습니다. [ Github 회원가입] 1. Github 접속 - 먼저, 아래의 링크 or 구글에 github라고 검색하
crescent0-0.tistory.com
1. 터미널 열기
- VSCode 상단의 [Terminal]-[New Terminal] 또는 Ctrl+Shift+'를 눌러 새 터미널을 열어주세요
- 아래와 같은 터미널 창이 나오면 됩니다!
2. github에 프로젝트 올리기
- 이제 git 명령어를 이용해서 git에 제 프로젝트를 올려보겠습니다.
- repository 생성 시, 나오는 명령어를 참고하여 진행해보겠습니다.
사용한 명령어와, 각 명령어의 의미는 아래에 정리해놓았습니다.
- 명령어 실행 화면
* 명령어 정리
> git init : 초기화
> git add . : commit할 파일을 추가, .은 현재 폴더 내의 모든 파일을 의미
> git commit -m "메세지" : commit 진행, ""내에는 현재 commit을 구분할 메세지 내용을 적음
> git remotd add origin "나의 repository 주소" : 내 github의 repository와 로컬을 연결
> git push origin master : github에 현재의 commit부분까지 업로드
> git status : 현재의 상태 확인
> git remote -v : 현재 연결된 repository 확인
- 위의 명령어를 실행하고 나면, 아래의 화면과 같이 github에 작성한 test.html이 올라간 것을 볼 수 있습니다.
3. 변경사항 추가 commit
- 내용을 추가한 test.html을 다시 한 번 commit해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
Hello World!
git 공부용 페이지
</div>
<p>
추가한 부분
</p>
</body>
</html>
- 명령어 정리
> git add .
> git commit -m "second commit"
> git push origin master
- 앞서 한 것과 동일한 명령어를 활용하여, commit -> push를 진행하면, 아래 화면에서 보이는 것과 같이
commit 메세지가 "second commit"로 변경되면서, 변경사항이 제대로 commit되었음을 알 수 있습니다.
- 추가적으로, commit message 부분을 누르면, 아래 화면과 같이 이전 버전과 비교해서 어떤 점이 변화하였는지 볼 수 있습니다.
* 우측의 'split'을 선택해야 아래와 같은 화면으로 볼 수 있습니다.
이번 포스팅에서 VSCode를 이용한 github 프로젝트 업로드 방법을 다뤄보았습니다.
다음 포스팅에서는 github를 이용해 협업하는 방법에 대해 배워보겠습니다
감사합니다🙌
참고링크 : https://youtu.be/lelVripbt2M
'개발 > Git' 카테고리의 다른 글
| [5. Git&Github] Github로 협업하기(팀프로젝트) (0) | 2022.02.28 |
|---|---|
| [4. Git&Github] Github에 프로젝트 업로드 (0) | 2022.02.02 |
| [3. Git&Github] Git 설치 (0) | 2021.12.19 |
| [2. Git&Github] Github가입 및 repository 생성 (0) | 2021.12.19 |
| [1. Git&Github] 기본개념 (0) | 2021.12.19 |
