[TIL] 프로그래머스 프론트엔드 데브코스 DAY16 TIL

공부한 내용 📖

 

Module

index.html에 추가한 많은 script파일은 main.js에 묶고 export default와 import를 통해 모듈화 할 수 있다.

 

 

비동기와 promise, async await를 통한 실습

더미데이터를 가진 todoList를 만든 후, XMLRequest를 통해 todoList를 외부에서 api호출을 통해 받아오기.

export function request(url) {
  return new Promise((res, rej) => {
    const xhr = new XMLHttpRequest();
    xhr.addEventListener("load", (e) => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          res(JSON.parse(xhr.responseText));
        } else {
          rej(xhr.statusText);
        }
      }
    });

    xhr.open("GET", url);
    xhr.send();
  });
}

이렇게 만든 request를 다른js파일에서 import하여 아래와 같이 활용할 수 있다.

this.init = async () => {
    const data = await request("https://kdt-frontend.programmers.co.kr/todos");
    this.setState({
      ...this.state,
      todos: data,
    });
  };

 

 

궁금한 내용/부족한 내용🤔

큰 그림을 그려가며 작은 컴포넌트+더미데이터 활용으로부터 하나씩 컴포넌트를 확장해나가거나 덧붙이기+api호출활용 능력이 아직 부족하다.

 

 

느낀점✍

더 큰 서비스를 개발해야하는 todoList에서부터 강의 끄고 혼자하려고 하니 api호출을 위한 뼈대를 잡는 큰 그림 그리기도, 문법적인 디테일도 부족하다. 전부 이해를 하는것과 이해를 토대로 실제로 구현하는것은 좀 다른 영역이긴 한가보다. 많이 치다보면 적응되고 체화될 것이라고 믿는다.