[SeSACXCodingOn] 웹풀스택과정 1일차 : OT 및 git tutorial

---

[🌱목차🌱]

• VS Code 설치하기 
• VS Code 확장 프로그램 설치하기 
• Github에서 Repository 만들고 가져오기 
• Git을 시작하기 위한 초기 설정
• Local Repository 와 Remote Repository
• (번외) 원격저장소(remote repository :github)에서 직접 commit 하기
• (번외)VSCode에서 commit과 push하기
  
  +후기

 

---

안녕하세요 2023년 8월 졸업예정자인 저에요 얏호

지금까지 저를 되돌아보니 전공수업 따라가기에만 바쁜,, ,, 포트폴리오는 있는데 빈 껍데기만 남은 그런 사람이 되어있었습니다,,
전공자이지만 해본 개발은 게임 개발 뿐이고 게임 개발 마저도 제대로 된 이해가 없이 결과 내기에만 급급했던 것 같습니다.
새로운 개발 직무에 도전해보고자 웹풀스택 과정 교육을 시작하게 됐어요!
전공자이지만 비전공자에요 ...
비전공자같지만,, 전공자에요,,,
그냥 ,, 감자에요 

 

---

 
 
아무튼 TMI 는 여기까지 하고 오늘은 OT날이었어요 (두근두근)
 
SeSAC 청년취업사관학교 자체적으로 하는 프로그램 안내와 앞으로 교육과정에 대해 설명해주셨고, 자기소개를 진행했습니다.
아이엠그라운드 자기소개하기! 는 잘하는데..
너모나 떨렸어요.,,
그래서 그냥 막 얘기한듯,, 덜덜 떨며,,
크루 리더님이신 '션리더'님이 먼저 자기소개를 해주셨고 mbti , 취미, 앞으로 임할 자세에대해서 다들 간략하게 소개 해주셨습니다.
다들 취미가 멋져요,,, 
특히 엠비티아이가 다섯개가 왔다갔다 하셨던 분이 재밌었어요.
저랑 동갑이신 분들도 계셔서 내적 친밀감 max였답니다.
다들 열심히하려는 의지가 너무 잘 보여서 동기부여 뿜뿜 !!

자기소개 타임 이후 에는 VS Code 설치 및 셋팅과 잔디를 심기위한 !! git 수업을 진행했습니다.

 

1️⃣  VS Code 설치하기 

 

Visual studio code

 
이건 그냥 운영체제에 맞게 설치해주시면 됩니다. ㅎ~ㅎ
 
 

 

2️⃣  VS Code 확장 프로그램 설치하기 

GitLens , Auto Commit Message

(근데 사실 이미 다 받아져있어서 흠,,, 설치되어있군,, 하고 넘어갔습니다. ) 
그리고 git을 설치해주면 되는데요
macOS에서는 터미널에 git을 입력했을 때 
 

terminal

이런식으로 뭐가 많이 나온다면 설치가 되어있는겁니당 ^_^

 

3️⃣ Github에서 Repository 만들고 가져오기 

Create a new repository

레포지토리 이름과
public으로 할건지 private으로 할건지 정하고
Add a README file에 체크 해준뒤
create repository 눌러줘요

 

4️⃣ Git을 시작하기 위한 초기 설정

Terminal

• cd Desktop  -> Desktop 폴더에 진입한다는말 
• mkdir github -> Desktop/하위폴더에 github라는 directory를 생성한다는 말 

ㅎㅇ

• cd github -> github 폴더에 진입한다는 말 
• git config --global init.defaultBranch main • git config --global user.name “프로필 이름”
• git config --global user.email “이메일 주소”
• git config --global --list

 

터미널에 입력할  CLI(Command-Line Interface) 명령어들에 대해서 알아보쟛

• cd : 폴더에 진입하는 명령어 (change directory)
• mkdir : 새 폴더 생성 (make directory)
• ls : 폴더 내 목록 확인 (list segments)

[git 명령어]

