2023.05.10 TIL

오늘의 나는 무엇을 잘했을까?

팀원들과 프로젝트를 시작하기 전 준비 작업을 짧게 진행했다. 브랜치 전략과 브랜치 네이밍 컨벤션, 깃허브에서 협업할 워크플로우를 정립했는데 이런 과정을 제대로 수행해보니 원활한 협업을 위해 꼭 필요하다고 생각되었다.

오늘의 나는 무엇을 배웠을까?

git prune

원격 저장소와 로컬 저장소를 오가며 작업하다 보면 원격에서 삭제된 브랜치들이 로컬에서 보일 때가 있다. 깃은 리소스를 삭제하는 것에 대해 상당히 보수적이고 조심스러워서 브랜치를 삭제하고 나서도 해당 브랜치의 reference들이 남아있게 된다. 하지만 restore하기 전까지는 unreachable한 상태를 유지한다. 이렇게 닿을 수 없는 git object들의 reference들은 보이지 않게 해주는것이 좋다.

로컬에서 원격의 삭제된 브랜치들을 보지 않고 싶다면 git prune 명령어를 사용하면 된다. prune명령어는 unreachable한 git object들을 cleanup해주는 명령이다. 원격 저장소와 연동하여 삭제된 브랜치들은 로컬에서도 안보이게 하려면 다음과 같이 prune을 사용하면 된다.

git remote prune origin

또한 prune을 실제로 실행하지 않고 실행한다면 어떤 결과가 나올지만 보고 싶다면 아래처럼 dry-run옵션을 넣어주면 된다.

git remote prune --dry-run origin

만약 삭제된 브랜치가 쌓이기 전에 prune을 하고 싶다면, git fetch시 -p옵션을 넣어 원격과 동기화할 때마다 prune을 실행할 수도 있다.

git fetch -p

git tag

태그는 커밋에 라벨을 붙이는 것과 같다. 태깅 행위는 커밋과 다르며, 특정 시점에 태그를 붙이면 해당 시점 기준 가장 최근 커밋에 태그를 붙이게 된다.

예를 들면, initial commit 이후 readme를 업데이트하는 중, 업데이트에 대한 커밋을 하지 않은채로 git tag …를 하면, 해당 태그는 initial commit에 달리게 된다.

tag를 붙이고 싶다면 항상 커밋 직후에 하는 습관을 들이도록 하자.

또한 이전 커밋에 태그를 붙일 수도 있다.

git tag -a v1.2 9fceb02

이런식으로 커밋아이디를 함께 주면 된다. 참고로 -a 옵션은 annotation 방식으로 태깅하겠다는 옵션이며, 태그 저자와 생성한 사람이 기록된다. -a 옵션을 주지 않으면 lightweight 태그가 생성된다. lightweight 태그는 커밋의 체크섬값만 저장하고 다른 정보는 저장하지 않는다.

로컬에서 만든 태그는 원격 저장소로 따로 push를 해줘야 원격에서도 사용할 수 있게 된다.

git push origin <태그 이름> 명령을 통해 원격에 push할 수 있다.

2차 평가 대비 내용 정리

1. 리액트에서 배열을 렌더링 시 key값을 줘야하는 이유
   핵심은 리액트의 virtual dom에서 변경사항을 파악하고 reconcile하는 방식에 있음.

    <ul>
    	<li /> --1
    	<li /> --2
    </ul>
    
    |
    |  // 아래로 변경 되었을 때 (3번 아이템을 맨 아래에 추가)
    |
    ▽
    <ul>
    	<li /> --1
    	<li /> --2
      <li /> --3
    </ul>

   이전 1번위치와 현재 1번위치 비교 → 같아서 다시 안그림
   이전 2번위치와 현재 2번위치 비교 → 같아서 다시 안그림
   이전 3번위치 없음, 현재는 3번위치 있음 → 추가해줌
   그런데 만약 새로운 아이템을 첫 번째 위치에 추가한다면??

    <ul>
    	<li /> --1
    	<li /> --2
    </ul>
    
    |
    |  // 아래로 변경 되었을 때 (3번 아이템을 맨 아래에 추가)
    |
    ▽
    <ul>
    	<li /> --1
    	<li /> --3
      <li /> --2
    </ul>

   이전 1번 위치와 현재 1번 위치 비교 → 같아서 다시 안그림
   이전 2번 위치(2)와 현재 2번 위치(3번) 비교 → 달라서 다시 그림
   이전 3번위치 없음, 현재 3번위치(2) 있음 → 달라서 추가함
   사실 3번 아이템만 추가된 것 뿐인데 불필요하게 다시 그리는 부분이 생긴다. 만약 맨 앞에 추가했다면 전부 다시 그렸을 것이다.
   그런데 key를 prop으로 받는다면 위치를 비교하는게 아니고 key를 사용해서 비교한다. 즉, key가 abc라는 아이템이 있다면 이전 abc키를 가진 아이템, 현재 abc키를 가진 아이템을 비교하는 것이다.
   
   
2. 리액트 훅
   훅이란 함수형 컴포넌트에서 stateful한 로직을 외부에 위탁하여 가지고있게 해주는 함수입니다. 함수형 컴포넌트는 훅이 나오기 이전에 항상 stateless한 컴포넌트였습니다. 따라서 리액트에서 stateful한 컴포넌트를 만들고자 한다면 클래스형 컴포넌트로 만들었어야 했습니다. 하지만 훅이 등장하고 함수형 컴포넌트 또한 useState와 같은 외부의 클로저를 이용하여 상태를 가질 수 있게 되었습니다. 그래서 현재는 함수형 컴포넌트가 널리 쓰이고 있고 리액트에서도 함수형 프로그래밍을 사용할 수 있게 된 것입니다.
   
   훅의 규칙
   1. 훅은 항상 컴포넌트의 최상단에서 호출되어야 한다.
   2. 훅은 반복문, 조건문에서 호출될 수 없다. 컴포넌트의 렌더링 시 항상 같은 훅들이 같은 순서로 호출되는것이 보장되어야 하기 때문이다.
   3. 커스텀 훅을 제외하고 이벤트 핸들러와 같은 일반 자바스크립트 함수나 클래스형 컴포넌트에서 사용할 수 없다.
   4. 커스텀 훅을 만들 경우 이름은 use로 시작해야한다.
      
      
3. 컴포넌트 생명주기
   1. 마운팅 (처음에 DOM에 렌더링되는 단계)
      1. constructor (생성)
      2. render(Virtual DOM에 올라간 후 실제 DOM에 추가됨)
   2. 업데이팅 (prop이나 state의 변경, 또는 forceUpdate로 인해 재렌더링 되는 단계)
   3. 언마운팅 (DOM에서 제거되는 단계)

오늘의 나는 어떤 어려움이 있었을까?

2차 평가를 위해 복습을 진행하던 중 내가 알게 모르게 애매모호하게 이해하고 있는 개념들이 정말 많은것 같았다. 예를 들면 리액트 훅 같은 경우 함수형 컴포넌트가 상태관리나 사이드 이펙트를 발생시키기 위해 사용하는 외부 함수 정도로 알고 있었는데, 왜 그것을 외부 함수를 이용해야 할 수 있는 것인가에 대한 의문이 남았고, 이걸 이제서야 찾아보고 조금이나마 이해했다. 앞으로는 처음 배울 때 정확히 이해하고 넘어가야겠다.

내일의 나는 무엇을 해야할까?

• 2차평가
• 프로젝트 스타트
• 투두리스트 1커밋