fork, clone

git이라는 기술을 상업화한 서비스가 GitHub, GitLab, BitBucket(아틀라시안)

fork는 github에만 있는 기능이다.

GitHub Desktop은 시간낭비다. Bash 툴로 연습해라 그래야 github던 gitlab이던 할 수 있다.

큰회사는 BitBucket을 많이 쓴다.

fork한 상태에는 클라우드 상에서만 변화가 됐고, 로컬에는 아무런 변화가 없다.

로컬로 가져오기 위해 clone을 한다.

Git Bash 설치

설치한다.
gitbash와 cmd의 차이는 gitbash는 리눅스 명령어를 잘 지원하고(리눅스 기반임) cmd는 리눅스 기본 명령어가 없음
그래서 윈도우에서 git을 사용하기 위해 gitbash를 설치하여 사용한다.(맥에서는 iterms가 좋다(?))

git clone 명령어를 써서 클론 한다

mkdir cb-opensource-program
cd cb-opensource-program
git clone https://github.com/Penguin135/web-skills.git

클론 완료

user-name ~/cb-opensource-program
$ ls
web-skills/

user-name ~/cb-opensource-program
$ cd web-skills/

user-name ~/cb-opensource-program/web-skills (master)
$ ls
assets/       CODE_OF_CONDUCT.md  design/                index.html     package.json  social/  web_modules/
audio/        CONTRIBUTING.md     firebase.json          LICENSE.md     README.md     src/     www/
blueprint.md  demo.gif            generate-blueprint.js  manifest.json  robots.txt    sw.js

(master)가 생긴다. 해당 폴더는 git을 통해 버전 관리를 하고 있다고 볼 수 있다.
기본으로 생성되는 branch가 master라서 이름이 master 이다.

git log

$ git log
commit 51e7900697911bac3a7832aa22066fe3c215b40a (HEAD -> master, origin/master, origin/gh-pages, origin/HEAD)
Author: andreasbm <andmehlsen@gmail.com>
Date:   Thu Jun 11 23:13:20 2020 +0200

    Minor changes to build tools entry, bump version, only use native share on smaller screens due to web share browser bug, generate new readme.

commit f4557255e2face2e1b51a674e5d5a77db6cfa09c
Author: andreasbm <andmehlsen@gmail.com>
Date:   Sat May 2 13:46:24 2020 +0200

    Update the contributing guidelines.

commit 7b3cbfcf60b92a78f2b5c93fc9544cc5451d8752
Author: andreasbm <andmehlsen@gmail.com>
Date:   Sat May 2 12:57:44 2020 +0200

    Fix typo in accessibility collection.

commit 40019c62ef06cb49db5e7b95a8175db8dd679f13
Author: andreasbm <andmehlsen@gmail.com>
Date:   Fri Apr 17 22:47:07 2020 +0200

    Change experimental banner to use outlines.

commit dc2bd447f00196a0a361760948cb89447177446d
Author: andreasbm <andmehlsen@gmail.com>
Date:   Fri Apr 17 22:10:30 2020 +0200

UI 툴

gitk 명령어를 사용하면 시각화 하여 log를 보여준다.
이외 sourcetree, 깃 크라켄 등의 UI 툴을 사용하기도 한다.

gitk 사용 화면

vsCODE에서 열기

Open Folder

폴더 선택

폴더 열기 완료

CRLF

UTF-8 확인

윈도우에서의 줄바꿈 : CRLF

맥, 리눅스계열의 줄바꿈 : LF

회사에서는 무조건 LF로 설정하도록 함(거의 대부부분의 회사가)

결론 : LF로 바꿔라!

이제 코딩할 준비 끝

package.json

최상위 메타데이터가 저장되어 있음(프로젝트 할 때, 이거 먼저 확인)

dependencys

"dependencies": {
        "firebase": "^7.13.2",
        "lit-element": "^2.3.1",
        "lit-html": "^1.2.1",
        "web-dialog": "0.0.11"
    }

