12월 3주차 기록

December 17, 2022 • ☕️ 4 min read

weekly

공연 끝!!

배워가기

react에서 변경을 트리거하는 것이 `effect`인지 `event`인지 구분하기

💡 TL; DR

effect는 해당 의존대상이 변경되는 이유와 상관없이(앞으로도) 영향을 받고자 할 때 등록해야 한다.

어떤 상태를 변경하고자 할 때, onClick나 onChange 같은 ‘event’에 의해서 상태를 변경할 것인지, useEffect 의존성 배열에서 의존하고자 하는 대상을 감지해서 상태를 변경할 것인가 구분해야 한다.

예를 들어, A와 B가 있을 때, A를 변경하면 B를 초기화해야하는 상황이 있다고 가정해보자. 그러면 아래와 같은 코드를 작성할 수 있다.

Copy

useEffect(() => {
  setB([]);
}, [A]);

이로써 B는 A에 의존성을 가지게 된다. 보통의 케이스에서는 큰 문제가 없을 수 있지만, 문제는 A의 입장에서는 B가 자신을 의존한다는 것은 관심사가 아니기 때문에, A는 이후에 추가적인 여러가지 이유로 변경될 수 있다는 사실이다.

따라서 B가 A의 effect로 변경되고자 한다면, A가 이후 어떤 이유로 변경되든지 상관없어야 한다.

어떤 서비스의 케이스에서, A를 변경하면 B를 초기화하는 상황에서 초기에 A가 변경되는 케이스는 사용자가 직접 select box로 A를 선택하는 것 뿐이었다고 가정해보자. 하지만 이후에 뒤로가기 시 queryParam에 저장된 값을 가져와서 이전 검색 조건을 유지해야 하는 기획이 추가되었고, A는 사용자 선택(event) 외에 페이지 접근시 queryParam에 존재하는 값으로 set되는 기능이 추가되었다. 문제는 이 경우 B의 queryParam에 존재하는 값으로 설정해야 하는데, A가 queryParam의 값에 의해 set되었기 때문에, B가 초기화되는 문제가 발생한다. 즉 queryParam으로 set을 하는 것과 A가 변경됨에 따라 초기화하는 effect가 동시에 수행되었다. 즉 B의 초기화는 A의 effect가 아니라, A를 변경하는 사용자의 event에 의해서만 동작해야 했던 것이다.

`npm install` 시 쓸 수 있는 플래그들

P|--save-prod
D|--save-dev
O|--save-optional
-save-peer
E|--save-exact - 딱 그 버전으로 설치해준다.
B|--save-bundle
-no-save
-dry-run

Ref https://docs.npmjs.com/cli/v7/commands/npm-install

이것저것

프로젝트에서 Jest를 처음 세팅할 때 'describe' is not defined. eslint (no-undef) 에러가 난다면 eslint config 파일에서 jest: true로 설정되어 있는지 확인하자.

기타

우아한 타입스크립트 컨벤션 정하기 여정

타입스크립트도 참 컨벤션 정하기가 어려운 것 같다. “니들 마음대로 해!” 컨셉의 자바스크립트를 본따 만든 언어이니 그럴 수밖에…?!

그리고 enum은 tree-shaking 문제 때문에 여기저기서 지양하자고 하면서, 결국 왜 모두들 쓰게 되는 걸까 😬

아, react 컴포넌트 작성 시 prop의 타입을 지정할 땐 type 대신 interface를 사용하곤 했었는데, interface는 IDE에서 미리보기가 되지 않는다는 사실을 몰랐다! 대체 왜 그러는 고야…

Ref https://techblog.woowahan.com/9804/

다양한 언어로 Git, Docker, Redis를 만드는 강의

Git을 만들다니..! 궁금하다

Ref https://codecrafters.io/

마무리

드디어 2022 송년회가, 그리고 슬우생 데뷔무대가 끝났다!

3주 정도밖에 되지 않는 시간 동안 거의 매일매일 드럼을 치며 미친듯이 바빴지만 즐거웠던 시간들이었다. 왕울보는 뒤풀이에서 눈물 한방울 찔끔 흘려버렸다. 직장인이 돼서도 밴드할 수 있을까? 했는데, 언제 또 이렇게 실력도 대단하고 마음도 따뜻한 사람들과 합주를 하고, 2천 명이 보는 큰 무대에서 공연을 할 수 있을까. 올 한 해는 이거 하나 한 것만으로도 마음 담뿍하게 뭉클하고 즐거웠던 기억으로 남을 것 같다.