6주차 과제 - 고양이 사진첩 최적화 및 유효성 검사하기

  이번 6주차 과제는 기존의 강의를 토대로 최적화 및 간단한 기능을 추가하는 간단한 과제였다. 우선 고양이 사진첩 만들기 강의를 통해서 그 동안 배웠던, 내용들을 복습하는 의미가 강했고 컴포넌트를 구성하고 API를 통해서 서버와 통신하고 또 받아온 데이터를 하위 컴포넌트에게 뿌려주어 이를 활용하는 일련의 과정을 다시 한 번 고양이 사진첩을 통해서 복습하는 과정이었고 그 과정에서 간단한 과제가 주어졌다.요구 사항은 아래와 같다.

---

 

고양이 사진첩 컴포넌트 구조

---

과제 기본 요구 사항
1. 지금 구현된 코드에서는 state에 대한 정합성 체크를 전혀 하지 않는데, 이 부분을 보충해주세요.
2. 컴포넌트별로 올바르지 않은 state를넣으면 오류가 발생하도록 해주세요.
3. 각 컴포넌트의 setState를 최적화하여 이전 상태와 비교해서 변경사항이 있을 때만 render 함수를 호출하도록 최적화를 해봅니다.
4. 루트 탐색 중이 아닌 경우, 백스페이스 키를 눌렀을 때 이전 경로로 이동하도록 만들어봅니다.

---

  1번 요구사항인 정합성 검사 즉, 각 컴포넌트의 state에 알맞은 데이터가 들어가는지 확인하는 유효성을 검사하는 코드를 구현하기 위해서 먼저 validation.js파일을 만들고 각 컴포넌트에 들어가는 데이터를 확인한 후 Array, Object, Boolean값을 확인하는 함수를 만들고 export했고 각 컴포넌트에서 import해서 유효성 검사를 실시했다. 

 

export function isArray(array) {
  if (!Array.isArray(array)) {
    throw new Error("배열을 전달해 주세요!");
  } else {
    return true;
  }
}

export function isObject(object) {
  if (!(object.constructor.toString().indexOf("Object") > -1)) {
    throw new Error("객체를 전달해 주세요!");
  } else {
    return true;
  }
}

export function isBoolean(boolean) {
  if (!(typeof boolean === "boolean")) {
    throw new Error("불리언값을 전달해 주세요!");
  } else {
    return true;
  }
}

 

  2번 요구사항인 올바르지 않은 state를 넣었을 경우 오류가 발생하도록 만드는 요구 사항은 1번 요구사항에 붙여서 바로 Error가 발생하도록 만들어 주었다.

 

  3번 요구사항인 setState를 최적화는 this.state와 nextState중 변화가 발생한 경우에만 setState( )내의 render( )를 호출할 수 있도록 데이터를 직접 비교하여 조금이라도 변경이 있는경우에만 render( ) 함수가 호출 될 있는 조건을 넣었다.

 

  4번 요구사항인 백스페이스 키를 눌렀을 때 이전 경로로의 이동은 기존에 구현이 되어있던 onPrevClick( )를 활용하여 window에 이벤트를 등록하고 이벤트 핸들러를 등록하여 root인 경우를 제외하고 뒤로 갈 수 있도록 구현 하였습니다.

---

  과제를 하며 느낀점

 

  정말 신기하다고 느낀것은 이전에 한 번씩 해봤던 과정이어서 그랬는지 우선 크게 부담이 없었다. 물론 내용 자체가 그렇게 어려운 내용은 아니었지만 처음 정합성 검사라는 이야기를 들었을 때는 그게 무엇인지, 왜 해야하는지 몰랐기 때문에 엄청 당황했던 기색이 있었다. 하지만 이번 과제를 진행할 때는 자연스럽게 자료구조가 컴포넌트별로 달라지는 것을 알고 자연스럽게 validation검사를 위한 파일을 만들고 자료구조별로 validation 검사를 할 수 있도록 함수들을 구현하고 export해서 사용해야 겠다는 생각이 자연스럽게 들었다. 반복된 강의를 통해서 컴포넌트에 조금은 익숙해 진게 아닐까 하는 생각이 들었고, 아직도 새로운 코드의 구조를 완벽하게 이해하는데 많은 시간이 걸리긴 하지만 이전 보다는 확실히 나아졌고 코드를 수정하거나 바꿔야 하는 부분들이 생기면 코드를 이해하고 그 부분만 찾아서 바꾸는 것이 어느정도 가능해 진 것 같다는 생각이 들었다. 그래서 꾸준히 계속해서 공부하다 보면 오늘보다 내일 더 발전한 내가 될 수 있을 것이라는 확신이 들었던 것 같다. 

 

https://github.com/WooDaeHyun/Dev-cours-6week-Assignment

GitHub - WooDaeHyun/Dev-cours-6week-Assignment