22.11.17)Git과 FIREBASE,웹퍼블리싱에 대한 14일차

#오늘 배운 것

 

소스트리 - git을 좀 더 편하게 사용할 수 있는 보조 도구

소스트리를 이용하지 못하는 환경에는 깃 명령어를 사용해야하기 때문에 깃 명령어도 알아야한다.

mkdir (이름)디렉토리를 만든다.

특정 경로로 이동하기
$ cd <경로>

파일 생성
$ touch 파일명.확장자

현재 디렉터리의 폴더 및 파일 보기 (숨김파일 및 폴더는 제외)
$ ls

현재 디렉터리에서 숨김파일 및 폴더까지 모두 보기
$ ls -a
$ ls -al

로컬 저장소를 만들기
$ git init

파일 안 내용 보기
$ cat 파일

숨김 폴더 지우기
$ rm -rf 폴더명

숨김 파일 지우기
$ rm .파일명

파일에 내용 추가하기
$ vi 파일명.확장자

- vi/vim 편집기가 열리고 나면 바로 어떤 내용을 쓸 수 없다
- a와 i를 입력해 하단에 INSERT 표시가 나와야 한다(a= append ,i= insert)
- 입력이 끝났다면 ESC를 누른다 (하단에 INSERT 표시가 사라진다)

- 내용 입력하고 마지막 한칸 띄는 것이 좋다.(파일의 끝을 판단하기 위해)
- :w 로 저장할 수 있다(write)
- :q 로 (저장하지 않고) vi/vim 창을 닫을 수 있다(quite)
- :wq 로 저장 후 닫을 수 있다
- :wq! 강제로 저장 후 닫을 수 있다
※소문자로 입력해야 적용된다.

Untracked files : 변경사항없는 새로운 (추적하지 않은) 파일

Git이 기존에 변경사항이 있는 파일을 tracked files이라고 한다.

스테이지에 추가하기
$ git add <파일이름> <파일이름>

현재 작업 디렉터리의 변경사항을 모두 스테이지에 추가하기
$ git add .

커밋하기 (커밋 메세지의 헤더만을 작성하기)
$ git commit -m "커밋 메세지 헤더"

자세한 커밋 메세지로 커밋하기
$ git commit

스테이지에 추가와 커밋 동시에 하기 (Tracked File에 한해 사용 가능)
//실무에선 거의 사용하지 않음
$ git commit -am "커밋 메세지 헤더"

최신 커밋을 변경하기
$ git commit--amend

커밋 메시지 적을 때 다른 사람이 적은 github참고하기.(제목/본문/레퍼런스 올리면 좋다)

자세한 커밋 메세지를 작성할 때  밑의 내용 지우기않고,첫줄은 head 한칸 띄우고 내용을 쓴다.

commit hash 부분 꼭 있는지 확인하기

commit 079bd07200bed56b2ac84db8919139383092a344

현재 커밋들의 목록 조회하기
$ git log

현재 커밋들의 목록 한 줄로 조회하기
$ git log --oneline

현재 커밋들의 목록 + 각 커밋들의 변경사항까지 확인하기
$ git log -p

현재 커밋들의 목록을 그래프 형태로 조회하기
$ git log --graph

혼용하여 사용하기
$ git log --oneline --graph
$ git log --oneline -p

현재 작업 디렉터리에서의 작업 내역과 최신 커밋을 비교하기
최신 커밋 vs 현재 변경 사항의 차이점
$ git diff

스테이지와 작업 내역과 최신 커밋을 비교하기
$ git diff --staged

커밋끼리 비교하기
※앞에있는 커밋해시를 기준으로 비교하는 것이기 때문에 순서를 잘 써야한다.
$ git log <커밋해시> <커밋해시>

버전을 되돌리는 두가지 방법 :

revert : 버전을 되돌린 새로운 버전 만듬

$ git revert <취소할커밋>

reset : 버전을 되돌리기(ctrl + z)

soft reset: 커밋을 했다는 그 사실만을 되돌리기
$ git reset --soft <되돌아갈 커밋>

mixed reset: 스테이지에 추가했다는 사실까지 되돌리기
$ git reset --mixed <되돌아갈 커밋>
$ git reset <되돌아갈 커밋>

hard reset: 변경사항을 만들었다는 사실까지 되돌리기
$ git reset --hard <되돌아갈 커밋>

soft / mixed / hard

하나의 버전이 만들어지는 과정

