0주차 화요일, OT주간 이야기 - 토이프로젝트

0주차 화요일, OT주간 이야기 - 토이프로젝트

01 오늘의 TIL 끄적임

오늘의 TIL의 시작은 Git에 대한 부분으로 시작하고자 한다. 지난주까지만 해도 Git을 공부했다면, 이번주 토이트로젝트에서는 바로 git을 사용했다.

지난 주까지만 해도 나는 조각코드를 주고받고, 또는 vscode의 라이브쉐어 등으로 함께 보면서 작업을 하는 단계였다. 토이프로젝트를 시작하면서도 나의 이해의 범주는 여기서 크게 벗어나지 못했다. 그러나 팀원들은 git에 대한 인지도가 높았고 바로 저장소를 githup에 생성하고, 해당 저장소에서 이슈를 만들고 담당자를 할당하고, 브랜치를 생성해서 작업한 후에 하나로 취합하는 과정을 수행하도록 나를 이끌었다.

그렇게 나아간 내용을 아래의 포스트에 기록했다.
Edwinstory, Git 실전

그럼에도 돌아보면, 해결되지 못한 부분들이 있어서 TIL를 기록하며 해당 부분에 대해서 추가적인 정보를 찾아보고 코린이 레벨을 높이고자 한다.

02 Git에서 패치와 리베이스란 용어는 어떤 것일까?

패치(Fetch)

원격 저장소에서 내용을 당겨오는 것을 풀(PULL)이라고 공부했었다. 그런데 오늘 패치(Fetch, Fecth)는 처음 접해보는 용어였다.

Fetch란? 원격 저장소에 있는 프로젝트를 로컬 저장소에 가져오는 것인데, 로컬 저장소에 있는 프로젝트를 병합하지 않고 가져오기만 한다는 것을 뜻한다. 이를 개발자는 원격 저장소에 있는 변경사항을 확인해 볼 수 있늗데, 이를 활용하고자 할 때 풀이 아니라, 패치가 사용된다. 그런데 여기서 "병합하지 않고 가져오기"의 의미가 명확하지 않다. "병합하지 않고 가져오기"란 원격 저장소의 변경사항이 있는지 확인만 하고, 변경된 데이터를 로컬 git에 실제로 가져오지 않는다는 것을 말한다.

반면에, 풀은 원격 저장소에서 변경되 메타데이터 정보를 확인할 뿐만 아니라 최신 데이터를 복사해서 로컬 git에 가져온다.

Fetch는 더 나아가 마지막 풀(PUll) 이후 원격 저장소 또는 브랜치에 적용된 변경 사항을 확인한다.

그렇다면, 패치(Fetch)는 왜 하는 것일까? 만일 원격 저장소에 변경 사항이 존재하는 상황에서 바로 풀(PULL)하면, 현재 브랜치와 작업 복사본의 파일이 변경되어, 새로 작업한 내용이 손실되는 일이 발생될 수 있기 때문에, Fetch로 변경 사항을 먼저 확인한 후, 풀(PULL)을 실행하는 것이 파일의 버전을 관리하는 것에 있어서 안전하게 작업할 수 있는 부분이 될 것이다.

리베이스(rebase)

이슈를 할당받은 개발자는 브랜치를 생성하여, 줄기(main브랜치)에서 떨어져 나와, 가지(feature브랜치)에서 작업을 시작하게 된다. 이때 A줄기에서 가지로 형성되었다고 할 때 가지에서 작업하는 과정에서 본래의 A줄기가 발전되어 A-A줄기로 나아갔다고 하자, 그렇다고 볼 때 A줄기에서 뻗어나온 가지는 A-A줄기에서 볼 때 아래에 있을 것이다. 그런데 높이를 맞춰주기 위해 A줄기에서 뻗어나온 가지를 잘라내서, A-A줄기 위치로 끌어올림을 해준다고 하자, 그렇다면 A줄기에서 뻗어나온 가지는 이제 A-A줄기 위치에 존재하게 될 것이다. 이를 통해서 같이 성장해 갈 수 있다.

리베이스는 말 그대로 base 브랜치의 모줄기가 변경되었을 때, 현재적 시점에서 변경된 모줄기의 위치에 뻗어나온 브랜치의 base를 옮겨준다는 의미가 rebase의 의미정도로 생각하면 될 것 같다. 여기서 모줄기가 변경되었다는 것은 git에서 head master가 변경되었다는 의미이다.

리베이스와 병합

기존의 병합은 나눠진 브랜치를 단순하게 합친다고 여기면 될 것 같습니다. 공동 조산 커밋을 기반으로 해서 순차적으로 두 브랜치를 비교하면서 마지막 최종 커밋을 생성하는 것이 병합(merge)이었다. 반면에 리베이스(rebase)는 나눠진 두 브랜치를 서로 비교하지 않고, 베이스 커밋을 변경하여 변경된 베이스의 커밋을 먼저 진행하고 마지막 master 브랜치에 나눠진 브랜치를 연결한다는 것이다.

즉 결과적으로 차이가 있다. 병합(merge)는 두 파일을 병합하지만, 리베이스(rebase)는 병합된 커밋이 존재하지 않는다는 차이가 있다.

03 오늘의 결과물

