[TIL 2023.05.15] git에 대하여 / 팀프로젝트 (소개페이지 만들기)

💻오늘 배운 내용

Git이란?

팀프로젝트 -우리팀 소개 페이지 만들기

---

GIT

명령어 기반의 인터페이스, CLI(Command Line Interface)

특강을 들으며 앞으로 무수히 마주하게 될 git을 알아봤다.

 

자주쓰는 CLI 명령어

• pwd               | 현재 경로 확인
• 절대경로       | 전체경로 (처음부터 현재까지 모든 경로)
  상대경로       | 현재 경로 기준 ('.'으로 나타낸다/'..'은 상위경로)
• ls -al              | 현재 경로의 숨김 파일 및 폴더까지 모두 조회 (앞에 '.' 붙으면 숨김파일)
• ls                   | 현재경로의 파일 및 폴더 조회
• clear              | vash창 클린하게
• cat                 | 파일내용출력
• cd                  | 경로로 이동하기 '..' 상위디렉토리 / '.' 현재디렉토리 / '~' 홈
• touch             | 비어있는 파일생성
• 🌟vi 편집기
  • a 혹은 i  | 입력모드 
  • esc키     | 모드 종료 
  • :w           | 저장
  • :q           | vi 편집기 창닫기
  • :wq        | 저장하고 닫아라
• mkdir                          | 디렉토리 만들기(메이크 디렉토리)
• rm                               | 파일삭제
• rmdir                           | '비어있는' 디렉토리 삭제
• rm -rf                           | 비어있지 않은 디렉토리 강제종료
• git add .                       | 모든 변경사항 디렉토리에 올리기
• git commit                   | 자세한 커밋 메세지와 함께 커밋 (자세하게 해야됨!!!)
• git commit -am            | add와 commit을 한번에 하겠다
• git commit -m "__"      | __부분에 커밋메세지. (간단하게 입력할때 그래도 웬만하면 커밋 메세지는 자세히 쓸것)
• git log                          | 커밋 목록 조회
• git log --oneline           | 한줄로 간단하게 출력 (짧은 커밋해시만 나옴)
• git log -p (patch)          | 변경사항 목록 조회하기  
• git diff                          | 최근 커밋과 작업 디렉터리 비교/보여주는 명령어
• git diff --staged            | 최근 커밋과 스테이지 비교
• git diff <커밋> <커밋>  | 커밋끼리 비교하는 명령어 ( <이 커밋에 비해> <이 커밋이 뭐가 달라?> --순서에 유의🌟 
• git branch                    | 브랜치 생성
• git branch -d                | 삭제하기    
• checkout                     | switch
• git checkout -b ___     | ___라는 브랜치를 만듬과 동시에 checkout 하는 명령어

---

팀프로젝트 (팀소개 페이지 만들기)

우리팀 인원은 총 5명으로, 페이지에 각자의 카드를 생성해서

모달창 팝업형식으로 소개내용을 띄우기로 했다.

내 역할은 팀원 개별 소개 페이지 html / css 작성

❓발생한 이슈/고민

github를 이용한 협업

 

직전에 git 특강을 듣고 왔음에도 팀원의 repository에 연동하는게 너무 어려웠다.

특히 “please clean your repository working tree before checkout”라는 문구가 나를 굉장히 당황하게 했는데

git stash

git pull

명령어를 터미널에 입력하니 간단하게 해결되는 문제였다..

 

모달창 JS 이슈로 총 4번의 고비가 있었다

 

1] 카드 클릭 시 각각 본인의 모달창 내용이 뜨는 것이 아니라 제일 마지막 요소의 내용만 출력되었다.

2] 각각의 소개내용이 뜨는건 했으나 나머지 카드들이 사라지지 않고 모달창이 떠도 그대로 남아있었다.

3] 자바스크립트 문법을 바꿔서 새로 적용해봤더니 클릭 자체가 안됐다.

4] 원하는 기능은 구현이 되었으나, 모달창이 뜰 때 카드가 너무 늦게 사라지고, 모달창이 사라질 땐 카드가 너무 빨리 다시 나와서 동작이 굉장히 지저분해 보였다.

