내배캠 TIL 2022.10.31(S.A 만들기)

오늘 부트캠프 개강했다.

아침에 어떤식으로 진행 될 것인지 설명을 들었다.

 

먼저 새로운 팀원들과 인사를 나누고, 팀장을 정했다.

미니 프로젝트로 우리 팀을 소개하는 웹페이지 만들기가 시작됐다.

 

S.A (starting assignment)만들기

반드시 들어가야할 내용과 기능이 주어졌다.

 

1.프로젝트 제목과 간단 설명을 넣는다.

 

2.웹 페이지 틀을 선과 점으로 이루어진 와이어 프레임으로 잡는다. 

-우리 팀은 figma라는 프로그램을 써서 디자인도 어느정도 넣으면서 틀을 잡았는데, 

나중에 튜터님이 오셔서는 디자인과는 분리해서 하는 것이 좋다고 하셨다.

다음에는 진짜 점과 선으로만 만들어야겠다.

figma라는 프로그램은 다른 팀원이 다룰줄 알았는데, 웹 페이지 틀을 잡는데 편리한 프로그램 처럼 보였다. 

배워보고 싶다.

 

3. 구현해야할 기능을 표로 정리해서 넣는다.

-예시에는 백엔드 기능만 표로 정리했었는데, 

우리팀은 프론트 엔드 기능도 써넣었다. 그래서 튜터님이 표를 두개로 나눠서 정리하면 좋을 것 같다고 하셨다.

방명록 넣는기능

방명록 불러오는 기능 

이 두가지는 백엔드이고

 

단어 찾기 기능

버튼 누르면 이동하는 기능

이 두가지는 프론트 엔드이다. 

 

해당하는 글자를 넣으면 찾아주는 것은 백엔드로 해야하는 줄 알았지만 튜터님이 프론트엔트 javascript로 구현가능하니 그렇게 하는게 좋을 것 같다고 해주셔서 그렇게 하기로 했다. 나중에 팀원들이 filter() 함수를 이용하면 된다고 했다.

단어를 찾는 기능은 filter() 함수

 

강사님은 이 정도 기능을 만들고나서 시간이 남으면

update, delete 기능을 넣으면 좋겠다고 하셨다. 

 

내일은 나리타님과 나만 오게 될 것이라, 먼저 역할 분담을 했다.

백엔드 기능을 내일 우리 둘이서 먼저 만들어 볼 것이다. 

 

오후에 git과 github 특강을 들었다.

 

git이 필요한 이유- 변경사항(버전)을 관리하는 도구

1. 변경한 내용을 기억할 수 있다

2. 변경한 작업을 되돌릴 수 있다

3. 여러명의 코드를 쉽게 나누고 합칠 수 있다.

 

github의 기능

인터넷상에서 깃으로 관리한 프로젝트를 관리해준다. 

개발자들 sns기능도 함

 

git이 관리하는 3개의 공간

-작업디렉토리(.git 파일이 있는 디렉토리,  버전관리 대상이 위치함)

  ↓  add 한다

-스테이지(버전 후보들이 들어가는 곳)

  ↓  commit 한다

-저장소(버전이 만들어지고 관리되는 공간) (영어로는 repository, 레파지토리)

 

로컬 git 이용방법

1. window에서는 git bash를 다운로드 받고, 켠다.

2. cd 파일명 해서 원하는 파일에 들어간다.

3. git init을 넣어서 보이지 않은 git 파일을 만들어준다. git 파일은 보이지 않는다.(git inint은 비어있는 저장소를 만들어줘라라는 뜻)

(ls -al과 ls -a를 이용해서 숨겨져있는 파일까지 확인해본다)

4.touch를 이용해서 비어있는 파일을 만든다. (강의해서는 a.txt 이런식으로 텍스트 파일 만들었다)

5. git add 파일명으로 스테이지에 올린다.

(git rm --cached 파일명으로 스테이지에서 내릴 수 있다.)

(git add .  하면 전체 파일이 다 올라간다)

6. git commit -m "커밋 메세지"

(어떤 버전인지에 대한 설명을 붙여서 커밋해준다. -ㅡm은 message를 줄인것,

그냥 보내면 어떤 변경사항인지 알 수가 없다)

(git commit -m "커밋메세지" 파일명 이렇게 하면 특정 파일만 커밋 할 수 있다)

 

여기까지는 로컬 저장소에서 git 을 다룬 것이고 

지금부터는  git hup 원격 저장소를 이용하는 법을 배운다

 

원격 github 이용방법

1. 새 레파지토리 만드는 법

git hub에 들어가서 +  버튼 누른다. 

New repository 클릭

repository name 칸에 이름 설정

Public 선택해서 모두가 접근할 수 있도록 한다

add a readme file은 선택하지 않는다

 

만들어진 나의 레파지토리 주소

https://github.com/hobak12/sparta

hobak12/sparta

 

2.원격 저장소와의 네가지 상호작용

클론: 원격 저장소를 복제하기

푸시: 원격 저장소에 밀어넣기

패치 : 원격저장소를 일단 가져만 오기 (특강에서 다루지 않음)

풀: 원격 저장소를 가져와서 합치기 

 

클론

강사님 레파지토리에서 복제해오기 실습

1.강사님 레파지토리 주소에 들어가서 code가 써진 초록 네모 클릭

2.http 선택, 복사

3. git bash로 돌아와서

git clone https://github.com/kangtegong/collaboration.git

GitHub - kangtegong/collaboration: pull request 연습용 저장소

이런식으로 넣고 엔터

그럼 복제가 된것이다.

(여기에서 ssh어쩌구 보안 문제로 오류가 나는 사람이 많던데, 나는 일단 괜찮았다. 그 오류에 대한 유튜브 영상을 공유해주셨다)

 

현재 경로 확인 할 수 있는 명령어

pwd

 

푸시

1.레파지토리에서 or push an existing repository 라는 제목 밑에 코드가 있다. 

그것을 복사하고 붙여넣어 준다 

$ git remote add origin https://github.com/hobak12/sparta.git
git branch -M main
git push -u origin main

이걸 gitbash에 넣고  엔터

2. 그러면 github랑 연결 허용하겠냐는? 그런 페이지가 뜨고 내 계정 패스워드를 치면 연결이된다.

3. 새로고침 하면 이전에 로컬 git에 commit 했던 파일들이 올라가 있는것을 볼 수 있다.

4. 새로운 파일을 만들어서 로컬에 commit 했더니 바로 github에 뜨지 않는다. git push를 이용해주면 

새로고침 후 새로운 파일이 들어가있다. 

 

자꾸 end가 떠서 나갔다 들어왔는데 그래도, 또 떠서 인터넷 찾아봤더니, 내용이 창보다 많을 때 마지막에 :가 뜨고

q를 누르면 벗어날 수 있다고 한다. 

 

 정확히 반대되는 개념이 풀 ( 내 로컬 저장소에는 변경사항이 없었으나, 변경된 파일을 원격 저장소에서 가져오는 것)

 

풀

git hub 상에서도 새로운 commit을 만들 수 있다.

 

새 파일 만들기

add file 클릭 → create new file 생성 →  Name your file ... 에 이름 설정 → 내려가서 Creat new file이 써져 있는 칸이 commit message 써주는 칸이다. 메세지 설정 → commit changes 클릭

 

있는 파일 수정하기

파일 클릭 →  연필모양 edit this file 클릭 → 내려가서 Creat new file이 써져 있는 칸이 commit message 써주는 칸이다 메세지 설정 → commit changes 클릭

 

이러한 변경사항들을 git pull 엔터해주면 내 로컬 저장소에도 변경사항이 다운로드 된다~