내일배움캠프 AI - 11일차 TIL, 2022.05.02

Dongwoo Kim·2022년 5월 2일

AI TIL 내일배움캠프 스파르타코딩클럽

TIL / WIL

목록 보기

13/113

스파르타 코딩클럽

내일배움캠프 AI 웹개발자양성과정 2회차

2022.05.02. 11일차- TIL

1. 개인프로젝트 종료

09:00-13:00 인스타그램 클론코딩

어느덧 벌써 3주차 첫날. 오늘은 개인프로젝트 마지막날이다. 저번주부터 고생했던 인스타클론코딩을 드디어 끝낼 수 있게 되었다. 오전에는 메인 포스트 박스 부분을 이어서 만들었다. 사진과 코멘트 등이 들어가는 부분. 이전과 같은 방식으로 shift + ctrl + c 를 눌러서 인스타그램의 웹UI를 보고 베끼면 되어서 어렵지는 않았다.

하지만 기능적으로 생각해야하는 부분도 있었다. 역시 UI만 베끼는 것은 너무 지루해서 몇몇 기능들을 직접 구현해보고자 했는데 포스트 부분에는 설명란의 '더보기' 버튼과 댓글을 달 수 있게 해주는 '게시'버튼이 있었다. 포스트를 임시로 하나만 올렸을 때는 각 태그마다 id를 달아서 쉽게 기능을 구현할 수 있었다. 하지만 똑같은 구조의 포스트가 여러개가 생기게되면 같은 아이디를 가지게 되어서 문제가 발생한 것이다. 이를 해결하기위해 이전에 찾아본 선택자에서 속성값을 적용시킬 수 있는 방법을 사용했다.

// 포스트 텍스트 더보기 버튼 함수
function view_post_text_more(name) {
    $(`.post_text_btn[name=${name}]`).css('display', 'none')
    $(`.post_text_more[name=${name}]`).css('display', 'block')
}

// 현재 선택된 댓글창에 상태에 따라 게시 버튼 효과 변경
$('.post_comment_input').on('focus blur keyup', () => {
  let name = $(':focus').attr('name');

  if ($(`.post_comment_input[name='${name}']`).val() === "") {
    $(`.post_comment_input_btn[name='${name}']`).css('opacity', '0.5')
  } else {
    $(`.post_comment_input_btn[name='${name}']`).css('opacity', '1')
  }
})

2. (임재범) 거친 생각과.. 불안한 눈빛과...

13:00-14:00 점심시간
14:00-15:00 git commit 복구시키기

오후에 개발을 시작하려고보니 문제가하나 있었다. 오전에 구현해놓았던 포스트의 이미지부분이 언제부터인지 크기가 잘 맞지 않게 되어있었다. 아마도 다른 기능들을 구현하면서 코드를 건들여서 그런 것 같은데 어디서부터 그랬는지는 알 수가 없었다. 더군다나 이미 잘못된 코드를 커밋하고 원격레퍼지토리에 올려놓은 터라 어떻게 복구시킬까 고민이 들었다. 다시 일일히 고치자니 일이 커질 것 같은데 쉬운 방법이 없을까?

검색해본 결과 원격 브랜치의 커밋상태를 되돌릴수 있는 방법이 있었다.

git reset --hard HEAD^
git push -f origin main

다음과 같은 명령어를 입력하는 것. 근데 나는 알지 못 했다. 이 명령어를 입력한 순간부터 뭔가 크게 잘못되었다는 것을...

3. (휘성) 가지마 바보야~!

15:00-16:00

위의 명령어의 뜻은 다음과 같았다. 현재 원격브랜치의 상태를 한단계 뒤로 물리고 현재의 로컬 브랜치를 강제로 커밋하는 것이다. 명령어의 뜻을 모르고 무작정 입력한건 아니었다. 알고 있었다. 그런데 이상하게도 명령어가 잘 작동하지 않았다. 속으로 '왜이러지?'란 생각에 그냥 아무생각없이 한번더 명령어를 입력했다. 그리고 알았다. 나의 원격 브랜치 이름은 main이 아니라 master라는 것을... 앗 그렇다면 그 전 명령어는...? 그렇다.

git reset --hard HEAD^

의 명령어는 아무 문제없이 실행된 것이었다. 무려 2번이나. 그렇다는 것은..? 나의 온전한 커밋상태가 지구상에서 사라졌다는 것. oh my god. 이걸 인지하는 순간 영혼이 빠져나가는 듯했다...

덕분에 더보기, 댓글 게시 버튼을 한번더 구현해야했고 기타 다른 작업들, 추가시켰던 이미지들도 사라져서 다시 구해와서 올리거나 하는 등 정확하게 6시간 전의 나의 상태로 돌아가 똑같은 작업을 반복했다. 지금까지 내일배움캠프에서 코딩하면서 이 순간이 제일 힘들었던 것 같다.

4. 원인 분석

왜 이런 불상사가 발생하게 되었을까? 다시한번 생각해보았다. 그리고 그 원인을 크게 몇가지에서 찾을 수 있었다.

reset --hard의 무서움을 알지 못한 것
: 사실 reset --hard가 어떤 의미의 명령어인지는 알고 사용했지만 문제가 생겼을 때 이렇게 무서운 녀석인지 이번에 몸소 깨달을 수 있었다. 다음부터는 사용하기전에 한번더, 두번더 아니 열번더 생각해보고 사용해야겠다.
commit 메시지를 비슷하게 작성하여 잘못된 커밋과 아닌 커밋을 혼동한것
: 사실 이 부분이 가장 큰 원인이라고 생각하는데 내가 reset --hard 명령어를 입력하고나서 제대로 작동하지않는다고 오해한 이유는 바로 커밋 메시지를 비슷하게 작성해서다. '추가 - 포스트박스', '추가 - 포스트박스 더보기 버튼' 과 같이 두개의 커밋 메시지가 거의 비슷하게 작성되어 있어서 내가 아직 잘못된 커밋을 지우지 못했다고 생각하고 다른 커밋상태도 삭제시킨 것이다.

따라서 다음부터는 비슷한 내용의 커밋메시지라도 확실하게 구분할 수 있는 나만의 구분규칙을 만들어야겠다.