프로그래머스 데브코스 TIL - Day 19

 

📑 과제 피드백, 복습

오늘은 지난 주에 제출했던 Todo App 과제에 대해 멘토님에게

피드백을 받은 것을 확인하게 되었다.

 

멘토님이 피드백을 주시기 전에 팀원 분들이 여러가지 적어주었는데

내가 놓치고 있었던 부분들이 많았던 것 같다.

 

 

1. 호출되면서 실행되는 함수들은 묶어서 관리하자!

const initialize = () => {
  hasNew(new.target);
  // ...
}

initialize();

 

생성자 함수가 호출되자마자 실행되는 부분들은

상단에 지저분하게 작성하는 것 보다는

조금은 나누어서 관리를 해주어도 좋을 것 같다.

 

2. map을 사용한 toggle

 

✍ 이전에 작성한 코드

const nextState = [...this.state];
const todo = nextState.find((todo) => todo.id === id);

todo.isCompleted = !todo.isCompleted;
this.setState(nextState);

완료된 Todo의 id를 받고 state를 복사하여 해당 Todo의 isCompleted를 직접 변경하여

토글을 하는 기능이였는데 이걸 작성하면서도 뭔가 직접 변경하는 부분 때문에

원본 객체가 수정되는 것이 조금 께림직 했었다.

 

✅ 팀원 분이 제안해 주신 코드 

const nextState = this.state.map(todo => {
  if (todo.id === id) {
    return { ...todo, isCompleted: !todo.isCompleted }
  }
  return todo;
})

this.setState(nextState);

map을 사용하여 새로운 배열을 만들고 해당하는 id의 isCompleted를 변경하는 방식이다.

일일히 복사하는 방식보다는 보기가 나은 것 같고

그리고 이 방식을 사용하면 일단은 원본 객체의 isCompleted가 수정되지 않는다. 

 

 

3. this 선언과 const선언 구분하기

해당 생성자 함수 내부에서만 사용할 함수의 경우 const를 사용하자.

알면서도 this선언 사이에 const가 있는게 보기 불편해서 this를 사용했다.. 반성😢

불가피하게 섞어서 선언해주어야 하기 때문에 정리할 수 있는 방향을 다른 쪽으로 찾아보아야겠다.

 

 

4. 클래스를 통한 css지정

간단한 과제여서 생략한 부분이였지만

간단한 과제에도 웬만하면 class를 부여하는 습관을 가져야겠다. 

 

멘토님이 추가적으로 읽을 참고 링크를 주셨다. 🙌

https://ui.toast.com/fe-guide/ko_HTMLCSS#css

 

5. has나 is의 이름을 갖는 변수나 함수는 boolean 타입을 반환

관용적으로 사용하는 부분이기 때문에 에러를 던져주는 목적으로 사용할 경우

다른 메서드 명을 사용하자.

 

✍ 이전에 작성한 코드

const isArray = (data) => {
  if (!Array.isArray(data)) {
    throw new Error("데이터 타입이 Array가 아닙니다.");
  }
};

const isObject = (data) => {
  if (toString.call(data) !== "[object Object]") {
    throw new Error("데이터 타입이 Object가 아닙니다.");
  }
};

 

✅ 변경된 코드

const checkArray = (data) => {
  if (!Array.isArray(data)) {
    throw new Error("데이터 타입이 Array가 아닙니다.");
  }
};

const checkArray = (data) => {
  if (toString.call(data) !== "[object Object]") {
    throw new Error("데이터 타입이 Object가 아닙니다.");
  }
};

 

 

---

✍ 느낀 점

 

이전에 스터디를 진행했을 때도 느낀 부분이지만 코드 리뷰는 참 좋은 것 같다.

몰랐던 내용을 새로 알게 되기도 하고 알고 있던 내용을 한 번 더 되짚어 보게 만드는 것 같다.

그리고 다른 사람의 코드를 리뷰하기 위해 코드를 읽는 것도 도움이 많이 되었다.

왜 이렇게 사용했을까? 하고 궁금하기도 하고 그 과정에서 검색해서 알아보는 과정 또한 뜻깊었다.

그리고 팀원 분들이 친절하게 코드 리뷰를 해주셔서 그런 모습에 대해서도 많이 배웠다. 🙌