20210531 StarbucksClone05 : 배포(Netlify), 로그인 페이지, 모듈화 관리, Git(기본 명령어, reset, clone, branch 올리기), GitHub(pullRequest, 충돌, 로컬병합)

Starbucks Clone05

Netlify 배포

• Netlify Official Site
• What is Netlify? by Heropy Blog
• 지속적인 배포(Continuous Deployment)
  • github의 원격저장소를 연결해주면 Netlify가 원격저장소의 내용을 가지고 가서 사이트를 자동으로 만들어 줌 (Github에서 project가 수정되면 알아서 Netlify가 인자하여 사이트에 수정사항을 반영 함, 즉 지속적인 관리 까지 가능함)
• Netlify는 신뢰할수 있는 사이트라서 github 저장소 모두 연결해도 상관 없음

로그인 페이지 만들기 (JS, CSS 모듈 이원화)

SignIn HTML 기본 작업 (head)

• signin 폴더에 index.html 만들고 원래 index.html을 복사해서 붙여넣음
• 푸터와 헤더만 남기고 body의 나머지 제거
• favicon ,icon, Reset, main.js, main.css, OG만 남기고 나머지 CDN 삭제
• 상대경로 변경해 주기 (폴더 내부에 있기 때문에 상대경로를 변경 시켜줘야 함)
  • ctrl + H -> ./ 를 ../로 바꾸어 주기

공통 모듈 분리 시키기 (공통 모듈 관리, 이원화)

• 단지, html만 분리 시킨다면, 안쓰는 JS 코드들이 해당 요소를 못찾아 console에 error를 일으킨다.
• 페이지들을 만들게 되면서 공통적으로 화면에 필요한 요소들을 출력하려면 공통적인 HTML, CSS, JS 들이 있음
• 그래서 관리 하기 편하게 하기 위해서 공통적인 부분을 이원화 하여 모듈화 시켜 언제든지 편하게 페이지를 만들 수 있도록 한다.
• Header와 footer를 구현하는 CSS, JS를 따로 common.js, common.css로 만들어서 분리하고 해당 파일을 기존의 home 페이지 html에 연결함
  • 기존 index.html -> main, common의 js, css 모두 연결
  • signin의 index.html -> common의 js, css 연결
• common.js : 헤더, 푸터관련 부분
• common.css : 헤더, 푸터, 원래 공통으로 사용되는 선택자 부분

SignIn HTML 구조 (body) & CSS

• signin index.html에 signin.css 연결하기
• signin.css 파일 만들고 CSS 작성

<!-- SIGN IN -->
<section class="signin">
  <h1>로그인</h1>
  <div class="signin__card">
    <h2><strong>Welcome!</strong> 스타벅스에 오신 것을 환영합니다.</h2>
    <form>
      <input type="text" placeholder="아이디를 입력하세요." />
      <input type="password" placeholder="비밀번호를 입력하세요." />
      <input type="submit" value="로그인" />
      <p>
        * 비밀번호를 타 사이트와 같이 사용할 경우 도용 위험이 있으니,<br />
        정기적으로 비밀번호를 변경하세요!
      </p>
    </form>
    <div class="actions">
      <a href="javascript:void(0)">회원가입</a>
      <a href="javascript:void(0)">아이디 찾기</a>
      <a href="javascript:void(0)">비밀번호 찾기</a>
    </div>
  </div>
</section>

Git : 명령어

이름	설명
초기 설정 관련 명령어	------------------------------
git init	git을 해당 프로젝트에서 시작
git config --global user.name "이름"	초기사용시 사용자 이름
git config --global user.email "이메일"	초기 사용시 사용자 email
git config --global core.autocrlf true	개행 자동 관리
git config --global --list	config 보기
git add remote origin 주소	원격 저장소 연결
본격적인 커밋 관련(로컬, 원격) 명령어	------------------------------
git add .	stage 에 수정 및 생성된 파일 추가 (초록색 만들기, 추적 모든 파일 허용)
git commit -m"내용"	커밋하기
git push origin master	원격 저장소에 올리기
git pull origin master	로컬에 원격에 있는 내용을 가져옴 (로컬에 병합)
Branch (브렌치) 관련 명령어	------------------------------
git branch -a	원격 저장소도 확인 가능함
git branch	브렌치 확인
git branch 만들 브랜치명	브렌치 만들기
git checkout 이동할 브랜치명	해당 브렌치로 이동하기
git push origin 해당 브렌치 이름	특정 브렌치 원격에 올리기
git branch -r	원격저장소의 branch를 보여줌
git checkout -t origin/해당 브렌치 이름	브렌치를 원격저장소에서 가져오고 해당 브렌치로 이동까지 함
git branch -d 해당 브렌치 이름	특정 브렌치 지우기 (자기 자신인 상태에서 자신은 못지움 주의, 이동해서 지울 것!)
git branch -b 만들 브렌치 이름	만들 브렌치를 생성하고 그 브렌치로 이동 함
Reset (되돌아 가기) 관련 명령어	------------------------------
git reset --hard HEAD~1	커밋 한 단계를 지움으로써 한 단계 전으로 감 (저장 안됨)
git reset --hard HEAD~2	커밋 두 단계를 지움으로써 두 단계 전으로 감 (저장 안됨)
git reset --hard ORIG_HEAD	커밋을 reset으로 지우거나 했을 때 다시 지우기 전으로 돌아가고자(복구) 하는 경우 (딱 한번의 명령 코드만 기억하고 있음)
기타 명령어	------------------------------
git log	git 커밋 내역 확인
git clone 주소	git hub의 특정 프로젝트 주소를 기재해서 로컬에 다운로드 함

