[VanillaJS] 고양이 사진첩 만들기_과제

❗❗  데브코스 31일차 (09.13)

 

"고양이 사진첩 만들기" 실습이 끝나고 아주 간단한 과제가 주어졌다.

1. 각각의 컴포넌트에서 상태 변화시 setState에 들어오는 값에 대한 정합성 체크하기
2. 불필요한 render 제거
3. 백스페이스 눌렀을때 이전 경로로 가기

✅ 정합성 체크

정합성 체크는 방어 코드의 일환으로 상태 값을 컨트롤할 때
항상 방어 코드를 작성하는 습관이 들여있으면 좋을 것 같다.

 

정합성 체크는 typeof로 판별해 주었다.
각각의 컴포넌트가 사용하는 type (boolean, object) 등에 따라 setState 발생 시,
해당 type을 체크와 값 여부를 체크해 주었다.
잘못된 타입이 들어오게 되면 다음과 같이 에러를 발생시키게 했다.

throw new Error("타입 에러");

정합성 체크를 타입과 값 여부만 체크해주면 되는지 아니면 구체적으로 다른것도 고려해야하는지는

코드리뷰를 받아봐야 알 것 같다.

 

✅ render 최적화

최적화 작업은 모든 개발 직군에서 필수적으로 알아야 하는 사항인 것 같다.
그중 실습에서 할 수 있는 최적화는 렌더링의 최적화이다. 불필요한 렌더링이 지속적으로 발생한다면,
불필요한 대기시간이 많이 소요될 수도 있기 때문에 매우 중요하다.

 

고양이 사진첩 만들기는 기본적으로 App(최상위 컴포넌트)에서 상태가 변경되면
각각의 모든 하위 컴포넌트들의 render 함수가 실행되어 불필요한 render가 발생하게 된다.
각각의 컴포넌트에서 사용하는 값 외에 변경사항이 발생 시에 불필요한 render를 없애
최적화 시켜줘야 한다.

 

이것 또한 매우 간단하다.
각각의 컴포넌트에서 setState가 발생될 때, 현재 state 값과 다음의 state 값을 비교하여
변화가 있을 시에만 render 함수를 호출하게끔 작성하면 된다.

    예시 코드
    if (this.state !== nextState) {
      this.state = nextState;
      렌더링 발생 코드
    }

 

✅ 백스페이스 이벤트

이것 또한, 기존의 코드를 이용하면 아주 간단하다.
윈도의 객체 이벤트를 이용하여 Backspace 버튼 이벤트 발생 시 이전 경로로 가는 이벤트 로직만 덧붙이면 된다.

 window.addEventListener("keyup", (e) => {
    if (e.key === "Backspace") {
      이전 경로로 가는 로직 작성
    }
  });

위의 세개의 조건은 아주 간단하지만 개발시에 제일 중요한 것을 요구하는 과제인 것 같다.

방어코드, 렌더링 최적화, 이벤트 로직을 구현하면서 사소한 것을 잊지않기 위해 노력해야겠다.

 

📖 학습한 내용

• VanillaJS
  • 고양이 사진첩 만들기 과제