241002 TIL / 팀소개하기 프로젝트 수정, github 충돌

오늘 진행한 학습 요약

1. [ CH 1 미니 프로젝트 ] 팀 소개 페이지 프로젝트

• CSS, HTML 수정하기
• Github 충돌

---

학습 정리

1. [ CH 1 미니 프로젝트 ] 팀 소개 페이지 프로젝트

• Github로 어제부터 팀 소개 페이지 프로젝트를 공유하기 시작했다.
• 오늘은 팀소개 페이지가 어느정도 작성되었고 보기좋게 CSS랑 HTML 수정했다..
• 하지만 Github 충돌로 롤백이 되면서 수정한 내용이 다 날라갔다! 

 

• 팀 소개 페이지 html, css, javascript에서 알게된 새로운 코드

HTML

// 글자를 기준으로으로 칸 나누기
<p><span class="detail-label">인사하기: </span> <span class="detail-content">안녕하세요!</span></p>

 CSS

/* CSS 기법들 */
        .details p {
            display: flex; /* 가로로 배치 */
            margin-bottom: 10px; /* 각 줄 사이의 간격 증가 */
            align-items: flex-start; /* 세로 정렬을 위쪽으로 설정 */
        }

        .detail-label {
            flex: 0 0 100px; /* 라벨의 너비를 80px로 고정 */
            font-weight: bold; /* 볼드 스타일 */
            margin-right: 20px; /* 오른쪽 여백 추가 */
        }

        .detail-content {
            flex: 1; /* 남은 공간을 모두 차지 */
            font-weight: 400; /* 일반 스타일 */

javascript

// 토글 및 토글 접히고 펼칠 때 삼각형 모양 바꾸기
        function openclose1() {
            $('#det1').toggle();
            let arrow = $('#arrow1').text();
            if (arrow.includes('▶')) {
                $('#arrow1').text(arrow.replace('▶', '▼'));
            } else {
                $('#arrow1').text(arrow.replace('▼', '▶'));
            }
        }

 

 

• 메인파일에 충돌이 일어나 팀원이 혼란을 겪었다. (사실 나도 겪었다.)
  
  • 팀원 모두 Branch를 생성을 안하고 한 파일에 작업하기 시작했다.
  • 그래서 나라도 충돌을 최소화하고자 Branch를 생성했는데 어차피 머지하는 과정에서 서로 같은 코드 부분을 수정하는 바람에 충돌이 일어났다.
    • HTML을 수정하면 CSS를 수정해야하고 ... HTML이랑 CSS을 수정하면 .. Javascript를 수정해야하는 문제로 서로 같은 코드를 수정하다보니 충돌이 일어날 수 밖에 없었다.
    • 이 과정에서 어떻게 역할 배분을 해야 효율적일지 고민해보는 계기가 되었다.
      • 페이지를 하나만 만들기로 했는데 충돌을 피하고자 페이지별로 나눠서 각자 하고싶은 역량을 펼쳤으면 어땠을까라는 생각
      • 커밋 후에 통보가 아니라 커밋전에 작성중인 사람이 있는지 물어봤으면 어땠을까라는 생각
      • 작업중인 페이지를 사전에 배포해서 Pull로 가져오기 전에 화면을 확인했으면 좋았을 것 같다.
  • 사실 나도 충돌이 일어나서 기존 코드에 일일이 보고 내 코드를 수작업으로 수정 및 삭제 했다.
  • 근데 다른 팀원도 충돌이 났는지 내 코드가 롤백되었다.

 

• 튜터님이 오셔서 github 사용방법에 대해 자세히 설명했다.
  • 하지만 작은 프로젝트니 한파일에서 충돌나는것을 극복해보라고 하셨다.
  • 머지하면서 충돌이 나면 팀원과 상의하라고 하셨다.
• 그리고 github만든 팀원에게 파일 배포를 요청했다.
  • 미리 확인해보고 배포하자!