이 프로젝트를 구동하기 위해서 사용하는 외부 패키지들

devdependencies

"devDependencies": {
        "servor": "^3.2.0",
        "snowpack": "^1.6.0"
    }

개발할 때 필요한 패키지. 사용자가 접속할때는 필요 없음

scripts (가장 중요)

"scripts": {
        "serve": "npx servor . index.html 1614 --browse",
        "s": "npm run serve",
        "deploy": "firebase deploy",
        "lit-check": "npx lit-analyzer . --strict",
        "generate-blueprint": "node --experimental-modules generate-blueprint.js",
        "readme": "npm run generate-blueprint && npx @appnest/readme generate",
        "snowpack": "npx snowpack --optimize --include \"src/**/*.js\"",
        "prepare": "npm run snowpack"
    }

nodejs 설치 및 nmp install

npm install

뭔가 바뀐거 같다

4번째에 'node_modules'가 설치된 것을 확인할 수 있다.

git ignore

git으로 버전관리를 안하겠다는 것을 명시, 인터넷이 연결되어 있으면 npm으로 다운로드가 다 가능하므로 명시해 놓음

ignore하지 않으면 깃허브에 다 올라가게 됨.

npm run serve

npm run serve

를 입력하면

"scripts": {
        "serve": "npx servor . index.html 1614 --browse",
        "s": "npm run serve",
        "deploy": "firebase deploy",
        "lit-check": "npx lit-analyzer . --strict",
        "generate-blueprint": "node --experimental-modules generate-blueprint.js",
        "readme": "npm run generate-blueprint && npx @appnest/readme generate",
        "snowpack": "npx snowpack --optimize --include \"src/**/*.js\"",
        "prepare": "npm run snowpack"
    }

맨 위의 "npx server . index.html 113 --browse"가 실행되어 웹 페이지가 실행된다.

localhot:1614로 접속

npm run "무언가" 를 입력하면, 내부적으로 package.json의 property에 "무언가"가 있는지 확인한다.

vs code

Ctrl + Shift + F
프로젝트 전체에서 검색

github의 Action ( git 기술이 아닌 github에서 밀고 있는 기능)

github page

이걸 기본으로 설정해야 하고

선택 사항은 heroku, aws elastic beanstalk, ms azure webapp로 배포서공하면 플러스 점수

영어 번역하기

위의 설명을

코드를 변경하여 번역

저장 후, 크롬 브라우저에서 새로고침. 새로고침으로 안되면 Ctrl + Shift + R 로 이전 캐시를 지우고 확인

새로고침 결과

git status

MINGW64 ~/cb-opensource-program/web-skills (master)
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   package.json
        modified:   src/data/fundamentals.js
        modified:   web_modules/firebase/app/dist/index.esm.js        
        modified:   web_modules/firebase/app/dist/index.esm.js.map    
        modified:   web_modules/firebase/auth/dist/index.esm.js       
        modified:   web_modules/firebase/auth/dist/index.esm.js.map   
        modified:   web_modules/firebase/firestore/dist/index.esm.js  
        modified:   web_modules/firebase/firestore/dist/index.esm.js.map
        modified:   web_modules/import-map.json
        modified:   web_modules/lit-element.js
        modified:   web_modules/lit-element.js.map
        modified:   web_modules/lit-html.js
        modified:   web_modules/lit-html/directives/repeat.js
        modified:   web_modules/web-dialog.js
        modified:   web_modules/web-dialog.js.map

Untracked files:
  (use "git add <file>..." to include in what will be committed)      
        web_modules/common/index.esm-18552045.js
        web_modules/common/index.esm-18552045.js.map
        web_modules/common/lit-html-b5eeea4b.js
        web_modules/common/lit-html-b5eeea4b.js.map
        web_modules/common/render-28ceaced.js
        web_modules/common/render-28ceaced.js.map

no changes added to commit (use "git add" and/or "git commit -a")     