Git : 프로젝트 복제 (Clone)

• Github에서 복제할 프로젝트의 git 주소를 복사
• 프로젝트를 다운 받을 장소인 dir위치에서 git clone 주소 명령어로 사용
• 자동으로 다운 받아 복제 됨

Git : 되돌리기 (reset)

• git reset의 경우 커밋을 지워서 되돌아 가기 때문에 조심해야함 복구가 안됨
• 된다고 하더라도 이전에 reset했던 딱한번의 명령만 복구가 됨

사용	설명
git reset --hard HEAD~1	커밋 한 단계를 지움으로써 한 단계 전으로 감 (저장 안됨)
git reset --hard HEAD~2	커밋 두 단계를 지움으로써 두 단계 전으로 감 (저장 안됨)
git reset --hard ORIG_HEAD	커밋을 reset으로 지우거나 했을 때 다시 지우기 전으로 돌아가고자(복구) 하는 경우 (딱 한번의 명령 코드만 기억하고 있음)

Git : 브렌치 (branch)

• branch를 생성해서 원격 저장소(gitHub)에 올릴 려면, 무조건 해당 브렌치의 상태에서 push를 해야 올라감
  • 또한 push 할때 branch 명을 명시해줘야 함
  • git push origin 해당 브렌치 이름
• 원격저장소에서 clone을 통해서 project를 가져오면, mater 브렌치만 가져오게 됨
• 원격의 브렌치도 가져오는 방법 : git checkout -t origin/해당 브렌치 이름

사용	설명
git push origin 해당 브렌치 이름	특정 브렌치 원격에 올리기
git branch -r	원격저장소의 branch를 보여줌
git checkout -t origin/해당 브렌치 이름	브렌치를 원격저장소에서 가져오고 해당 브렌치로 이동까지 함
git branch -d 해당 브렌치 이름	특정 브렌치 지우기 (자기 자신인 상태에서 자신은 못지움 주의, 이동해서 지울 것!)
git branch -b 만들 브렌치 이름	만들 브렌치를 생성하고 그 브렌치로 이동 함

GitHub : Pull Request로 원격 branch 병합 -> Netlify 반영

• 해당 프로젝트의 site settings에 들어가면 Deploy contexts 가 있는데, 여기서 배포에 쓰이는 브렌치가 적혀 있음 (제품 브렌치)
  • 여기서 쓰이는 브렌치가 수정되어야 Netlify에서도 반영이 됨

GitHub : Pull Request (풀리퀘)

• 그래서 따로 하고 있는 작업이 끝나서 반영하고자 하면, 브렌치를 병합해야함
• 원격상의 브렌치를 병합할 때,
  • 해당 프로젝트에서 Pull Request 선택
  • New pull request
  • target branch <- sub branch 선택 (우측 Able to merge 코멘트 확인)
  • Create Pull request
  • 합친다는 코멘트 작성(선택) - Create Pull request
  • Pull request에 요청이 와있음 (open 상태의 요청이 와있음)
  • 합칠거면 merge pull request - confirm merge - 완료
  • 요청이 merged 상태로 변경 됨

• Netlify에서 published 확인하고, 사이트 열어보면 반영 되어 있음

GitHub : Conflict 충돌 & 로컬 병합

• 원격 저장소의 커밋이 로컬에 존재하지 않고, 이전인 상태에서 다른 내용을 작성하여 커밋하였을 경우 (로컬 커밋과 원격 저장소의 커밋의 흐름이 다름)
• 다른 환경에서 부딪치는 경우 git reset --hard HEAD~1 를 통해서 흐름이 맞지 않는 커밋까지 모두 없애고 git pull origin master로 받아와서 일치시키고 수정사항 반영해서 올려야 하지만, 이제까지 작업한 것을 모두다 잃을 수 있기 때문에 그자리에서 pull로 땡겨서 병합을 사용함

• 원격 저장소의 내용을 가져와 로컬에서 병합하는데 git pull origin master를 사용함
• 그럴 경우 같은 태그의 위치 및 내용이 부딪치는 경우 어떻게 할 것인지 사용자에게 선택하라고 함 (마음대로 합칠수가 없으므로)

<!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>
    <!-- 로컬 변경사항 -->
    <<<<<<< HEAD
    <h1>ABC</h1>
    =======
    <h1>XYZ</h1>
    >>>>>>> 8359875ea8e54cec98993a19f213768c9a471e25
    <!-- 원격 변경사항 -->
  </body>
</html>

• 남겨놓을 사항만 남겨 두면 됨
• vscode에서 제공하는 탭에서는 손쉽게 버튼으로 제공하고 있음
  • Accept Current Change : 현재 변경 상항 수락
  • Accept Incoming Change : 수신 변경 사항 수락
  • Accept Both Changes : 두 변경 사항 모두 수락
  • Compare Changes : 변경 사항 비교
• 아예 부딪치는 부분 둘다 제거하고 다른 내용으로 쓰고 저장하면 새로운 내용으로 버전 저장 가능
• 수정하고, stage에 올리고 commit 작성해서 버전 올리면, 원격에 push가 됨