[2024 여름방학 React.js 스터디] #2주차 '모듈화와 비동기처리'

08. 모듈화 구문

08- 1 Import & Export

 - 자바스크립트의 코드를 모듈화 할 수 있는 기능

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

 

1. Export & Import 기본 문법

//math.js
let pi = 3.14;

export {pi};

//index.js
import {pi} from "./math";  //math라는 파일에서 pi라는 변수를 꺼냄

console.log(pi);

 

 

2. 여러개 꺼내기

- 파일 안에서 선택적으로(개수에 상관없이) 꺼내 쓸 수 있음

//math.js
let pi = 3.14;

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

export {pi, sum};

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

console.log(sum(10, 20);

 

 

3. export default

- 파일에서 한가지 변수만 꺼낼 때 사용

- import받는 방식이 기본문법과 다름

//app.js
let message = 'hi';

export default message;

//index.js

import {pi, sum} from "./math"; //기본 문법

import message from"./app";  //export default 사용 문법

console.log(message)

 

4. import를 활용한 라이브러리 사용법

//import 라이브러리이름 from "라이브러리 이름";
import lodashLibrary from "lodash"; //lodash라는 라이브러리 가져오기

console.log(lodashLibrary, VERSION);  //lodash에서 사용 가능한 API, 버전 출력

 

 

09. 비동기처리

 

09-1 비동기처리란?

- 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성

 

09-2 비동기 처리 코드 예시

- 2번이 끝나는 것을 기다리지않고 3번을 실행함 (비동기 처리)

// 1.사용자 정보 요청
fetchUser();  //0.1초

// 2.좌측 메뉴 정보 요청
let menu;
fetchMenuInfo(fucntion (response){
	menu = response;
});  //1시간

// 3.영상 본문 요청
fetchContents(); //1초

 

 

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

- setTimeout : 지정한 시간 이후에 코드를 실행 (5000 = 5초)

- 콜백함수의 특징 : 익명함수를 선언하여 함수의 파라미터로 전달 후 호출 가능

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

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

 

 

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

1. 에러처리가 번거로움

2. 콜백헬로 들어갔을때 중첩되는 경우 발생 (콜백헬 : 콜백이 연속적으로 들어가 있는 것)

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

let menu;


fetchMenu(function(error, result){
	if(error) {
    	console.log("에러처리");
        return;
    }
    
    console.log("5초 뒤 실행", result);
    menu = result;
    
    console.log("출력 결과 : ", menu);
    
    renderPageUI(function (error, response) {
    	response;
        menu;
    });
});

↑콜백함수를 사용할때 에러처리방법 (코드 분기가 많아질수록 훨씬 복잡해짐)

 

 

09-5 프로미스 문법 안내

- 성공했을 때의 결과(then)와 실패했을 때 결과(catch)를 명시적으로 구분해서 쓸 수 있음

- 여러가지 함수를 연결(체이닝)해서 사용 가능

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;
    });
});

 

 

09-6 async & await 문법

- 자바스크립트 비동기 처리 패턴

- 코드의 순서대로 동작

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

init();

 

 

09-7 async & await 코드 변환

1. 기본 문법

- 함수의 앞에 async 예약어

- 비동기 처리 코드 앞에 await

async function 함수명() {
    await 비동기_처리_메서드명();
}

 

2. 프로미스로 작성한 코드 변환

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

// async & await 사용
async function init() {
    let menu;
    menu = await fetchMenu();
    console.log("5초 뒤 실행", menu);
}

let menu;

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

 

 

09-8 async & await 예외 처리

- try catch : async & await에서의  예외 처리 방법

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

// async & await 사용
async function init() {
    try {
        let menu;
        menu = await fetchMenu();
        await renderPageUI();
        console.log("5초 뒤 실행", menu);
    } catch (error) {
        console.log("에러처리");
    }
}

let menu;

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

---

자료영상 : https://www.inflearn.com/course/amazing-javascript-%EC%9E%85%EB%AC%B8 

[지금 무료] Amazing JavaScript - 입문 강의 | 장기효(캡틴판교) - 인프런