[2023-10-09] TIL - 모듈, 비동기 호출, API

📝배운 것

1. 모듈 사용법과 장점
2. 스크립트 src 방식을 모듈로 불러오는 방식으로 변경하는 방법
3. 비동기처리
4. 비동기[async]처리 하는 이유 (동기[sync]처리 방식을 쓰지 않는 이유)
5. 비동기 API 호출하는 방법
6. 작업 순서 생각하는 방법
7. XMLHttpRequest() 사용방식

 

💡알게된 것

1. API 호출하는 작업은 파일 하나에서 진행함으로써 코드 중복을 방지

 - api.js 파일을 하나 만들어서 API 호출 함수를 하나씩 export해서 사용한다.

 

2. API로 받아온 데이터를 map으로 뿌릴 때 사용하는 join('')의 이유

 - API로 데이터를 받아오면 마크업 뒤에 ,가 계속 붙는다.

 

3. API를 호출하기 전에 더미데이터를 직접 만들어서 데이터를 렌더링 해보고 하는 것이 좋다

 - API 호출이 문제인지 렌더링이 문제인지를 알 수 있다.

new TodoList({
  $target: $app,
  initailState: [
    {
      text: "하이",
    },
    {
      text: "호이",
    },
  ],
});

4. 비동기[async]처리 하는 이유 (동기[sync]처리 방식을 쓰지 않는 이유)

 - sync 방식으로 사용하게 되면 요청 후 응답이 오기 전까지 브라우저가 굳어버린다.

 

예를 들어 할 일 목록 앱의 작업 순서를 그림으로 그려보았다.

 

☝중요한 점

1. 컴포넌트 방식으로 생각하기

 - 어떤 프로젝트를 만들 때 위 그림 같이 정확하게 구상하고 코드로 구현해야 한다는 것을 알 게 되었다.

2. 콜백함수를 이용하기

3. 각 요소마다 이벤트를 등록할 때 일일이 하나씩 등록하는 방법말고는 어떤 게 있을지 알아보기💥

 - 각 요소에 클릭이벤트를 등록할 때 각각 이벤트를 렌더할 때 마다 등록하는 방법이 있는데 이 방법 말고 다른 효율적인 방법은 뭐가 있을지 찾아봐야 할 것 같다.