• git clone [github-repository-url]:github (remote) repository 저장소 local 로 복제 
• git remote -v : remote repository url 이 잘 연결되었는지 확인
• git status : 현재 파일 상태 (변경 내역 ) 확인
• git add : 변경 사항을 staging area 이동 (임시 저장)
• git commit -m "커밋메세지" : 버전 남기기 (ex. git commit -m "study : html 태그 학습"
• git log : "커밋" 히스토리 (기록) 조회
• git log --onelint : 커밋 ID + message 간단히 한줄로 보여줌
• git push origin main : local 에 저장된 커밋 내역을 remote (github) repository 로 반영 

cd .. 한 단계 상위 디렉토리로 이동

Git clone

사진 속 초록버튼 "<>code"를 클릭하고
'clone with HTTPS' 항목에 있는 아이콘 눌러서 저장소의 주소를 복사합니다.
그리고 git clone 명령을 사용해서 원격 repository 저장소를 복제합니다
(명령어 -> git clone [github-repository-url])
 

5️⃣ Local Repository 와 Remote Repository

Git의 기본작업 그래프

Add를 하여 commit 단계 이전의 공간을 stage area라고 합니당

이 add 명령어는 해당 파일을 추적하겠다는 의미인데, add 명령어가 필요한 이유는 뭘까요?

바로 제때 commit을 하지 않아 commit할 파일들이 많거나 불필요한 파일은 commit에서 제외하기 위함이라고 하네요.

˗ˋˏ와ˎˊ˗

네,,뭐요?

만약 많은 변경사항이 담긴 파일들을 한번에 commit한다면 한 버전에 수많은 변경사항이 포함되겠죠?
그러면 버전관리의 의미가 없어지는거죠 쩝,,
따라서 선택적으로 commit을 할 수 있도록 git add 명령어를 통해 commit할 파일을 추적해 주는 겁니당당!

하여간 이 stage area는 commit이라는 데뷔를 기다리는,,, 연습생들의 연습실이라는 겁니다!

이 아이들이 데뷔(commit)하게되면,, 저장소(repository)라는,, 무대로 데뷔하게됩니다..
데뷔길만 걷자 ( o̴̶̷̥᷅⌓o̴̶̷᷄ ) 얘드라

• 지역저장소 (local repository)     : user 컴퓨터에서 작업한 뒤 그 컴퓨터 안에 commit을 저장
• 원격저장소 (remote repository) : github라고 생각하면 된다. git서는 local 과 remote repository 를연결해서 버전관리파일들을 쉽게 백업할 수 있습니다.

 6️⃣ (번외) 원격저장소(remote repository :github)에서 직접 commit 하기

README.md

README 파일을 github에서 수정해주고 위에 초록버튼인 commit changes...을 눌러줍니다.
 
 

commit message

그럼 이런 commit message입력창이 뜨게 되는데요 
여기에 commit message를 입력하고 commit changes를 눌러주면 commit 끝 ! 
이 방법은 로컬로 다시 작업할때 원격 저장소에서 pull 을 해주셔야 변경사항이 반영됩니다 
 

7️⃣ (번외)VSCode에서 commit과 push하기

 

VSCode 에 Source control 빨간 동구래미

VScode 로 돌아와서 Source control 를 눌러줍니다. 
 
 

VSCode에서 commit과 push하기

변경사항을 입력한 뒤 저장을 하면 저렇게 변경사항이 뜨게 됩니다.
저장안하면 변경사항 안뜨니까 일단 저장해주세욥
그리고 플러스 버튼을 누르면 Stage로 올라가는 add기능이라 할 수 있을 것 같습니다. 
그리고 위에 메세지 창에 커밋메세지를 입력하고 밑에 커밋 버튼을 눌러주면 github에 잘 push 된 모습을 볼 수 있습니다.
 
파일을 수정했다면 반드시 작업하기 전에 원격 저장소의 최신 commit을 pull한 다음 자신의 commit을 push해줘야돼요
안그러면 로컬에 있는 파일이랑.. 원격저장소에 있는 파일이랑..
너 뭐하는...?
상황이 발생하기 때문인데요 다른 글로 자세히 공부해보겠습니다. 
 

+💭후기

Sesac 제공 쿠키&amp;amp; 텀블러

SeSAC에서 주신 쿠키와 텀블러,,,
왕크다
쿠키도 너무

｡ﾟﾟ･｡･ﾟﾟ｡ ﾟ。귀　｡ﾟ 　ﾟ･｡･ﾟ 　｡ﾟﾟ･｡･ﾟﾟ｡ 　ﾟ。 여　｡ﾟ 　　ﾟ･｡･ﾟ ｡ﾟﾟ･｡･ﾟﾟ｡ ﾟ。 워　｡ﾟ 　ﾟ･｡･ﾟ,,

영등포캠퍼스 클래스

역시 화면 큰게 좋구㉯ ,,,,

청년취업사관학교 영등포캠퍼스 여성휴게실

여성휴게실도 한번 가봤답니다

모두 첫날 수고 많으셨습니다 ~.~


수업을 들을땐 오 글쿤,, 하고 완벽하게 이해했다고 생각했는데 수업 진행한 내용을 풀어서 설명하듯이 다시 글로 작성하니 확실하게 더 와닿고 공부가 되는것 같다.
앞으로도 열심히 복습하며 회고록을 작성해야겠다.
리더님이 피드백도 주신다고 하니 동기부여가 확실히 되는 것 같다. 나중엔 같이 교육듣는 교육생들끼리도 피드백 주고 받고 하겠지,,? 설레는걸…

(CLI 명령어도 따로 정리해서 올려야겠다 (˵ ͡° ͜ʖ ͡°˵) )