터미널명령어(git, yarn ...)

오늘은 수강 첫 날이라 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한 것 확인

13. git config : 최초 초기 설정. 나중에 정보 수정하거나 할 때 사용가능
    ex) git config -g user.name =hodoo : hodoo로 user.name을 설정한다. (기존에 설정되어있던 name에 덮어쓰기 함.)

14. git config --global user.name : github에 등록된 user.name

15. git config --global user.email : github에 등록된 user.email

16. git stash : 임시저장공간. ( 이 다음단계 pull )

17. git stash pop : stash list에 있는 것을 팝! 빼옴
    (git stash 한 뒤에만 사용할 것)

18. git stash list : stash한 뒤 저장 성공적으로 됐으면 list에 뜸.

19. git pull origin OOOOO : 이미 clone해서 받아온 폴더의 새로운, 수정된 작업물을 추가로 더 받겠다.

20. 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해서 중지해줘야 함.)

21. yarn install : package.json에 나열된 모든 dependency를 node_modules에 설치한다.(emotion, apollo등 필요한 기능 한번에 추가받는 것. install후 원하는 기능을 받고싶으면 yarn add @원하는 기능 입력하면 됨.)

22. yarn install --force : 이전에 설치된 패키지들을 포함하여 모든 패키지를 다시 설치할 때 사용.

23. npx create-next-app AAA_BBB : AAA_BBB라는 이름의 JS 폴더를 만들음.

24. Yarn dev : 개발시 사용

25. Yarn build : 배포 시 html / css / js 최적화되어 나옴. (서버 안 떠)
    : 빌드 할 때에는 에러를 모두 없애야 한다. husky 가능한 정도로.

26. Yarn start : 서버사이드 렌더링 할 때 사용 (서버 떠)

27. git branch : 브랜치 목록 보기

28. git branch NewBranch : 현재 브랜치안에서 새로운 브랜치 생성

29. git checkout NewBranch : NewBranch라는 브랜치(다른 브랜치)를 체크아웃.

30. git checkout -b NewBranch : 현재 브랜치에서 새로운 브랜치 생성하고 체크아웃하기.

31. git log : 모든 이력 보여줌.

32. git log - -since="6hours" : 6개월동안 커밋한 내역 보여줌

33. git log - -before="2 days" : 이틀 전까지의 커밋 내역 보여줌.

34. git remote -v : 현재 연결된 깃허브 주소 확인

35. git remote set-url origin "url주소" : 연결된 remote 저장소 url주소 바꾸기

    • 기존 깃 주소에서 새 레포로 코드 옮길 때 이미 옮겨져있는 상태에서 이전 레포에서 미처 옮기지 못한 브랜치가 있다면, 레포 주소를 변경 후 푸쉬하면 됨. (이때, 새 레포가 새 그룹계정의 레포라면 ssh 키 새로발급)

36. git remote add origin OOOOO : OOOOOO폴더로 저장 (github에 해당 폴더가 만들어져있어야 함.)
    (git remote add origin http://github.com/~ 와 같이 주소로 해도 됨.)

37. git remote add 깃허브주소 : 원격 저장소 추가 (origin이 먼저 되어있어야 함.)
    37-1 ) git remote add 두 번째 git주소 : 또 다른 이름으로 remote를 추가 해줌. 두 번째 라는 이름으로 추가 한다고 가정하면 위 명령어 처럼 입력. (여러개 추가되면 혼동 올 수 있음..!)

38. git remote remove origin : 기존에 연결된 원격저장소 삭제

39. git push -u origin main :로컬 레포의 main 브랜치의 내용을 리모트 레포의 main 브랜치에 보내라

    • -u = —set-upstream : 로컬 레포의 main 브랜치가 리모트 레포의 main 브랜치를 항상 추적하도록(tracking) 하도록 설정됨.

40. git show : 방금 깃 푸시한 내용 보여줌.

41. npx create-next-app --ts or yarn create next-app --typescript : next react ts 플젝 초기세팅

42. git fms build : ~~

43. git commit --amend : git commit 메세지 수정 ( :wq!로 완료처리 해줌 )

44. git commit --amend --no-edit : 커밋메세지 수정없이 이전 커밋에 추가사항을 함께 커밋

45. rebase했거나, amend commit을 한 경우 = 포스푸쉬 (git push -f)
git push -f : 강제로 push (force push -> 확실한 경우에만 사용하기)

46. git push origin pye-335-2:pye-335 -f : 335번으로 335-2번을 강제로 푸쉬한다.

47. rebase하기
    → 작업중이던 커밋 임시로 브랜치만들어서 커밋
    → 메인 브랜치로 들어가서 git pull
    → 작업중이던 브랜치 돌아와서 git rebase main
    → 임시커밋내용 되돌리기
    → 에러 사항 수정후 이어서 리베이스 할 때 git rebase --abort

48. merge가 되지 않은 상태에서 다음 작업 하고있을 때
    → 먼저 임시 작업 브랜치 생성
    → 작업해~
    → 수정사항 발생 !
    → 해당 수정사항이 있는 원래 브랜치로 돌아가서 수정
    → 머지됐어
    → temp에서 작업하던 내용을 commit
    → main에서 pull받아
    → 새로 브랜치 생성(임시 말고 찐브랜치)
    → temp에서 커밋한 내용을 cherrypick으로 가져옴 (우클릭 + 체리픽커밋)
    → 끝~!

