오늘은 수강 첫 날이라 vscode내의 Terminal 탭에서 사용 할 emotion 등등의 것들을 설치했다.
나는 맥북이 아니라 윈도우여서 Windows Power Shell 에서 설치를 시작했다.
그리고 처음으로 React를 배웠다. 사실 어려울까봐 걱정이 됐는데 생각보단 괜찮았다. (그래도 아직 어렵긴 어려움)
설치할 것을 다 설치하고 나니 react 폴더들에 목록이 많이 생겼다.
원래 쓰던 html, css와는 경로명이 아예 달랐다.
package.json = 설치된 목록
_app.js = html 설정파일
public = 이미지 파일
pages = html파일
styles = css 파일 등등...
아! emotion에서는 태그 이름을 div, id같은 것이 아니라 맘대로 지정할 수 있다는 게 재밌었다.
ex) TextButton 등등
숙제로 내주신 게시판 만들기를 했는데 내가 짠 코드는 어째 너무 줄줄줄 길게 쓴 것 아닌가 좀 맘에 안들었다. 그래도 화면으로 출력은 예쁘게 잘 됐다.
VScode에서의 Github설정 모음
(기본적으로 git을 이용하려는 폴더 내에 .git파일이 설치되어있어야 함.)
0. git init : .git이 설치되어있지 않을 때 설치하는 태그(최초1회)
1. ls : 현재 위치 폴더 내의 파일 목록 확인.
2. ls -al : 현재 폴더 내의 숨김 파일 목록까지 모든(all) 파일목록 확인.
3. cd OOO : cd (change directory)+파일명 / OOO(폴더명) 폴더로 들어간다.
ex) cd ../ 상위폴더로 들어간다.
4. touch : 파일을 만들어라.
5. mkdir OOO : OOO(폴더명)이라는 폴더를 만들어라.
6. git status : 현재 git상태 확인. (확인했을 때 빨갛게 표시되는 줄이 있으면 저장이 안됐거나 한 것. )
7. git add . : 전체(.)를 add(1차저장)한다.
8. git commit -m '저장' : 최종저장하며, 저장완료 시 '저장'이라고 메세지 뜸.
9. git push origin OOOOO : OOOOO라는 git의 branch 폴더로 업로드한다. (보통의 경우 master폴더)
10. git clone '깃주소': '깃주소'내의 폴더와 파일이 모두 다운로드 됨.
!! 협업 시 사용 !! (파일 수정사항 있으면 재업하면 된다.)
ex) git clone http://gitbub.com/practice/githubhubhub
11. git pull origin OOOOO : 이미 내가 clone해서 받은 폴더안에 새로 생성되었거나 수정된 파일이 있다면 새로 덮어쓰기 한다.
(rm (=remove) -rf(file, folder).git )
12. git log : commit한 것 확인
-
git config: 최초 초기 설정. 나중에 정보 수정하거나 할 때 사용가능
ex) git config -g user.name =hodoo : hodoo로 user.name을 설정한다. (기존에 설정되어있던 name에 덮어쓰기 함.) -
git config --global user.name: github에 등록된 user.name -
git config --global user.email: github에 등록된 user.email -
git stash: 임시저장공간. ( 이 다음단계 pull ) -
git stash pop: stash list에 있는 것을 팝! 빼옴
(git stash 한 뒤에만 사용할 것) -
git stash list: stash한 뒤 저장 성공적으로 됐으면 list에 뜸. -
git pull origin OOOOO: 이미clone해서 받아온 폴더의 새로운, 수정된 작업물을 추가로 더 받겠다. -
yarn dev: 해당 폴더의 파일들을 브라우저에서 구동시켜 볼 수 있음.
ex)ready - started server on 0.0.0.0:3000, url: http://localhost:3000
접속을 위해 port 숫자를 받고(3000), 여러 페이지를 보고싶다면 각각 다른 숫자를 주면 됨 (ex)yarn dev -p 3500! 하나의terminal창에서yarn dev시 이 전에 사용한port는 사용 중지할 때 까지 다른 페이지로 재사용 불가 →Ctrl+c해서 중지해줘야 함.) -
yarn install:package.json에 나열된 모든 dependency를node_modules에 설치한다.(emotion, apollo등 필요한 기능 한번에 추가받는 것.install후 원하는 기능을 받고싶으면yarn add @원하는 기능입력하면 됨.) -
yarn install --force: 이전에 설치된 패키지들을 포함하여 모든 패키지를 다시 설치할 때 사용. -
npx create-next-app AAA_BBB:AAA_BBB라는 이름의 JS 폴더를 만들음. -
Yarn dev: 개발시 사용 -
Yarn build: 배포 시 html / css / js 최적화되어 나옴. (서버 안 떠)
: 빌드 할 때에는 에러를 모두 없애야 한다. husky 가능한 정도로. -
Yarn start: 서버사이드 렌더링 할 때 사용 (서버 떠) -
git branch: 브랜치 목록 보기 -
git branch NewBranch: 현재 브랜치안에서 새로운 브랜치 생성 -
git checkout NewBranch: NewBranch라는 브랜치(다른 브랜치)를 체크아웃. -
git checkout -b NewBranch: 현재 브랜치에서 새로운 브랜치 생성하고 체크아웃하기. -
git log: 모든 이력 보여줌. -
git log - -since="6hours": 6개월동안 커밋한 내역 보여줌 -
git log - -before="2 days": 이틀 전까지의 커밋 내역 보여줌. -
git remote -v: 현재 연결된 깃허브 주소 확인 -
git remote set-url origin "url주소": 연결된 remote 저장소 url주소 바꾸기 -
git remote add origin OOOOO: OOOOOO폴더로 저장 (github에 해당 폴더가 만들어져있어야 함.)
(git remote add origin http://github.com/~ 와 같이 주소로 해도 됨.) -
git remote add 깃허브주소: 원격 저장소 추가 (origin이 먼저 되어있어야 함.)
37-1 )git remote add 두 번째 git주소: 또 다른 이름으로 remote를 추가 해줌.두 번째라는 이름으로 추가 한다고 가정하면 위 명령어 처럼 입력. (여러개 추가되면 혼동 올 수 있음..!) -
git remote remove origin: 기존에 연결된 원격저장소 삭제 -
git push -u origin main:로컬 레포의 main 브랜치의 내용을 리모트 레포의 main 브랜치에 보내라-u=—set-upstream: 로컬 레포의 main 브랜치가 리모트 레포의 main 브랜치를 항상 추적하도록(tracking) 하도록 설정됨.
-
git show: 방금 깃 푸시한 내용 보여줌. -
npx create-next-app --tsoryarn create next-app --typescript: next react ts 플젝 초기세팅 -
git fms build: ~~ -
git commit --amend: git commit 메세지 수정 ( :wq!로 완료처리 해줌 ) -
git commit --amend --no-edit: 커밋메세지 수정없이 이전 커밋에 추가사항을 함께 커밋 -
rebase했거나,amend commit을 한 경우 =포스푸쉬 (git push -f)
git push -f: 강제로 push (force push -> 확실한 경우에만 사용하기) -
git push origin pye-335-2:pye-335 -f: 335번으로 335-2번을 강제로 푸쉬한다. -
rebase하기
→ 작업중이던 커밋 임시로 브랜치만들어서 커밋
→ 메인 브랜치로 들어가서git pull
→ 작업중이던 브랜치 돌아와서git rebase main
→ 임시커밋내용 되돌리기
→ 에러 사항 수정후 이어서 리베이스 할 때git rebase --abort -
merge가 되지 않은 상태에서 다음 작업 하고있을 때
→ 먼저 임시 작업 브랜치 생성
→ 작업해~
→ 수정사항 발생 !
→ 해당 수정사항이 있는 원래 브랜치로 돌아가서 수정
→ 머지됐어
→temp에서 작업하던 내용을commit
→main에서pull받아
→ 새로 브랜치 생성(임시 말고 찐브랜치)
→temp에서 커밋한 내용을cherrypick으로 가져옴 (우클릭 + 체리픽커밋)
→ 끝~! -
cherry pick: 원하는 커밋만 가져올때 사용
→ ex)main에서 체리픽해서 커밋 가져와 만들 브랜치 새로 생성
→ 새 브랜치에서 원하는 커밋을 가져올 특정 브랜치(pye-335)의 커밋 체리픽
→ 가져와짐.
→ 체리픽은 커밋만 꺼내오는 용도라서 굳이 main이 아니라 어떤 브랜치에서 만들어도 상관 없음. -
git push pye -f/git push -f
→ 이미 이전에 해당 브랜치에 푸시 한 이력이 있으면 git push만 해도 되자나?
→ 이거는 이제 메인에서 리베이스까지 받고 수정하고 한게있을때 해줘 -
git reset HEAD~ --soft: 커밋햇던 거 돌려줌
--soft: 이전에 했던 커밋 돌려줌
--hard: 커밋을 삭제한 채 돌려줌. (쓰지마)
→ 작업 후 해당 브랜치에서 내린 새 브랜치에서 작업하고 있는데 이전 브랜치의 수정사항이 들어올 경우
→ 임시로temp같은 브랜치 만들어서 임시커밋해두고 이전 브랜치로 와서 수정 후 커밋 복귀시켜서 재작업 -
github repo와 연결 시 https보다는 ssh로 연결해야 확실(?)핳다는거같음.
-
cat ~/.ssh/id_rsa.pub: ssh키가 mac에 있는지 확인.
ssh키가 있다면 ssh-rsa AAAAA.....이런식으로 뜸. -
초기 세팅 시 yarn 설치를 위해 node설치 되어있나 확인
node -vornode --version
설치되어있지 않다면 설치 https://nodejs.org/ko -
npm install -g yarn: yarn 설치 -
git branch -m newBranch: 현재 위치한 기존 로컬브랜치의 이름을 newBranch로 변경함. -
npm cache clean --force. : 강제로 npm 캐시 지운다 -
npm cache verify: 캐시가 지워지고 디스크 공간이 회수되었는지 확인해야 하는 경우. -
git fetch: 오리지널 브랜치로 싱크 맞추기
