[클라우딩 어플리케이션 엔지니어링 TIL] 240119

개발 공부/데브코스 TIL

[클라우딩 어플리케이션 엔지니어링 TIL] 240119 - 고양이 사진 검색 실습 3

가욤이 2024. 1. 20. 14:54

Intro

오늘은 고양이 사진 검색 실습에 대한 간단한 리팩토링을 학습했다.

모의 테스트를 풀라고 했는데 강의를 다 들어야 풀 수 있을 것 같아서 계속 미루고 있는 중이다 ㅎ,,,

오늘 학습한 내용

: api, 모듈화, 기타 리팩토링

👩‍💻 async-await 도입
API fetch 코드를 async , await 문을 이용하여 수정해주세요. 해당 코드들은 에러가 났을 경우를 대비해서 적절히 처리가 되어있어야 합니다.

👩‍💻 api 요청 결과 처리
API 의 status code 에 따라 에러 메시지를 분리하여 작성해야 합니다.

async-await

기존 코드에선 api 호출 시에 자바스크립트의 fetch-then을 통해 api를 호출하였는데 fetch-then보다 가독성이 좋은 async-await 문법을 이용해 코드를 개선하였다.

fetch-then

const result = () => {
  return fetch(url).then((res) => res.json());
}

async-await

const request = async url => {
  return await fetch(url);
}

추가로, try-catch문을 사용해 에러 핸들링을 하였다.

const request = async (url) => {
  try {
    const result = await fetch(url);
    if (result.status === 200) {
      return result.json();
    } else throw REQUEST_ERROR[result.status];
  } catch (err) {
    alert(err.msg);
    return { data: null };
  }
};

👩‍💻 ES6, import, export
ES6 module 형태로 코드를 변경합니다. webpack , parcel 과 같은 번들러를 사용하지 말아주세요. 해당 코드 실행을 위해서는 http-server 모듈을(로컬 서버를 띄우는 다른 모듈도 사용 가능) 통해 index.html 을 띄워야 합니다.

import/export

<body>	
  <div id="App"></div>
  <script src="src/utils/validator.js"></script>
  <script src="src/api.js"></script>
  <script src="src/ImageInfo.js"></script>
  <script src="src/SearchInput.js"></script>
  <script src="src/DarkModeToggle.js"></script>
  <script src="src/Loading.js"></script>
  <script src="src/KeywordHistory.js"></script>
  <script src="src/SearchResult.js"></script>
  <script src="src/App.js"></script>
  <script src="src/main.js"></script>
</body>

import/export를 사용하지 않고 코드를 불러오기 위해선 script 태그로 index.html에 호출했어야 했다.

<div id="App"></div>
<script type="module" src="src/main.js"></script>

ES6에서 새롭게 도입된 import/export를 사용해 main.js나 App.js에 클래스 컴포넌트들을 export하여 최종적으로 index.html에는 main.js만 호출할 수 있도록 구현한다.

중요한 건 type="module" 속성을 꼭 넣어줘야 한다.

main.js

import App from './App.js';

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

App.js

import Loading from './Loading.js';
import DarkModeToggle from './DarkModeToggle.js';
import ImageInfo from './ImageInfo.js';
import SearchInput from './SearchInput.js';
import SearchResult from './SearchResult.js';
import api from './api.js';

class App {
  ...
}

export default App

기타 리팩토링

최근 검색한 키워드를 SearchInput 아래에 표시되도록 만들고, 해당 영역에 표시된 특정 키워드를 누르면 그 키워드로 검색이 일어나도록 만듭니다.
단, 가장 최근에 검색한 5개의 키워드만 노출되도록 합니다.

Set

고유한 값을 저장할 수 있는 자료구조인 Set을 사용하여 최근에 검색한 5개의 키워드에서 중복된 검색어를 제거하는 리팩토링을 진행했다.

Array.from(new Set(list))

new Set으로 Set 인스턴스를 생성하고 이를 배열로 변환하는 메소드인 Array.from을 사용해 배열을 반환한다.

마무리

실습을 진행해보니 앞으로 프로젝트 할 때 어떻게 개발해야 할지 방향이 어느정도 잡히는 것 같다.

그리고 강의에서 강사님이 알려주신 코드 구현하는 방법대로 코드를 짤 때 console.log를 찍어보며 데이터가 잘 들어오는지 확인해보면서 코드를 짜니 어디서부터 잘못됐는지 오류를 해결하는 데에 시간을 단축할 수 있었다.