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

 

✅ 오늘의 학습

- 고양이 사진첩 과제 제출

 

---

 

 

과제 제출

고양이 사진첩을 보완하는 과제를 오늘 제출했다.

새로운 코드를 작성하기보다는 기존에 있던 코드들을 조금 리팩토링을 했다.

 

state 변경 시 렌더링 최적화

 

isRender함수를 사용하여 조건 만족 시 렌더링을 하도록 하였는데,

객체만 탐색해서 비교하고 나머지는 전부 값을 직접 비교를 했다.

 

import { isObject } from "./typeCheck.js";

export const isRender = (currentState, nextState) => {
  if (isObject(currentState)) {
    return compareObject(currentState, nextState);
  }

  return currentState !== nextState;
};

const compareObject = (current, next) => {
  for (const [key, value] of Object.entries(current)) {
    if (value !== next[key]) {
      return true;
    }
  }
  return false;
};

다시 생각해보면 서버에서 받는 데이터는 같은 값이더라도

새로운 객체, 새로운 배열로 전달될텐데 그러면 계속 렌더링이 될 것이다..

그러려면 전체 탐색을 하여 전부 비교를 해야 할텐데 탐색비용에 신경이 쓰였다.ㅠㅠ

 

결국 전체탐색 코드는 작성했지만 과제로는 제출하지 않고 멘토님께 질문을 남겼다!

 

 

새로 깨달은 부분

loading 컴포넌트에 fixed를 사용하여 배경을 깔 경우

loading중일 때 클릭을 막을 수 있다!

 

어찌 생각해보면 당연한 부분이지만 이렇게도 제어할 수 있겠구나 생각했다.

(물론 방어코드로 혹시 몰라서 클릭을 막기는 했음)

 

 

---

 

✍ 느낀 점 

팀원들과 이야기하며 생각이 들었는데

여러가지 경우의 수를 너무 많이 생각을 하다보니 오히려 중요한 부분을 조금 놓치고 있는게 아닌가 싶었다.

깊게 생각하지 않아도 될 부분에서 너무 깊이 생각하니, 쉽게 보일 수 있는 부분들도

보이지 않게 되어서 조금은 가볍게 접근을 해보아야겠다는 생각이 들었다.

과제를 구현하며 이것저것 탐색을 좀 많이 해보다보니 탐색하는 것에 익숙해졌다 ㅋㅋ

코드를 좀 만져보며 시간을 쓰긴 했지만 좋은 시간들이였던 것 같다.

내일은 좀 더 성장한 내가 되길!!