1) 학습한 내용

오늘의 할 일

[공통]
1. 세부 메뉴 li > a 버튼 누를 시 스크롤 부드럽게 이동
(사업현황, 정보마당 부분 참고)
2. 세부 메뉴 li > a 버튼 누를 시 세부메뉴 사라지기
3. 반응형 - 글자 및 이미지 레이아웃의 양옆 여백(패딩)을 상단 네비와 동일하게
4. 반응형 - 타이틀 영역의 뒷 배경 이미지가 줄어들지 않게 수정
[홈]
1. 프로젝트, 서비스의 내용 폰트 스타일 디자인 시안에 맞게 수정
[회사소개]
1. 조직도 애니메이션 더 정적인 애니메이션으로 변경
2. REsoft 소개의 소제목 영역(회사명, 설립일, 대표이사 등) 폰트 스타일 굵게
3. 연혁 - 년도 및 월 부분 폰트 스타일 굵게
[사업현황]
1. PC - ETC 이미지들 마우스 오버 애니메이션 효과 제거
[정보마당]
1. 게시물 이미지 마우스 오버시, 이미지 살짝 어두워지는 효과 추가"

이번에 들어온 최종 피드백이다. 3페이지는 CSS와 슬릭 슬라이드 자바스크립트를 손봐주면 되는 정도이다.

@media screen and (max-width: 1280px) {
	#ecoce,
	.moado-wrap,
	#etc {
		max-width: 1000px;
		margin: 0 auto;
	}

	.moado-back {
		margin-top: -6%;
	}
	.slide_box .slide_list_item:hover img {
		transform: scale(1.1);
	}
}

03_business.css

pauseOnHover : false,		// 슬라이드 이동	시 마우스 호버하면 슬라이더 멈추게 설정

그런데, 한 가지 문제가 있다면 깃을 병합하다가 깃허브의 코드가 서로 충돌이 일어나서 병합이 이뤄지지 않는 경우이다.

깃허브 병합 충돌

브랜치1과 브랜치2로 나누어서 작업을 했을 때, 두 브랜치가 같은 라인 코드를 수정 후 커밋을 할 때 발생한다. 예를 들어, main에서 이 브랜치를 merge 할 때, conflict가 발생한다.

main 입장에서 '둘다 같은 라인 코드 수정'으로 간주해버린다. main에서는 두 브랜치가 동일한 라인에 코드를 수정했으니 어떤 코드를 결정해줘야 할지 모르기 때문이다.

그리고, 깃허브 충돌이 일어났을 때, 다음과 같은 모습이 나타난다.

<<<<<< HEAD 현재 main 브랜치의 최신 커밋내용
===== ~ >>>>>branch2 merge 하려는 브랜치의 내용

여기서 표시내용은 다 지우고 사용할 코드만 남겨주면 된다.

git이 이용자에게 수정해서 결정하도록 결정권을 넘겨주는 것이다. 아래의 글은 "누구나 쉽게 이해할 수 있는 Git 입문"의 글을 그대로 인용한 글이다.

깃허브 충돌 관련 인용 글

이번에는 'issue2' 브랜치에서 변경한 부분과 'issue3' 브랜치에서 변경한 부분을 모두
'master' 브랜치에 통합해 보도록 하겠습니다.
먼저 'master' 브랜치를 체크아웃한 다음 'issue2' 브랜치를 병합합니다.

$ git checkout master
Switched to branch 'master'
$ git merge issue2
Updating b2b23c4..8f7aa27
Fast-forward
 myfile.txt |    2 ++
 1 files changed, 2 insertions(+), 0 deletions(-)

이렇게 하면 앞서 설명되었던 'fast-forward(빨리감기) 병합'이 실행됩니다. 아래 그림을 보면, 'master' 브랜치에 'issue2' 브랜치가 병합된 것을 확인할 수 있습니다.

이번에는 'issue3' 브랜치를 병합합니다.

$ git merge issue3
Auto-merging myfile.txt
CONFLICT (content): Merge conflict in myfile.txt
Automatic merge failed; fix conflicts and then commit the result.

'CONFLICT(충돌)'이라 나오는 것을 보니 자동 병합에 실패한 것 같습니다. 앞서 각각의 브랜치에서 변경한 내용이 myfile.txt 의 같은 행에 포함되어 있기 때문입니다. 실제로 myfile.txt 의 내용을 확인해 보면 다음과 같이 변경되어 있습니다.

원숭이도 이해할 수 있는 Git 명령어
add: 변경 사항을 만들어서 인덱스에 등록해보기
<<<<<<< HEAD
commit: 인덱스의 상태를 기록하기
=======
pull: 원격 저장소의 내용을 가져오기
>>>>>> issue3

충돌이 있는 부분에 Git 이 자동으로 위와 같이 충돌 정보를 포함하여 파일 내용을 변경합니다. 이 내용을 통해 어떤 브랜치에서 어떤 부분이 충돌되었는지 확인할 수 있습니다. 충돌이 일어난 부분은 이렇게 일일이 확인해서 수정해 주어야 합니다. 그럼 아래와 같이 파일 내용을 변경해 봅시다.

원숭이도 이해할 수 있는 Git 명령어
add: 변경 사항을 만들어서 인덱스에 등록해보기
commit: 인덱스의 상태를 기록하기
pull: 원격 저장소의 내용을 가져오기

충돌 부분을 모두 수정했으므로, 다시 커밋합니다.

$ git add myfile.txt
$ git commit -m "issue3 브랜치 병합"
# On branch master
nothing to commit (working directory clean)

이 시점까지의 이력을 보면 다음과 같습니다. 이번 병합은 충돌 부분을 수정했기 때문에 그 변화를 기록하는 병합 커밋이 새로 생성 되었습니다. 그리고 'master' 브랜치의 시작('HEAD')이 그 위치로 이동해 있는 것을 확인할 수 있습니다. 아래와 같은 방식을 'non fast-forward 병합'이라고 합니다.

git Conflict(충돌)는 왜 일어날까? 과정 알아보기

병합할 때 발생하는 충돌 해결하기

2) 학습내용 중 어려웠던 점

이번 시간에는 개인적으로 깃허브 병합할 때 충돌이 일어날 경우에 관한 것이다. 피드백은 들어오는 대로 반영하고 있지만 이번에 당황하게 한 것은 깃허브 병합할 때 간혹 충돌이 발생하는 경우이다.

3) 해결방법

팀장 연가을님의 말에 따르면 깃허브를 병합할 때, 현재 브랜치와 merge하려는 브랜치가 있는데 여기서 깃허브를 병합할 때, 지울 곳을 선택해야 하는 것이라는 걸 알려주었고 이후 검색을 했을 때도 깃허브 병합 실패와 해결방안에 관한 걸 찾아보았다.

4) 학습소감

작업을 하다보면 간혹 돌발상황이나 이해할 수 없는 상황이 발생하는데, 이해할 수 없다고 넘기는 것이 아니라 알 때까지 파고들어야 한다. 공부를 해야 계속 살아갈 수 있다.