2023.12.22 TIL - git 명령어 복습, 팀프로젝트 제작(역할분담, 담당 영역 코드작성)

Innes·2023년 12월 21일
TILgitgit명령어내배캠내일배움캠프본캠프팀프로젝트
0

TIL(Today I Learned)

목록 보기
23/147
post-thumbnail

📘 오늘의 공부

  • git, git hub 명령어 복습
  • 팀프로젝트 협업
    • 전체적인 디자인의 구체적인 사이즈
    • class 함께 지정하기
    • 각자 역할분담 맡은 영역 코드 작성 후 깃헙 공유

1. git, git hub 명령어 복습

오류 및 해결

☠️ 오류 (1)

  • git 설치 중 오류
    • homebrew 코드를 터미널에 복붙했더니 password 하고 열쇠모양이 나왔는데 아무리 키보드를 눌러도 비밀번호 입력이 안되는 것이다!!
    • 오류 메시지 구글링 아무리 해도 나같은 경우는 안보이는 것 ㅜㅜ

🖥️ 원인

  • 열쇠모양 뜬 채로 아무것도 입력 안되는 것 처럼 보이는 창에다가 그냥 비밀번호를 입력하면 되는 것이었다.... 맥북한테 낚였다

🥳 해결

  • 그냥 열쇠모양 띄운채로 아무것도 입력 안되는 것 처럼 보이는 창에 비밀번호 치니 해결! 이후로는 설치창 떠서 순조로운 Git 설치 완료!

☠️ 오류 (2)

  • 바탕화면에 있는 'TeamProject' 폴더에서 바탕화면으로 이동 위해 cd Desktop 하니까 해당 메시지와 함께 사진과 같이 오류 발생
cd: no such file or directory: Desktop

🖥️ 원인

  • 잘 모르겠어서 gpt의 도움을 빌림
    • 요약 : 내가 있던 폴더는 홈 디렉토리 내에 있었고, 내가 이동하려던건 데스크탑 디렉토리이다. 따라서 내가 있던 폴더의 상위에 Desktop 이란 폴더가 없기 때문에 이동할 수 없었던 것이다. 대신 데스크탑 디렉토리로 이동하면 된다.
  • 의문 : 홈 디렉토리와 데스크탑 디렉토리가 달라서 cd Desktop이 실행되지 않았다고 했는데, 그래도 분명 내가 있던 폴더는 바탕화면에 있던 폴더였는데...?ㅠㅠ
    (파인더 > 이동 에서 보면 홈과 데스크탑이 다른게 이해는 됐음)


    근데도 디렉토리가 홈이었다고..? 무슨 말인지 모르겠다ㅜㅜ

🥳 해결

  • cd ~/Desktop 작성하니까 이동 완료


2. 팀프로젝트 협업

1) 담당 영역

  • 내가 맡은 부분 : 프로필 카드 6장 부분
  • 제작 계획 : 전체영역 div 주고, 카드 3장 부트스트랩으로 가져오기, 카드 한장 제대로 코드 작성 후 6장 복붙하기

2) 오류 및 해결

☠️ 오류 (1)

  • 카드 내 img태그에 이미지를 넣었더니 원본 이미지의 크기보다 작은 사이즈로 웹페이지에 보이도록 하고 싶은데 사이즈 더 작게 조절이 안됨

📝 시도

//css-시도1
.cardEach > img {
   width: 400px;
   }

//css-시도2
.h-100 > img {
    width: 400px;
    }

//html
<div class="col cardEach">
                  <div class="card h-100">
                    <img src="/Users/innes/Downloads/KakaoTalk_Photo_2023-12-22-10-31-10.jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">제목</h5>
                      <p class="card-text">내용</p>
                    </div>
                  </div>
                </div>

🥳 해결

☠️ 오류 (2)

  • 버튼 div 다 잘 주고 이미지만 넣으면 되는데 왜 이미지만 넣으면 버튼 밖으로 벗어나는가?!


📝 시도

<button type="button"><img src="/Users/innes/Downloads/icon.png" alt="..."></button>

🖥️ 원인

  • 이미지 크기 때문이었음

🥳 해결

  • 버튼 안에 이미지 넣는것 보다 링크 연결은 a태그가 더 좋다는 팀원의 의견을 반영하여 a태그에 img태그 넣는것으로 마무리
<a href="url주소" class="" target="_blank"><img src="./image/6.png" alt=""></a>

(target="_blank"는 새창으로 url링크 열기)

git 나머지 공부 😂

🚨 SOS!! 팀원분께 큰 도움 받으며 일대일 특강을 들었다!! 🆘

  • 어제 들은 강의로는 도저히 git을 어떻게 사용하는건지 모르겠어서 github에선 드래그&드랍만 사용하며 terminal은 헤매고 있던 도중, 감사하게도 팀원분께서 엄청 자세하게 git 사용법을 알려주셨다!!!
  • git clone하는법, local branch 생성하는법, remote(origin) branch와 local branch 연결하는법, git에 add, commit, pull로 파일 저장하는법, checkout으로 branch 간 이동하는법 등등!!!

