[2024 여름방학 React.js 스터디] 백채린 #2주차 섹션 8~9

섹션 8. 모듈화 구문

 

 

1. import와 export 소개

 

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

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

 

 

2. import와 export 기본 문법 실습

 

- export

export 변수, 함수
// 다른 파일에서 가져달 쓸 함 수 앞에 export 작성

 

- import 

export된 파일을 improt로 불러와 사용

import { 불러올 변수 또는 함수 이름 } from '파일 경로';
// export된 변수나 함수를 {}에 선언한 뒤 해당 파일이 있는 경로를 적어줌

 

 

3. import와 export 문법으로 여러개 거내기

 

// math.js 파일
let pi = 3.14;

function sum(a, b) {
  return a + b;
}

export { pi, sum };


// index.js 파일
import {pi, sum} from "./math";

console.log(sum(10, 20));

 

 

4. default 구문 설명

 

default: 파일 안에서 내보낼 게 하나인 경우 사용

→ 뷰, 리액트의 컴포넌트에서 컴포넌트를 내보낼 때 export default를 많이 사용

 

// app.js 파일
let message = "hi";

export default message

// index.js 파일
import message from "./app";

console.log(message);

 

 

5. import와 export를 이용한 라이브러리 사용 방법

 

* 라이브러리: 개발자가 편하게 구현할 수 있도록 미리 만들어 놓은 기능들

lodash 라이브러리: 데이터 조작을 조금 더 편하게 해주는 API를 제공해주는 라이브러리

 

import 라이브러리이름 from "라이브러리이름";
import { 라이브러리 기능 } from "라이브러리이름";

// 예시
improt lodashlibrary from "lodash";

console.log(lodashlibrary);

 

 

 

 

섹션 9. 비동기 처리

 

 

1. 비동기 처리란 무엇인가

 

비동기 처리: 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립의 특성

ex) 유튜브의 첫 화면

// 1. 사용자 정보 요청
fetchUser(); // 0.1초
// 2. 좌측 메뉴 정보 요청
fetchMenuInfo(); // 1시간
// 3. 영상 본문 요청
fetchContents(); // 1초
// 4. 페이지 UI 표시
renderPageUI(); // 2초

 

2번 코드의 시간이 오래 걸리기 때문에 이를 기다리지 않고 다른 코드들을 먼저 실행하는 것이 자바스크립트의 비동기 처리임

 

 

2. 비동기 처리 코드 예시

 

function fetchMenuInfo() {
  return $.get("http://domain.com/api/menu", function (response) {
    menu = response;
  });
}

// 1. 사용자 정보 요청
fetchUser(); // 0.1초
// 2. 좌측 메뉴 정보 요청
let menu; // undefined
fetchMenuInfo(function (response)) {
  menu = response; // 1시간
  // 4. 페이지 UI 표시
  renderPageUI(menu); // 2초
});
// 3. 영상 본문 요청
fetchContents(); // 1초

 

 

3. 콜백 함수를 이용한 비동기 코드 처리

 

function fetchMenu(callbackFunction) {
  setTimeout(() => {
     let data = { firstMenu: "구독" };
     callbackFunction(data);
     return data;
   }, 5000);
}

let menu;
menu = fetchMenu(function (result)) {
  console.log("5초 뒤 실행", result);
  menu = result;
  console.log("출력 결과: ", menu);
});

 

 

4. 콜백 함수의 단점과 Promise가 필요한 이유

 

- 콜백 함수의 단점: 에러 처리가 번거로움, 콜백헬

   → Promise 가 필요

 

- Promise: 자바스크립트 비동기 처리에 사용되는 객체

 

 

5. 프로미스 문법 안내

 

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

// fetchMenu가 Promise 객체여야만 then, catch가 유효하게 동작

 

function fetchMenu(callbackFunction) {
  //resolve : 성공했을 때 반환해줄 값, reject: 실패했을 때 반환해줄 값
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
     let data = { firstMenu: "구독" };
     
     resolve(data);
     
     if(error) {
       return reject(error);
     }
   }, 5000);
 });
}

 

 

6. async await 문법 소개

 

- async, await: 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법

 

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

 

 

7. async await 코드 변환