프로그래머스 데브코스 - FE#6 Vanilla JS_2 과제 회고

VanillaJS_2 고양이 사진첩

---

강의를 통해 만든 간단한 프로젝트를 보완하는 방식으로 과제가 진행되었고 Vanilla JS 컴포넌트 방식을 사용하여 진행한 프로젝트입니다. 이번 프로젝트에서는 데이터 정합성, setState 최적화를 진행해 보았습니다.

프로젝트의 기능들

• breadcrumb
• 탐색기 기능
• imageviewer 모달

 

미리 보기

⏱️ 로딩의 지루함을 날려주는 isLoading

프로젝트의 API가 로딩처리를 학습해보기 위해 상당히 긴 쓰로틀링이 랜덤 한 시간으로 걸려있었고 과제를 진행할수록 한국인은 어쩔 수 없구나라고 느끼게 되었다.🙂 로딩처리를 하는 로직은 생각보다 훨씬 간단했다. fetch와 서버와 통신하거나 연산이 필요해 시간이 오래 걸리는 작업이 있다면 해당 부분을 함수로 만들어 시작하는 부분에서 isLoading의 상태를 true로 작업이 끝나면 false 바꿔주는 방식으로 진행되었다. 로딩 중이라는 표시가 눈에 보이니 기다리는 시간이 많이 지루하지 않았다. 

 

로딩 처리

🚀 그 외의 기능들 

아주 다양한 기능을 가지고 있지는 않지만 탐색기로써 가져야 할 기본적인 기능들을 구현해보고 혼자 학습했다면 놓쳤을 예외처리들도 알게 되었다. Breadcrumb를 구현하는 방식은 노션 클로닝 프로젝트와는 다른 방식으로 상태값에 paths를 추가하여 기록하고 이동하면 이를 빼는 방식으로 진행되었다.

ImageViewer는 모달창 외의 부분을 클릭하거나 esc를 누르면 꺼지도록 하였고 onClose라는 함수를 통해 상태값을 null로 만들어 모달창을 끄는 방식이었다.

backspace 키를 누르면 이전 루트로 돌아가는 기능을 구현하였고 추가적으로 적용한 예외처리로는 로딩 중에 백스페이스를 누르는 경우에는 뒤로 가기 기능이 동작하지 않도록 조건문을 작성하였고 뒤로 가기가 진행되면 켜져 있던 모달을 끄고 이동하도록 처리하였다. 여러 가지 상황에 대해 생각해보며 더 나은 사용자 경험을 제공하는 방법에 대해 고려해보게 되었다.

 

🚧 데이터 정합성, setState 최적화

개인적으로 이번 프로젝트에서 가장 중점적으로 다뤄야 했던 내용이라고 생각한다. 예상하지 못한 오류를 대비하고 불필요한 연산을 줄여 최적화하는 코드에 대해 고민해보고 직접 작성해 보았다. validations라는 파일을 따로 만들고 여러 개의 함수들을 export 하였다.

더 세분화하여 확인하는 방법도 있지만 너무 작게 나누면 오히려 지저분할 것이라고 생각하여 필요한 내용들만 작성해 보았다. checkDifference는 객체의 경우를 비교하기 위해 stringyfy를 진행한 후 비교하는 방법을 사용하였다. 또한 typeof를 연산자를 활용하여 타입들도 체크하였다. checkUrl을 통해 기대하는 url값과 다른 경우에는 오류를 반환하도록 코드를 작성했다.

 

export const validationNewOperator = (target, component) => {
  if (!(target instanceof component)) {
    throw new Error(`${component.name} 컴포넌트는 생성자 함수입니다. new 키워드를 추가해주세요.`);
  }
};

export const checkDifference = (prev, curr) => {
  return JSON.stringify(prev) === JSON.stringify(curr);
};

export const checkIsObject = (state) => {
  if (typeof state !== "object") throw new TypeError("변경될 상태가 객체가 아닙니다.");
};

export const checkIsArray = (state) => {
  if (!Array.isArray(state)) throw new TypeError("변경될 상태가 배열이 아닙니다.");
};

export const checkIsBoolean = (state) => {
  if (typeof state !== "boolean") throw new TypeError("변경될 상태가 boolean이 아닙니다.");
};

export const checkUrl = (url) => {
  if (!url) return;
  if (typeof url === "string") {
    if (!url.startsWith(`${API_END_POINT}/static`)) {
      throw new Error("변경될 URL이 올바르지 않습니다.");
    }
  }
};

♻️ 리팩토링을 진행한 부분들

• "breadcrumb 최상단에서 root 출력, ko로 변경"
• "breadcrumb setState 최적화, setPaths 추가"
• "breadcrum 코드 정리"
• "태그 닫기, url 상수화, 조건문 개선"
• "validation 함수 이름 변경"
• "상수 사용, TypeError로 변경, 코드 개선"

🙌 느낀 점

위의 코드는 코드 리뷰를 통해 많이 정리된 코드를 공유하였다. 더 간결한 방식과 좋은 네이밍, 그리고 놓친 부분들을 리팩토링을 진행하였고 이를 통해 많이 개선된 코드를 작성할 수 있게 되었다. 코드 리뷰를 받으며 중요하다고 느낀 점은 리뷰받은 잘못된 방식의 코드를 다음에 다시 사용하지 않도록 확실하게 정리할 필요가 있겠다고 느끼게 되었다. 난이도가 어렵진 않았지만 상태값 체크하는 방법에 대해 깊게 생각해본 과제였다.