1. git 최초 연결, main에서 clone 해오기

  • 처음 클론할땐 vsc 에서 하지말고 터미널에서 하기(오류가 적음)
    1) clone 가져올 폴더로 들어가기(cd 폴더이름)
    2) main 브랜치꺼 clone 해오기
    3) 방법 : git clone branch주소(url주소) .
    (ls -a 에 readme.md 파일 보이고 .git 보이면 클론 된거임)

2. origin branch와 local branch 연결하기

💡 github에 있는 branch는 origin(remote), 즉 원격에 있는 branch인 것이고, 내 컴퓨터(local)에는 같은 이름의 branch를 따로 생성해서 연결해야 함

  • (1) 내 컴퓨터에서 branch 확인하기

    • git branch
      (현재 main을 clone 해왔기에 main 브랜치에 있는 상태)

  • (2) 내 컴퓨터에 내 local branch 만들기

    • git branch 내 브랜치이름

  • (3) main -> 내 브랜치 로 이동하기

    • git checkout 내 브랜치이름
    • 참고) main에 연결되어 있다면, 'git checkout 브랜치이름'으로 다른사람 브랜치로 이동도 가능

  • (4) git branch : 잘 이동했나 확인

  • (5) git pull : 브랜치에 있는 모든 파일을 가져오겠다(local 브랜치 안에서 명령어 작성시)

    • 💡 내 컴퓨터는 온라인의 브랜치와 연결한 적이 한번도 없는 상태여서, git pull만 했더니 에러 메시지가 뜸
    • 'git pull origin main브랜치' 하니까 해결!
      => main origin(remote) branch와 내 local branch가 처음으로 연결됨!(나는 내 로컬브랜치 gih에 들어가있었음)

  • 내 온라인 git branch랑 내 컴퓨터의 local branch랑 연결됐음!
    (다시 로그인하라는 창 뜨면서 권한 부여 성공)
    -> 온라인 브랜치랑 내 컴퓨터의 브랜치가 연결됐고, 이제 계속 연결되어있는 상태인거임

3. 내 파일 수정하면 터미널로 git branch에 바로 저장하는 방법

  • branch에 저장 기본 3단계
    • 'git add .' 혹은 'git add 특정파일이름'
    • git commit -m ""
    • git push origin 브랜치이름

참고) (스압주의) 터미널에서 clone 마친 후 vsc 열어서 시작한 git명령어 화면

innes@innesui-MacBookAir project % pwd 
/Users/innes/Desktop/project
innes@innesui-MacBookAir project % git status
On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean
innes@innesui-MacBookAir project % git branch
* main
innes@innesui-MacBookAir project % git branch gih
innes@innesui-MacBookAir project % git branch
  gih
* main
innes@innesui-MacBookAir project % git checkout gih
Switched to branch 'gih'
innes@innesui-MacBookAir project % git branch
* gih
  main
innes@innesui-MacBookAir project % git status
On branch gih
nothing to commit, working tree clean
innes@innesui-MacBookAir project % git pull
There is no tracking information for the current branch.
Please specify which branch you want to merge with.
See git-pull(1) for details.

    git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

    git branch --set-upstream-to=origin/<branch> gih

innes@innesui-MacBookAir project % git pull origin main
From https://github.com/team1-mini-project/produceTeam1_project
 * branch            main       -> FETCH_HEAD
Already up to date.
innes@innesui-MacBookAir project % git status
On branch gih
nothing to commit, working tree clean
innes@innesui-MacBookAir project % git branch
* gih
  main
innes@innesui-MacBookAir project % git pull
There is no tracking information for the current branch.
Please specify which branch you want to merge with.
See git-pull(1) for details.

    git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

    git branch --set-upstream-to=origin/<branch> gih

innes@innesui-MacBookAir project % git pull origin gih
From https://github.com/team1-mini-project/produceTeam1_project
 * branch            gih        -> FETCH_HEAD
Updating eed19c1..561b852
Fast-forward
 css/layout.css |  71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 css/reset.css  |  38 ++++++++++++++++++++++++++++++++++
 image/1.png    | Bin 0 -> 28233 bytes
 image/2.png    | Bin 0 -> 19217 bytes
 image/4.jpeg   | Bin 0 -> 219860 bytes
 image/img1.JPG | Bin 0 -> 2760669 bytes
 index.html     | 149 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 258 insertions(+)
 create mode 100644 css/layout.css
 create mode 100644 css/reset.css
 create mode 100644 image/1.png
 create mode 100644 image/2.png
 create mode 100644 image/4.jpeg
 create mode 100644 image/img1.JPG
 create mode 100644 index.html
innes@innesui-MacBookAir project % git status
On branch gih
nothing to commit, working tree clean
innes@innesui-MacBookAir project % git pull
There is no tracking information for the current branch.
Please specify which branch you want to merge with.
See git-pull(1) for details.

    git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

    git branch --set-upstream-to=origin/<branch> gih