1번 이미지와 3번 이미지의 결과물은 HTML의 변경없이 단일 HTML에서 Javascript 문법을 통해서 변경되도록 설정한 결과물이다. 이는 강사소개를 클릭하면 등장하는 dropdown에서 <li>태그 내에 있는 button태그를 클릭할 때 발생될 이벤트(onclick())를 설정했기 때문이다.

onclick="lee()">이민재 프로에 해당되는 버튼을 클릭했다고 하자. 어떠한 작동이 발생될 것인가?

function lee() {
    document.querySelector("#arti1_lecturer_img").style.backgroundImage = "url(/static/lee.jpeg)"
    document.querySelector("#arti1_lecturer_intro").innerHTML = `
            <li >이민재 프로</li>
            강의 : <span style="font-weight: 700">WEB과 Javascript</span> <br>
            수강생 : 5년누적 <span style="font-weight: 700">1000만 명</span>
`
     document.querySelector("#arti1_lecture").innerHTML = `
        <p><h2>WEB과 Javascript</h2></p>
        <p>Javascript는 정적인 HTML을 보다 동적이게 작동하도록 하기 위해서, 사용자와 상호작용을 통해서 정보를 받고, 웹브라우저에 동작을 부여하기 위한 욕구에서 1995년 등장하였다. 그런데 Javascript는 용어에 있어서 유사한 언어들이 존재하여 혼동되기도 한다. 대표적인 것이 Java이다. 두 언어가 모두 C언어를 기반으로 하지만, 의미론적으로 다르고, 서로 연관성이 없는 언어이기에, 호환되지 않는다는 측면에서 이 둘은 분명히 다르다.</p>
        <p>Javascript 언어를 살펴보기 가장 좋은 사례가 다크모드와 주간모드에 대한 부분일 것이다. 우리가 현재 보고 있는 velog 상단에도 이미지로된 다크모드와 주간모드 버튼이 있는데, 사용자가 원하는 환경에 따라서 HTML에 가변적인 요소를 더해주며, 동적인 작동이 이뤄지도록 하는 것이 Javascript를 활용하는 것 가운데 하나의 용례이다. 이를 적용한 코드를 보면서, 이를 더 살펴보자...</p>
        <br><br>강의내용
        <ol>
            <li>Javascript언어의 등장</li>
            <li>HTML과 script 태그</li>
            <li>Javascript로 이벤트 발생시키기</li>
        </ol>
     `
}

먼저, querySelector("#arti1_lecturer_img")를 찾아서 배경 이미지에 static에 담아둔 이미지가 붙여지도록 설정했다.
둘째, document.querySelector("#arti1_lecturer_intro")를 찾아서 해당 부분 안에 innerHTML을 기록하도록 설정했다.
셋째, document.querySelector("#arti1_lecture")를 찾아서 백틱(`)에 기록된 복수의 내용들이 기록되도록 설정했다.

이를 통해서 별도의 HTML을 제작하지 않고, 버튼의 이벤트를 통해서 Javascript를 통해서 웹페이지의 내용이 변경되는 효과를 주었다. 이를 통해서 하나의 HTML를 4개의 다른 양태를 가지도록 설정했다.

그리고 초기값으로는 가나다순에 처음에 놓여있는 "박영찬 프로"의 내용이 기록되도록 설정했다.

04 정리하며

사실 오늘 작업을 진행하며, Fetch API까지 적용해보고 싶었는데, 아직은 부족한 것 같다. 이번 토이프로젝트에서 응용이 가능하다면 도전해 보겠다. 그러나 시간이 이제 내일 하루밖에 없다. 목요일에는 프로젝트를 배포해야 하기 때문이다.
Edwinstory, Fetch API

그래도 한 번 배운 것을, 실전 프로젝트에서 응용하여 사용할 수 있어서 뿌듯하였다.

그러나 위기가 없었던 것은 아니다. 실무에서는 있을 수 없는 내용일지 모르겠지만, 프로젝트를 하는 팀의 자리에 있을 때 발생되는 팀원들과의 소통은 너무나도 고된 일이다.

열정적이고 의욕이 넘치는 사람은 힘들다. 시간이 제한적이고, 그 시간에 요구되는 기본적인 수준의 목표가 제시되었음에도 과한 열정으로 팀을 위태롭게 하는 것 같은 요구에 예전 같으면, 목소리를 냈겠지만, 오늘은 말을 아꼈다. 아직까지는 감당할 수 있는 시간과 수준이기 때문이다. 그리고 격려하고 지지하고 세워드렸다. 그것이 안전하게 프로젝트를 마무리하도록 이끈다면 충분하기 때문일 것이다.

과욕과 내려놓음

오늘의 자리에서는 이번 밤에 그 팀원이 시간의 제한을 인정하고, 기본적인 수준의 목표를 요구하는 OT주간의 의미를 안전한 결과물로 기쁨을 나누었으면 한다.

그러나 그러한 열정을 비난하는 것은 아니다. 그러기에 나 또한 별도의 공부를 계속하며, 나의 실력을 늘리고 있기 때문인데, 함께 제출시간을 앞에 두고 있는 공동의 과제에서는 과욕을 조금 내려놓았으면 하는 바람이다.

이를 통해서 나또한 그러한 과욕은 내가 확실히 책임질 수 있을 때가 아니면 부리지 말자는 교훈을 반면교사로 삼으며, 오늘 하루를 마무리 한다.