[프리온보딩] 220508 그룹과제 #1 끝

그룹과제

공식적인 내생각

기능구현보다 더 중요한게 더 따로 있었으니 그것은 바로 팀원들과 각자의 작업물을 합치고 충돌을 해결하는 것이었다

사실상 이게 전부였던것같다 ㅋㅋㅋㅋㅋㅋㅋㅋ 충돌은 피할래야 피할수없는 이슈 아닐까... 이게 제일 오래걸렸고 난감했다

스스로 나름 규칙 지켜가면서 잘 짰다고 생각했는데 가끔 카페에서 커피 쫍쫍 하면서 정신 빼놓고 짰다가 변수명을 컨벤션과 맞지 않게 이상하게 적었다던가.. 필요없는 변수를 안 지웠다던가... 스타일 작업을 잘못 해서 전혀 관련없는 다른 컴포넌트에까지 영향을 미친다던가 하는 소소한 문제들이 좀 있었다 (정신차리자)

문서화한 것을 참고해가면서 안티패턴을 피해 코딩하는 것도 좋지만 손에 익을 때까지 노력해야겠다

다른 프로젝트

처음에 온보딩 스케줄표만 봤을 땐 다른 프로젝트도 병행할 수 있을 것 같았는데 오... 도저히 안되겠다

3월에 합류해서 계속 하던 팀 말고는 다 정리했다

온보딩 상상이상으로 빡세다 근데 그만큼 공부하는 습관도 들여지고 팀원이 9명인 신기한 팀플 (?) 도 해보고 뭔가 프론트엔드 분야에 대한 자신감이 조금씩 길러지는 느낌이다

암튼.. 좋다고... 머... 첫과제도 쫌 빡셌는데 기업과제는 정말 오들오들이다

실시간 동영상

메모하면서 실시간으로 듣자니 조금만 손가락을 쉬어도 내용이 쭉쭉 밀려버려서 아예 각잡고 녹화본을 정리하는 게 좋을 것 같다

짧막 메모 읽어보니까 전혀 포스팅할 각이 안나와서 오늘 코드리뷰들으면서 같이 알아본 내용들 위주로 정리하고 나머지는 내일부터 슬슬 정리해보려구

작업 내용

깃허브 무한충돌열차 구원자 git rebase

$> git pull [내가 작업중인 브랜치에 변경사항을 붙이고 싶은 브랜치]
$> git checkout -b [내가 작업하는 브랜치]
$> git rebase [내가 작업중인 브랜치에 변경사항을 붙이고 싶은 브랜치]

# 예시
$> git pull dev
$> git checkout -b feat/my-page
$> git rebase dev

만약 내가 dev 브랜치에서 분기한 feat/my-page 브랜치에서 작업하고 있었고, 도중에 다른 사람이 dev 브랜치에 자기 작업물을 merge하면 높높높은 확률로 feat/my-page 브랜치를 dev에 merge할 때 충돌이 발생한다

dev와 feat/my-page는 내가 feat/my-page 브랜치를 분기한 시점에서 다른 역사를 갖고 있고, git rebase는 분기 시점부터 dev 브랜치에서 발생한 모든 변경사항을 일종의 패치처럼 만들어 feat/my-page에 얹어주는 역할을 한다

그러면 feat/my-page는 본인뿐만 아니라 dev에서만 발생한 변경점까지 다 들고있게 되므로 feat/my-page를 dev에 merge할 때 충돌이 나지 않는 것이다

따라서 정기적으로 충돌을 관리하고 git rebase를 사용해두면 브랜치 관리에 도움이 된다

rebase 과정에서 (브랜치 분기 시점부터 시간순으로 진행된다) 충돌이 나면 바로 코드에 충돌 표식을 남겨주고, 어떤 브랜치의 코드를 선택할 것인지 보여주기 때문에 커밋 역사를 따라가며 충돌을 해결할 수 있다

rebase를 도중에 중단하고 싶다면 git rebase --abort

충돌을 커밋하고 rebase를 계속하고 싶다면 git rebase --continue

우리 팀 간단한 코드리뷰

• 빨간 오류 잡는것도 좋지만 노란 경고도 다 잡아서 안 뜨게 하자
  • 보통 선언만 해 놓고 사용하지 않는 변수나 함수가 있을 경우 보인다
  • 굳이 안 쓰는 걸 남겨놓을 필요는 없다
• 한 파일 내에 2개 이상의 컴포넌트를 선언하지 말자
  • 코드 길이가 길어지기도 하고, 여러 컴포넌트가 혼재하면 가독성을 많이 해친다
• useMemo, useCallback에 대해 알아보고 사용해보자
  • 함수나 변수 재사용하려 할 때 같은 값을 다시 계산하지 않아도 되어 성능이 좋아진다

오늘 정리한 내용

Custom Hook

Custom Hook

Custom Hook

Type vs Interface

[Typescript] Type vs Interface

[Typescript] Type vs Interface