innes@innesui-MacBookAir project % git checkout kjs
branch 'kjs' set up to track 'origin/kjs'.
Switched to a new branch 'kjs'
innes@innesui-MacBookAir project % git branch
  gih
* kjs
  main
innes@innesui-MacBookAir project % git branch gih
fatal: a branch named 'gih' already exists
innes@innesui-MacBookAir project % git checkout gih
Switched to branch 'gih'
innes@innesui-MacBookAir project % git branch
* gih
  kjs
  main
innes@innesui-MacBookAir project % git status
On branch gih
nothing to commit, working tree clean
innes@innesui-MacBookAir project % git status         
On branch gih
nothing to commit, working tree clean
innes@innesui-MacBookAir project % git checkout kjs
Switched to branch 'kjs'
Your branch is up to date with 'origin/kjs'.
innes@innesui-MacBookAir project % git branch
  gih
* kjs
  main
innes@innesui-MacBookAir project % git checkout gih
Switched to branch 'gih'
innes@innesui-MacBookAir project % git branch
* gih
  kjs
  main
innes@innesui-MacBookAir project % git status
On branch gih
Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        deleted:    index.html

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        profileCard.html

no changes added to commit (use "git add" and/or "git commit -a")
innes@innesui-MacBookAir project % git add .               
innes@innesui-MacBookAir project % git status
On branch gih
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        renamed:    index.html -> profileCard.html

innes@innesui-MacBookAir project % git commit -m "rename: 파일이름 변경"
[gih 2765e91] rename: 파일이름 변경
 Committer: innes <innes@innesui-MacBookAir.local>
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly. Run the
following command and follow the instructions in your editor to edit
your configuration file:

    git config --global --edit

After doing this, you may fix the identity used for this commit with:

    git commit --amend --reset-author

 1 file changed, 0 insertions(+), 0 deletions(-)
 rename index.html => profileCard.html (100%)
innes@innesui-MacBookAir project % git status
On branch gih
nothing to commit, working tree clean
innes@innesui-MacBookAir project % git status
On branch gih
nothing to commit, working tree clean
innes@innesui-MacBookAir project % git push origin gih
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (2/2), 270 bytes | 270.00 KiB/s, done.
Total 2 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/team1-mini-project/produceTeam1_project.git
   561b852..2765e91  gih -> gih
innes@innesui-MacBookAir project %

4. 자주하면 좋은것

  • git branch - 내가 지금 어디 브랜치에 있는지 확인
    (git branch 브랜치이름 : local에 브랜치 가져오기)

  • git status - 내가 지금 뭐 git add 할게 있는지, commit 해야하는지 등 변경사항과 해야 할일 알려줌

  • 할때 주의해야할것

    • git checkout 이동할 브랜치 이름 - 지금 있는 브랜치에서 -> 이동할 브랜치가 있을때 해당 브랜치 이름으로 체크아웃하면 거기로 이동!
      (제가 있는 호텔은 체크아웃하고 다른 호텔로 갑니다)

  • 터미널로 바로 git 저장할때

    • git add . 혹은 git add 해당파일이름 : .하면 변경사항 전부다 저장됨(html이건 css건 img폴더 만들어서 img를 넣어놨던 상관없이 전~부다)
      해당 파일이름만 적으면 그 파일만 저장됨
    • git commit -m "" : 변경사항 저장하면서 남길 멘트
    • git push origin 브랜치이름 : 해당 이름의 원격 브랜치에 저장할게

  • 당겨올땐 : 처음은 clone, 다음부턴 pull(브랜치 잘 확인후)

  • 올릴땐 : add, commit, push(브랜치 잘 확인후)



🐣 오늘의 느낀점

  • 팀원을 잘 만나는것도 참 복이라는 생각이 들었다. 다들 본인 분량 열심히 하려고 노력하시고, 소통 열심히 하려고 다들 노력하시는게 느껴지고, 주말에도 나와서 맡은바 최선 다하려고 하시고, 모르는거 친절하게 A-Z로 다 알려주시고 참 첫 팀프로젝트인데 다행이라는 생각이 든다.
  • 팀원에게 배우는것도 엄청 빠른 습득에 도움이 된다는 점이 신기했다. 꼭 강의듣는게 아니더라도 내가 직접 코드를 짜면서도 많이 공부하게 되고, 모르는 부분 용기내서 질문하는것도 경험과 배움이고, 다른사람이 질문한걸 옆에서 질의응답 듣는것도 어깨너머 배우는 것처럼 도움이 되는 것도 신기하다.
profile
Innes
꾸준히 성장하는 우상향 개발자
이전 포스트

2023.12.21 TIL - 첫 팀프로젝트 시작, Git 명령어 특강

다음 포스트

2023.12.24 TIL - 팀프로젝트 트러블 슈팅(a태그 새로고침,id유일성),object-fit, OBS

1개의 댓글

comment-user-thumbnail
CaesiumY
2023년 12월 26일

문제 해결 과정 올려주시는 거 좋습니다ㅎㅎㅎ

답글 달기