💡해결과정

$('.js-click-modal').click(function(){
  $('.container').addClass('modal-open');
});

$('.js-close-modal').click(function(){
  $('.container').removeClass('modal-open');
});

처음 JS

 

$('.js-click-modal').click(function() {
  $(this).closest('.container').addClass('modal-open');
});

$('.js-close-modal').click(function() {
  $(this).closest('.container').removeClass('modal-open');
});

1번 문제해결. **$(this).closest('.container')**를 사용하여 클릭한 요소의 부모 .container 요소를 선택함. 이렇게 하면 클릭한 버튼 또는 닫기 버튼이 속한 .container 요소만 선택되어 모달을 열거나 닫을 수 있다.

-그러나 나머지 클릭 안 한 카드가 사라지지 않는 이슈가 발생 ㅠ

 

$('.js-click-modal').click(function() {
  var container = $(this).closest('.container');
  $('.container').not(container).find('.modal').hide();
  container.find('.modal').show();
});

$('.js-close-modal').click(function() {
  var container = $(this).closest('.container');
  container.find('.modal').hide();
});

.container 요소에 있는 다른 카드들의 모달창은 hide() 함수를 통해 숨겨지고, 해당 카드의 .modal 요소는 show() 함수를 통해 나타나게 해봄.

-아예 클릭조차 안되어 버림 ㅠㅜ

 

$(document).ready(function() {
  $('.js-click-modal').click(function() {
    var container = $(this).closest('.container');
    container.addClass('modal-open');
    container.siblings('.container').hide();
  });

  $('.js-close-modal').click(function() {
    var container = $(this).closest('.container');
    container.removeClass('modal-open');
    container.siblings('.container').show();
  });
});

클릭한 요소의 가장 가까운 .container 요소에 modal-open 클래스를 추가하고, 해당 요소의 형제 요소인 **.container**를 숨긴다. 또한, 닫기 버튼을 클릭하면 modal-open 클래스를 제거하고, 숨겨졌던 형제 .container 요소를 다시 보이게 수정.

-원하던 기능에 얼추 가까워 졌으나 동작시간이 다 달라서 움직임이 굉장히 지저분해 보임.

 

$('.js-click-modal').click(function () {
  var container = $(this).closest('.container');
  container.addClass('modal-open');
  container.siblings().fadeOut(300); // 애니메이션 속도 조정
});

$('.js-close-modal').click(function () {
  var container = $(this).closest('.container');
  container.removeClass('modal-open');
  setTimeout(function () {
    container.siblings().fadeIn(300); // 애니메이션 속도 조정
  }, 500); // 딜레이 시간 조정
});

fadeOut() 메서드의 속도 매개변수를 조정하여 카드가 더 부드럽게 사라지도록 추가.

setTimeout() 함수를 사용하여 'close'를 클릭한 후 일정 시간이 지난 후에 카드가 나타나게 함.

 

됐다 됐다~!! 완성쓰🌟

 

🧐궁금점과 부족한 내용

• 같이 와이어 프레임을 짜는데 figma라는 사이트를 이용했다. 서로의 마우스가 보여서 누가 어떤 작업하는지 보면서 하니 소통이 아주 원할해서 저번 프로젝트 같은 악몽이 다시 반복되진 않았지만, 내가 이게 뭔지 몰라서 버벅였다. 시간 날 때 서치해보자.
• GIT에 대해 부족한 점이 너무 많다. 오늘도 Repository 연동에 매우 애먹었고 결국 끝까지 연결 못했다. 녹화본 복습하면서 다시 익혀보자.

이거하느라 하루가 다 간듯 하다..

 

See the Pen Untitled by 양현서 (Ellie) (@-Ellie) on CodePen.

 

 

🎆오늘의 결과물🎆

각 버튼 누르면 이미지에 해당하는 사람의 소개 모달창이 아래에서 위로 팝업된다.

 

📋레퍼런스

https://yourtime.kr/entry/깃허브-사용-시-please-clean-your-repository-working-tree-before-checkout-에러-해결-방법