[2024 여름방학 React.js 스터디] 강보경 #2주차

08. 모듈화 구문

  import & export : 자바스크립트 코드를 모듈화 할 수 있는 기능

  모듈화 : 다른 파일에 있는 자바스크립트 기능을 특정 파일에서 사용할 수 있는 것

  코드를 모듈화하면 코드 재사용성이 높아지고 유지보수가 용이해진다

  export를 통해 모듈 내부의 함수, 변수, 객체 등을 내보내고 import를 통해 다른 모듈에서 가져와 사용함

  하나의 모듈에서 여러 개의 값을 내보내고(export) 이를 선택적으로 가져올 수 있음(import)

  default는 모듈당 하나의 값만 내보낼 때 사용할 수 있고, export랑 다르게 export default를 사용하면 중괄호{} 없이 임의의 이름을 가져올 수 있음

 

 

09. 비동기 처리

  비동기 처리 : 프로그래밍에서 하나의 작업이 완료될 때까지 기다리지 않고, 다음 작업을 계속 실행할 수 있도록 하는 방식

  콜백 함수 : 함수가 완료되었을 때 호출되는 함수로 비동기 작업이 완료될 때 콜백을 호출하여 결과를 전달함

                   에러처리가 번거롭고 콜백헬에 빠질 수 있다는 단점이 있음

  function fetchMenu() {

          setTimeout(() => {

          let data = { firstMenu: "구독" };

          callbackFunction(data);

          return data;

      }, 5000);

  }

 

  let menu;

  fetchMenu(function(result){

      console.log("5초 뒤 실행", result);

      menu = result;

      console.log("출력 결과 : ", menu);

  });

 

  프로미스 : 비동기 작업이 완료됐는지 실패했는지 나타내는 객체로 then, catch, finally 메서드를 사용하여 결과를 처리

  function fetchMenu(callbackFunction) {
  return new Promise(function (resolve, reject) {
       setTimeout(() => {
       let data = { firstMenu: "구독"};
              if(error) {
               reject(error);
              }
           resolve(data);
       }, 5000);
      });
  }
  let menu;

  // 프로미스 문법으로 작성된 코드
  fetchMenu()
      .then(function(result) {
       console.log("5초 뒤 실행", result);
          menu = result;
      })
      .catch(function(error) {
       console.log("에러처리")
          return;
      });

  // 콜백 함수로 작성된 코드
  fetchMenu(function(error, result){
  if(error) {
       console.log("에러처리");
          return;
      }
      console.log("5초 뒤 실행", result);
      menu = result;
      console.log("출력 결과 : ", menu);
      renderPageUI(function (error, response) {
       response;
          menu;
      });
  });

 

  async/await : 프로미스를 더 쉽게 사용할 수 있도록 해주는 문법. async는 프로미스를 반환하고 await는 프로미스가 해결될 때까지 기다림

  async functionc init() {
      // 1.메뉴선언
      let menu; //undefined
      // 2.메뉴 데이터 호출해서 할당
      menu = await fetchMenu();
      // 3. 메뉴 데이터 콘솔에 출력
      console.log(menu);
  }
  init();