1.작업 디렉토리에서 변경사항 생성 > 모든것을 되돌리기 : hard reset

2.스테이지 추가 > 스테이지 추가와 커밋적용전으로 되돌리기 : mixed reset(돌려서 유지보수할때 사용)

3.저장소 커밋 > 커밋 적용만 되돌리기 : soft reset

 

$ git stash -m " " :메모를 짧게 남기기 가능(임시저장)
$ git stash list : 임시저장한 내용을 확인 가능
$ git stash apply stash@{0} :list로 조회한 임시저장 내용을 적용.
$ git stash drop stash@{0} : 임시저장 내용 삭제.

 

head : branch(작업환경)의 최식 커밋

master(main) : git이 관리하는 최초의 branch 

master브랜치로 사용하다가 나누어 사용이 가능하다. 나누어 작업하더라도 master브런치는 별개의 커밋을 가진다.

별개의 브런치를 생성할 경우 수정한 버전의 master브런치를 포함한다. (수정 master브런치까지  n개 + a브런치 n개)

head를 바꾼다 : check-out (*로 표기)

추후에 협업을 통해 master브랜치로 공통으로 작업하고 브랜치를 병합한다.

만약 master브랜치에서 빨리감기 병합이 아닌 병합 b브랜치을 합치게 된다면 새로운 커밋이 작성된다. 

변함이 없던 브랜치 내용이 업데이트 되는 병합 기법을 "빨리감기 병합"이라고 한다.

새로운 브랜치 생성하기
$ git branch <브랜치이름>

해당 브랜치로 체크아웃하기
$ git checkout <브랜치이름>

새로운 브랜치를 만듦과 동시에 체크아웃하기 (수업에서 다루지는 못했지만 유용합니다)
$ git checkout -b <브랜치이름>

브랜치 병합하기
$ git merge <브랜치이름>

if - 같은 부분을 master브랜치와 전버전의 a브랜치에서 수정을 하고 병합을 했다면 충돌이 발생한다.

충돌할 경우 git에서 위의 형식으로 정리해준다.

충돌 해결법

1. 최종적으로 포함할 내용을 직접 선택한다
  -A내용과 B내용 중 A내용을 선택하겠다면 A내용을 제외한 모든 내역을 지우면 된다.
2. 다시 커밋한다
  -git commit 후 저장한다.

 

원격 저장소

※원격저장소와 별명을 같게 작성하면 안된다.

...or create : 아무것도 없는 상태원격 저장소와 상호작용하기 위해 사용.

...or push : 이미 로컬 저장소가 있을 때 그 내용을 원격저장소에 올릴 때 사용.

origin : 원격 저장소의 별명의 기본. 주소 입력 후 remote했을 때 origin이 나와야 성공.

원격 저장소 이름 조회하기
$ git remote

원격 저장소 이름 + URL 조회하기
$ git remote -v 

원격 저장소 추가하기
$ git remote add <원격저장소이름> <원격저장소경로>

clone: 원격 저장소의 내용을 내 컴퓨터로 복제해오기(용량이 크면 시간이 오래걸린다/HTTP로 해도 무방)
※clone을 만들 때 git init을 할 필요가 없다. 복제내용의 .git숨김폴더도 가져온다.
$ git clone <원격저장소경로>

push: 로컬의 변경사항을 원격저장소로 밀어넣기
$ git push <원격저장소이름> <로컬브랜치이름>

* 참고) 아래와 같이 -u 옵션과 함께 push하면 이후로 <원격저장소이름> <로컬브랜치이름> 생략 가능
ex) $ git push -u origin main라고 적으면 다음으로 push할 때는 $ git push만 적어도 가능.
$ git push -u <원격저장소이름> <로컬브랜치이름>

fetch: 원격저장소의 변경사항을 로컬로 '일단 갖고만' 오기 (로컬 브랜치에는 변함이 없다!)
※병합은 하지 않고, main 브랜치도 변화X
$ git fetch <원격저장소이름> <로컬브랜치이름>

pull: 원격저장소의 변경사항을 로컬로 갖고와서 합치기
$ git pull <원격저장소이름> <로컬브랜치이름>

fetch

fetch한 내용을 합칠시 git merge origin/main >  merge가 가능하다.

git check out FETCH_HEAD를 통해 fetch한 파일들을 조회 가능하다.

다른 내용을 fetch할시 전의 내용을 사라진다.

 pull

