정확한 단어 고르기
다른 뜻을 가진 단어와 구분하기
const data = await loadData();
- load : 가져와서 싣다
- fetch : 가져오다
- fetchData로 함수명을 바꾸던가
const success = await loadData() 로 바꾸는게 적절해보인다고 함. 성공여부만 반환하도록
- 리액트쿼리에서 isLoading, isFetching의 의미를 구분하는데 도움이 됨.
- get : 가져오다
- query : 질문하다
- 테스팅 라이브러리에서 제공하는 getByText, queryByText는 다른 동작을 한다.
- getByText : 결과값이 없으면 에러
- queryByText : 결과값이 없으면 null 반환
- 단어의 뉘앙스 차이에 따라 함수 동작이 달라짐.
- 미묘한 뉘앙스 차이를 이해하여 코드 문맥을 이해하는 데 도움이 됨
- UI 컴포넌트의 정확한 명칭을 이해하는 것도 도움이 됨
- 카드와 박스
- 앱바와 글로벌 내비바, 로컬 내비바
- 카드 : 하나의 주제로 묶인 콘텐츠와 액션
- 박스 : 내용물을 감싸는 래퍼
- select : 하나의 결과를 항상 선택한다.
- search : 모든 결과를 찾는 것에 그친다.
-
보다 구체적인 단어로 바꾸기
if (expirationDate < PROMOTION_END_DATE) {
return remainDuration / totalDuration;
}
- 시간(time) => 시각(date)
- 시간 => 기간(duration)
- 단어로 값의 의미를 알 수 있음
정확하지 않아도 좋은 경우
const MIN_TO_SEC = 60;
const HOUR_TO_SEC = MIN_TO_SEC * 60;
const DAY_TO_SEC = HOUR_TO_SEC * 24;
const MIN = 60;
const HOUR = MIN * 60;
const DAY = HOUR * 24;
- 단어가 의미를 정확하게 전달하지는 않게 됐지만, 간결해지고 맥락을 파악하기 쉬워짐
잘 보이는 형태로 작성해보기
- 책은 표, 각주, 용어정리, 목차 등을 활용해서 알기 쉽게 설명한다.
- 삼항연사자로 떡칠된 조건문을 표처럼 볼 수 있도록 개선함.
switch (type) {
case "apple":
str = 'a';
break;
case "banana";
str = 'b';
break;
default:
str = 'c';
}
const FRUIT_MAP = {
apple: 'a',
banana: 'b',
DEFAULT: 'c'
}
- switch 문도 직관적이긴 하지만, 조금 더 시각적으로 한 눈에 이해할 수 있도록 map을 활용
- 목차 모델을 사용해 zindex 꼬임 문제를 해결
- 모든 zindex를 한 곳에서 관리하도록해서 한 눈에 찾기 쉬워짐
- 용어 정리
- 다른 개발자가 의도를 이해하기 쉽도록 변수명에 의도를 드러냄
- 코드는 길어졌지만, 의도를 드러냄으로써 가독성이 좋아짐
- 각주 : 원하는 핵심만 전달하고 부연설명이 필요한 경우 윗첨자로 정보 전달
- 이벤트 로깅 클릭 이벤트를 모아서 처리하는 HOC 작성
나의 후기
- 유용하다
- 리팩토링 책에서 공부했던 내용을 실제 사례로 보면서 이해하기 쉬웠다.
- 미묘한 뉘앙스를 더 잘 이해할 수 있도록 영어 공부의 필요성을 느꼈다.
- 특히 마지막의 각주 모델로 로깅을 추상화하는 과정이 흥미롭다.1