git stauts 명령을 사용하면, 어떤 파일이 수정되었는지 확인할 수 있다.

git status

$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   package.json
        modified:   src/data/fundamentals.js
        modified:   web_modules/firebase/app/dist/index.esm.js     
        modified:   web_modules/firebase/app/dist/index.esm.js.map 
        modified:   web_modules/firebase/auth/dist/index.esm.js    
        modified:   web_modules/firebase/auth/dist/index.esm.js.map
        modified:   web_modules/firebase/firestore/dist/index.esm.js  
        modified:   web_modules/firebase/firestore/dist/index.esm.js.map
        modified:   web_modules/import-map.json
        modified:   web_modules/lit-element.js
        modified:   web_modules/lit-element.js.map
        modified:   web_modules/lit-html.js
        modified:   web_modules/lit-html/directives/repeat.js
        modified:   web_modules/web-dialog.js
        modified:   web_modules/web-dialog.js.map

Untracked files:
  (use "git add <file>..." to include in what will be committed)      
        web_modules/common/index.esm-18552045.js
        web_modules/common/index.esm-18552045.js.map
        web_modules/common/lit-html-b5eeea4b.js
        web_modules/common/lit-html-b5eeea4b.js.map
        web_modules/common/render-28ceaced.js
        web_modules/common/render-28ceaced.js.map

untracked files는 출력되는게 맞지만 modified는 출력되면 안됨(package.json을 수정한 적이 없음)
기존이 CRLF였는데, LF로 바뀌었을 수도 있음

git restore

$ git restore package.json

git checkout -- .

$ git checkout -- .

rudwn@LAPTOP-MKV7A847 MINGW64 ~/cb-opensource-program/web-skills (master)
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)      
        web_modules/common/index.esm-18552045.js
        web_modules/common/index.esm-18552045.js.map
        web_modules/common/lit-html-b5eeea4b.js
        web_modules/common/lit-html-b5eeea4b.js.map
        web_modules/common/render-28ceaced.js
        web_modules/common/render-28ceaced.js.map

nothing added to commit but untracked files present (use "git add" to 
track)

modified가 사라지고, 수정햇던 fundamental.js가 원래대로 변경됨.

npm run s

위에서는 run serve로 실행했는데, 강사님니 잘못 알려줬다 해서 이걸로 실행

$ npm run s

> web-skills@ s C:\Users\rudwn\cb-opensource-program\web-skills       
> npm run serve


> web-skills@ serve C:\Users\rudwn\cb-opensource-program\web-skills   
> npx servor . index.html 1614 --browse


  �  Serving:   C:\Users\rudwn\cb-opensource-program\web-skills       

  � Local:      http://localhost:1614
  � Network:    http://192.168.252.1:1614
  � Network:    http://192.168.1.36:1614

git status

 $ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   src/data/fundamentals.js

Untracked files:
  (use "git add <file>..." to include in what will be committed)      
        web_modules/common/index.esm-18552045.js
        web_modules/common/index.esm-18552045.js.map
        web_modules/common/lit-html-b5eeea4b.js
        web_modules/common/lit-html-b5eeea4b.js.map
        web_modules/common/render-28ceaced.js
        web_modules/common/render-28ceaced.js.map

no changes added to commit (use "git add" and/or "git commit -a")

수정한 fundamentals.js만 수정 되었다고 출력된다. (성공)

git add, commit

수정한 package.js를 add 한다

modifed 문구가 빨간색이었는데, 초록생으로 바뀜

git의 영역

working 영역 , staging 영역, commit 영역(?)

add를 하면 staging 상태가 됨

git commit

$ git commit -m "CSS Best Practices 개요 (#18)"
[master b0c2154] CSS Best Practices 개요 (#18)  
 1 file changed, 4 insertions(+), 4 deletions(-)

git status를 입력하면 위와같이 "git push"를 입력하라고 한다.

 

git push

내가 commit한 내용이 아래에 표시된다!