49. cherry pick : 원하는 커밋만 가져올때 사용
    → ex) main에서 체리픽해서 커밋 가져와 만들 브랜치 새로 생성
    → 새 브랜치에서 원하는 커밋을 가져올 특정 브랜치(pye-335)의 커밋 체리픽
    → 가져와짐.
    → 체리픽은 커밋만 꺼내오는 용도라서 굳이 main이 아니라 어떤 브랜치에서 만들어도 상관 없음.

50. git push pye -f / git push -f
    → 이미 이전에 해당 브랜치에 푸시 한 이력이 있으면 git push만 해도 되자나?
    → 이거는 이제 메인에서 리베이스까지 받고 수정하고 한게있을때 해줘

51. git reset HEAD~ --soft : 커밋햇던 거 돌려줌
    --soft : 이전에 했던 커밋 돌려줌
    --hard : 커밋을 삭제한 채 돌려줌. (쓰지마)
    → 작업 후 해당 브랜치에서 내린 새 브랜치에서 작업하고 있는데 이전 브랜치의 수정사항이 들어올 경우
    → 임시로 temp 같은 브랜치 만들어서 임시커밋해두고 이전 브랜치로 와서 수정 후 커밋 복귀시켜서 재작업

52. github repo와 연결 시 https보다는 ssh로 연결해야 확실(?)핳다는거같음.

53. cat ~/.ssh/id_rsa.pub : ssh키가 mac에 있는지 확인.
    ssh키가 있다면 ssh-rsa AAAAA.....이런식으로 뜸.

54. 초기 세팅 시 yarn 설치를 위해 node설치 되어있나 확인
    node -v or node --version
    설치되어있지 않다면 설치 https://nodejs.org/ko

55. npm install -g yarn : yarn 설치

56. git branch -m newBranch : 현재 위치한 기존 로컬브랜치의 이름을 newBranch로 변경함.

57. npm cache clean --force. : 강제로 npm 캐시 지운다

58. npm cache verify : 캐시가 지워지고 디스크 공간이 회수되었는지 확인해야 하는 경우.

59. git fetch : 오리지널 브랜치로 싱크 맞추기

60. git rebase origin/main : 메인 브랜치 코드 가져오기

61. cat ~/.gitconfig : user, email 정보 보기
    ipconfig getifaddr en0 : ip 확인

62. yarn build

    • 프로덕션 빌드를 생성하는 명령어로 소스 코드 최적화 + 코드 압축 + 불필요 주석 제거 = 성능최적화 => 실제 배포에 사용할 수 있는 정적 파일들을 생성함.
      결과물은 보통 dist 또는 build 폴더에 저장됨.

63. yarn preview

    • 빌드된 운영서버(prod) 버전을 로컬에서 볼 때 사용하는 명령어
    • yarn build후 빌드된 배포버전 앱을 로컬 서버로 실행해줌.
    • 실제 prod 환경과 최대한 비슷한 상태로 어플리케이션을 확인 가능함.
      - 배포 전 테스트로 사용함.

64. yarn why react : 내 React가 중복 설치되었는지 확인

65. yarn build --sourcemap : 빌드 후 dist 디렉토리의 .map 파일을 확인하고 디버깅 도구에서 문제의 위치를 추적

    • 실행 시 나타난 메시지는 번들 크기와 관련된 경고

66. yarn lint : 린트 잡기

67. yarn eslint --version : ESLint 버전 확인

68. yarn eslint --init : ESLint 설정 초기화

69. : package.json > script에 추가 : 실시간 lint 경고 & 제안'

70. yarn build --verbose : 상세 로그 모드로 빌드

//eslint.config.js
	// 이전의 ESLint v8.x 기반 설정 (legacy 설정)
   "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
   "lint:check": "eslint . --ext ts,tsx",

	// ESLint v9.x 기반 Flat Config 방식으로 수정함.
	module.exports = [
      // 배열 기반 설정
      { ignores: [ ... ] },  // 무시 패턴
      js.configs.recommended,  // 기본 JS 권장 설정
      ...tseslint.configs.recommended,  // TypeScript 권장 설정
      {
        // 상세 파일/언어 설정
        files: ['**/*.{ts,tsx}'],
        languageOptions: { ... },
        plugins: { ... },
        rules: { ... }
      }
    ]
                  
// package.json도 맞춰서 수정함.
 yarn add -D @eslint/js typescript-eslint eslint-plugin-react eslint-plugin-react-hooks
  - ESLint v9.x의 Flat Config 방식과 호환되는 lint 스크립트가 됨.
  - yarn lint를 실행하면 모든 TypeScript와 TSX 파일을 검사하고, 경고가 있을 경우 빌드를 중단함.

 "scripts": {
    "lint": "eslint \"**/*.{ts,tsx}\" --max-warnings 0",
    "lint:check": "eslint \"**/*.{ts,tsx}\""
  }
                          
 // 이전 버전에서는 아래와 같이 작성했음. 
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
  "lint:check": "eslint . --ext ts,tsx"
                          

---

Mac ssh 키 생성 및 연결 + github에 연결하기
ssh키 확인 및 docs
yarn 설치
eslint & prettier 설정