9. 모듈화 | Notion

요구사항 : 코드 구조 관련.

ES6 module 형태로 코드를 변경합니다.

webpack , parcel 과 같은 번들러를 사용하지 말아주세요.

해당 코드 실행을 위해서는 http-server 모듈을(로컬 서버를 띄우는 다른 모듈도 사용 가능) 통해 index.html 을 띄워야 합니다.

현재는 index.html 에서 모든 js 파일을 쭉 실행 후, 정의 된 상태에서 쓸 수 있는 상태.
문제 : 컴포넌트가 많이 늘어나면 js 파일 정의가 늘어나야 하는 상황.

모듈화.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="src/style.css" />
    <title>Cat Search</title>
  </head>
  <body>
    <main id="App"></main>
    **<script type="module" src="src/main.js"></script>**
  </body>
</html>

index.html에 main.js type을 module이라고 지정한다.
나머지 js를 import , export를 시켜야 함. 아무 컴포넌트를 import 받을 수 있는게 아닌, export 된 module만 받을 수 있다.

class App {
  //...생략
}

**export default App;**

**import App from './App.js';**

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

App.js에도 필요한 컴포넌트 import 시킨다. 각 컴포넌트에서 exrport시켜야함.

import Loading from "./Loading.js";
import DarkmodeToggle from "./DarkmodeToggle.js";
import SearchInput from "./SearchInput.js";
import SearchResult from "./SearchResult.js";
import ImageInfo from "./ImageInfo.js";

config.js, msg.js 로 분리.

const config = {
   API_ENDPOINT : "<http://localhost:4001>",
}

export default config;

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

export default msg;

**import config from './config.js';
import msg from './msg.js';

const { API_ENDPOINT } = config;
const { REQUEST_ERROR } = msg;**

const request = async(url) => {

  try{
    const result = await fetch(url);
    // console.dir(result.status);  
    if(result.status === 200){
      return result.json();
    }else{
      throw REQUEST_ERROR[result.status]; 
    }
  }catch(err){
    console.log(err);
    alert(err.msg);
    return {
      data : null,
    }
  }
}

const api = {
  fetchCats: keyword => {
    return request(`${API_ENDPOINT}/api/cats/search?q=${keyword}`);
  },
  fetchCatsPage: (keyword, page) => {
    return request(`${API_ENDPOINT}/api/cats/search?q=${keyword}&page=${page}`);
  },
  fetchRandomCats : () => {
    return request(`${API_ENDPOINT}/api/cats/random50`);
  },
  fetchCatDetail: id => {
    return request(`${API_ENDPOINT}/api/cats/${id}`);
  },
};

export default api;

KeywordHistory 키워드 중복제거 추가.

uniqueArray라는 메소드를 만들어서 중복제거. 외부 파일로 추가한다.
utils > uniqueArray.js 추가