클라우딩 어플리케이션 엔지니어링 TIL Day 17 - 고양이 사진 검색 사이트 해설 (3)

# 미션 3

# api 요청 결과 리팩토링 및 async - await 도입

에러 처리할 때는 백엔드팀과 회의를 통해서 어떤 에러를 어떻게 처리할 것인지 조율해야 한다

이번 실습에서는 500 에러를 처리하는 방법에 대해서만 다루겠다

const REQUEST_ERROR = {
  500: { msg: "요청 실패" },
};

//request에서 에러처리까지 한번에 가능
const request = async (url) => {
  try {
    //result의 값이 생길 때까지 아래 코드는 대기
    const result = await fetch(url);
    if (result.status === 200) {
      return result.json();
    } else {
      throw REQUEST_ERROR[result.status];
    }
  } catch (error) {
    alert(error.msg);
    return { data: null };
  }
};

api 코드에서는 then 이후의 로직을 처리할 필요가 없어진다

try ... catch 문으로 에러를 처리하는데 발생할 수 있는 에러들은 catch 문 안에서 처리할 수 있도록 한다

---

# ES6 import, export 적용

내보내고자 하는 컴포넌트에 export 작성

export default App;

해당 컴포넌트를 사용할 다른 컴포넌트에서 import로 불러온다

//main.js

import App from "./App.js";

new App(document.querySelector("#App"));

# 중복 제거 uniqueArray

중복을 제거할 때 사용하면 좋은 코드 잘 알아둘 것

export default function uniqueArray(list) {
  //중복 제거해서 Set으로 넣어주고 다시 Array로
  return Array.from(new Set(list));
}

---

# 기타 리팩토링

1. 메소드는 보기 좋게 분리하자

2. 오류가 생길 때는 console.log를 찍어보면서 현재 어떤 데이터 형식이 넘어오고 있는지를 확인한다

3. 공통적으로 사용하는 요소는 따로 분리하는 것이 좋다

 

# const와 let의 차이

▶ const

상수의 줄임말로 한 번 값을 할당하면 재할당이 불가능하다

선언과 동시에 초기화해야 한다

블록 스코프를 가지기 때문에 블록 내에서만 접근이 가능하다

객체 또는 배열일 경우 변수가 가리키는 객체나 배열의 내용은 수정할 수 있지만, 새로운 객체나 배열을 할당하려고 하면 오류가 발생한다

const pi = 3.14159;
pi = 3; // 에러: 상수는 재할당 불가능

▶ let

변수를 선언하고 재할당이 가능하다

선언과 초기화가 필수가 아니며, 초기화하지 않으면 undefined로 초기화된다

블록 스코프를 가지며 블록 내에서 선언된 변수는 블록 외부에서 접근할 수 없다

let count = 5;
count = 10; // 가능: 변수는 재할당 가능

---

# 테스트 작성

uniqueArray 에 대한 테스트 코드를 작성한다

//테스트 모듈을 불러온다
import uniqueArray from "../utils/uniqueArray.js";

//describe로 시작 -> jest에서 테스트 그룹을 정의하는 데 사용
describe("uniqueArray.js", () => {
  //테스트 케이스 1
  test("중복 제거 확인 number", () => {
    //예상 결과는 [0, 1]
    expect(uniqueArray([0, 1, 1])).toStrictEqual([0, 1]);
  });
  //테스트 케이스 2
  test("중복 제거 확인 string", () => {
    //예상 결과는 ['가'. '나', '다']
    expect(uniqueArray(["가", "나", "나", "다"])).toStrictEqual([
      "가",
      "나",
      "다",
    ]);
  });
});

---

# 검색 결과 없음 UI

데이터에 없는 검색어를 입력했을 때의 화면

서버 오류가 났을 때 화면

Empty 컴포넌트 코드 - SearchResult.js와 App.js 에서 로직 연결

class Empty {
  $empty = null;
  data = null;

  constructor({ $target }) {
    const $empty = document.createElement("div");
    this.$empty = $empty;
    this.$empty.className = "Empty";
    $target.appendChild(this.$empty);

    this.data = {
      show: false,
      isNull: false,
    };

    this.render();
  }

  show(data) {
    this.setState({
      show: data === null || data.length === 0,
      isNull: data === null,
    });
  }

  hide() {
    this.setState({
      show: false,
    });
  }

  setState(nextData) {
    this.data = nextData;
    this.render();
  }

  render() {
    if (this.data.show) {
      this.$empty.style.display = "block";
      if (this.data.isNull) {
        this.$empty.innerHTML = `
        <p>
        ❤️‍🔥요청 실패❤️‍🔥
        </p>`;
      } else {
        this.$empty.innerHTML = `
        <p>
        ❤️‍🔥결과가 없습니다❤️‍🔥
        </p>`;
      }
    } else {
      this.$empty.display = "none";
      this.$empty.innerHTML = ``;
    }
  }
}

export default Empty;

---

# 새로 알게 된 점

import와 export를 사용하여 컴포넌트 모듈화하는 방식에 대해 복습하고 정리하는 시간이었다

테스트 코드를 작성하는 것은 이번 강의를 통해서 처음 알게 되었다

단순한 테스트 코드여서 쉬웠지만 프로젝트의 규모가 커진다면 작성하기 굉장히 어려울 것 같다는 생각이 들었다

앞으로 프론트엔드 프로젝트를 진행하게 된다면 오늘 강의에서 배운 것처러 jest 를 활용하여 테스트 코드를 작성하는 습관을 들여야겠다

또한 현재 데이터 상태를 받아와서 다른 화면을 보여주는 것을 반복해서 진행하면서 전체적인 로직 흐름에 대해 이해할 수 있게 되었다

하지만 더 많은 연습이 필요할 듯 하다

다음 강의가 마지막 해설이고 모의고사를 봐야하는데 잘 할 수 있을지 조금 걱정되지만

그래도 화이팅해보겠다