코드숨_코드리뷰 스터디 2주차 회고

date

May 14, 2023

slug

codesoom2

author

status

Public

1. 배운내용

1-1) 관심사 분리와 컴포넌트 구조

저번주는 조금 더 개별 코드와 함수단위에서 관심사 분리를 어떻게 할지 고민을 했다면

이번에는 컴포넌트 전체 구조적으로 어떻게 분리하고, 어떻게 각각을 연결할지 중점적으로 고민했다.

나는 UI를 그리는 로직은 무조건 별도로 빼내서, 인자로 해당 값들을 받아 그리는 로직만 구현하게 폴더를 만들었다. 이 때 UI를 그리는 로직이 복잡해진다면 별도의 컴포넌트로 분류할 수 있다.

이 때, 속성명 또한 이러한 관심사가 분리된 코드라는 것이 명확하게 반영되어야 한다.

그 동안 생각하지 못했던 부분이 아래의 부분이다. props로 값을 넘겨줄 때 너무 타이트하고, 명확하게 작명을 한다면 props를 처리해주는 로직에서 만약 변경이 일어났을 때 해당 props의 이름 또한 바꿔줘야한다.

handler 혹은 컴포넌트에서 해당 로직을 변경할 때 값을 전달받는 곳과 이걸 처리하는 곳이 명확히 분리되어야하고, 이것이 이름에서 들어나야한다는 것을 알게 되었다.

또한 확장이 가능한 구조로 코드를 관리해야한다.

예를 들어 우리가 현재 할일을 추가하는 로직만 있지만 추후에 업데이트를 하게 된다면? 이라는 가정을 갖고 변수이름을 설정하는 고민도 가져야한다.

1-2) Guard Clauses

Guard Clauses란? if문을 깔끔하게 사용할 수 있는 패턴이다.

예를 들어서 아래와 같은 코드가 있다고 가정할 때 너무 복잡해서 직관적으로 코드를 알아보기가 힘들다.

function getPayAmount() {
  let result;
  if (isDead)
    result = deadAmount();
  else {
    if (isSeparated)
      result = separatedAmount();
    else {
      if (isRetired)
        result = retiredAmount();
      else
        result = normalPayAmount();
    }
  }
  return result;
}

이를 Guard Clauses를 적용하면 아래와 같이 굉장히 직관적으로 할 수 있다.

function getPayAmount() {
  if (isDead) return deadAmount();
  if (isSeparated) return separatedAmount();
  if (isRetired) return retiredAmount();
  return normalPayAmount();
}

원래도 알고 있었던 개념이지만, 실제 코딩할 때는 무분별한 삼항연산자와 else를 사용하는 형태로 코드를 짜서 익숙하지 않았다. 이를 자주 사용하는 습관을 들여야겠다는 생각을 했다

1-3) nanoid 사용

기존에 UUID는 알고 있었지만, 이번에 nanoid에 대해서 알려주셔서 궁금해서 적용해봤다.

개인적으로는 사용하기도 좋고, 커스텀도 가능한 것 같아서 앞으로 id 사용할 때 자주 쓰지 않을까 생각한다.

import { nanoid } from 'nanoid';

setTodos([...todos, { id: nanoid(6), text: newOrUpdateTodo }]);

2. 회고

첫 회고 조금 더 빨리 보내기

코드리뷰를 여러차례 진행할수록 훨씬 많이 배우고 고민의 깊이가 깊어진다.

다음 주부터 테스트코드를 배우게 되는데, 제일 배우고 싶었던 부분이니만큼 더 빨리 리뷰를 보내서 많이 배울 수 있으면 좋겠다.

추상화(캡슐화)를 항상 유념하기

옛날에는 이름 짓는 것(변수명, props명, 컴포넌트명) 을 너무 깊게 고민하면 속도도 안나고, 일단 만들자라는 생각이 컸다.

그런데 이번에 코드리뷰를 하면서 느낀 것은 단순히 작명하는 것이 아니라 데이터의 흐름과 추후 기능의 확장 등이 반영된 결과물이라고 생각이 들었다.

이름은 생각보다 굉장히 많은 의미를 갖고 있다는 것을 항상 유념하자