내 로컬 저장소의 브랜치에 합쳐준다. 원격저장소가 업데이트 됐다면 pull을 통해 로컬 저장소의 내용을 전부 업데이트 한다.

 

Pull Request로 협업하기

내가 소유하고 있는 원격저장소에는 push를 할 수가 없다. 

원격 저장소가 변경사항을 pull하도록 요청(request)을 보내는 방식

Pull Request를 보내는 단계

1. 기여하려는 저장소를 본인의 계정으로 fork하기(github에서 fork하면 내 저장소로 복제된다)
2. fork한 저장소를 clone하기(계정/콜라보레이션으로 clone하기. 원본저장소XXXXX)
3. 브랜치 생성 후 생성한 브랜치에서 작업하기
4. 작업한 브랜치 Push 하기 (git push branch test)
5. Pull Request 보내기 (깃허브로 이동시 브런치수정 버튼 생성)

 

 

 

firebase

authenication,cloud firestor,cloud storge 3가지를 배운다.
html,css,js를 활용한 배포를 사용할 것이다. 

권장 항목
가비아 구입한 도메인을 S3정적 웹소스팅 주소와 연결
로그인, 회원가입시 입력값에 대한 유효성 검사를 적용한다

 

서버리스 : 서버관리없는 백엔드 ,서버를 내가 관리할 필요가 없다
홈서버 관리 > IDC직접 관리 >Cloud Computing Service(AWS, Azure,GCP,etc)
하드웨어 관리 위임(EC2) > 소프트웨어 관리 위임 (Firebase,AWS Lambda)
서버리스 모델: AWS Lamdba - API함수 직접 등록 필요가
 Firebase - 별도의 서버 설정없이 바로 백엔드 서비스 이용 가능
Firebase - 별도의 서버나 DB를 직접 관리하지 않아도 백엔드를 이용할 수있는 플랫폼
 authenication,cloud firestor(monggoDB와 비슷,CRUD,API를 여기서 받는다),cloud storge:파일업로드와 다운로드

새로고침없이 수정 삭제가 된다면 .CSR이 적용된것.
개별로 Firebase를 연결하는 코드가 있다.라이브러리와 비슷하지만 라이브러리는 아니다. 플랫폼!!

앱 등록 > 바닐라js니 <script>사용</script>
Authentication > 
이메일/비밀번호 : 새 공급업체에 구글 추가하면 구글으로 로그인이 추가됨
깃허브 : 사용 설정체크와 클라이언트(깃허브 > 셋팅 > 디벨로퍼 셋팅 > oauth apps :NEW oauth app생성 firebase 생성 url 복붙 > 생성 후 client아이디 복붙 비밀번호 :client secrets) 저장하면 끝
셋팅 > 사용자 계정연결에 ID 공급업체별 여러계정 만들기. > 똑같은 이메일 주소로 로그인이 가능하다.
승인된 도메인을 추가해야만 연결이 가능하다.

cloud firestor >
데이터베이스만들기 : 빠르게 셋팅하려면 테스트 모드로 시작 위치:서울로 > 끝

cloud storge > cloud firestor와 비슷하게 하면 된다.

SPA & JS 분할 (ES6의 module 사용)

 

script의 type = module으로 작성시 ES6의 module 사용이 가능하다.
window.라는 전역객체를 강제로 적용시켜줘야 할당이 가능하다.(지정해주면 module함수를 어디서든 사용이 가능하다)
모듈은 다른 파일에 있는 함수를 불러오는데 window 객체는 짱 강력하기 때문에 다른 곳에서 납치해올수있다 bb

match() 문자열이 정규식(정규표현식,regex)과 매치되는 부분을 검색 - 이메일 정규식 js 구글링 참고하기

일치하는게 없으면 null적용,

 

?? null병합연산자 - 삼합연산자 ( if문, else:조건)대신 쓴다. (if문 ?? else조건)

getcommentlist >댓글 리스트를 불러온다.

 

프로필 이미지를 변경시 > changeprofile 함수 실행. > 버튼에 .disabled를 실행해 중복버튼 누름을 방지한다. > image = ref (만들 폴더 안에 ${폴더.유저id}/${uuid값}으로 저장해둔다) ((중복되지 않으면 다른db와 합쳤을 때 에러가 나지 않는다.))

두번째 인자는 유저가 갖는 해쉬값하고 이미지 고유한 해쉬값을 붙이고 넘기는 거!!

uid는 유저 고유 해쉬값

 

js fileReader : 구글링으로 학습할 것