[FE] 섬세한 ISFP의 코드 가독성 개선 경험 - 정리

• https://youtu.be/emGLxi0LvNI?si=NXWu45SAjQAdLAmn
• 섬세한 ISFP의 코드 가독성 개선 경험 / if(kakao)2022
• 발표자가 집중한 부분은 "어떻게 하면 정확한 단어를 고를지"와 "어떻게 하면 한 눈에 잘 보이는 형태로 작성할 수 있을지"이다.

정확한 단어 고르기

다른 뜻을 가진 단어와 구분하기

const data = await loadData();

• load : 가져와서 싣다
• fetch : 가져오다
• fetchData로 함수명을 바꾸던가 const success = await loadData() 로 바꾸는게 적절해보인다고 함. 성공여부만 반환하도록
• 리액트쿼리에서 isLoading, isFetching의 의미를 구분하는데 도움이 됨.
• get : 가져오다
• query : 질문하다
• 테스팅 라이브러리에서 제공하는 getByText, queryByText는 다른 동작을 한다.
  • getByText : 결과값이 없으면 에러
  • queryByText : 결과값이 없으면 null 반환
  • 단어의 뉘앙스 차이에 따라 함수 동작이 달라짐.
• 미묘한 뉘앙스 차이를 이해하여 코드 문맥을 이해하는 데 도움이 됨
• UI 컴포넌트의 정확한 명칭을 이해하는 것도 도움이 됨
  • 카드와 박스
  • 앱바와 글로벌 내비바, 로컬 내비바
  • 카드 : 하나의 주제로 묶인 콘텐츠와 액션
  • 박스 : 내용물을 감싸는 래퍼
  • select : 하나의 결과를 항상 선택한다.
  • search : 모든 결과를 찾는 것에 그친다.
  •  

보다 구체적인 단어로 바꾸기

• 짜증이라는 단어에는 여러 감정이 뭉뚱그려져 있다. 보다 구체적이게 표현할 수 있는 방법이 많다.

  if (expirationTime < PROMOTION_END_TIME) {
    return remainTime / totalTime;
  }

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