[2024 여름방학 React.js 스터디] 김민서 #2주차

import, export

 

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

export { 변수, 함수 };
// 다른 파일에서 가져다 쓸 변수나 함수

import { 변수, 함수 } from '파일경로';
// 익스포트된 변수나 함수를 불러옴

 

 

export default

 

파일에서 하나를 꺼낼 때 사용

export default 변수나 함수;

import 변수나 함수 from '파일경로';

 

 

import와 export를 이용한 라이브러리 사용

 

import 라이브러리 이름 또는 기능 from "라이브러리 이름";
// package.json에 설치되어 있는 라이브러리 이름을 그대로 사용한다

 

 

비동기 처리

 

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

// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

// 1 => 3 => 2

 

 

콜백 함수

 

데이터가 준비된 시점에만 원하는 동작을 수행할 수 있음

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);
});
// 콜백 함수를 이용한 비동기 코드 처리

 

 

콜백 지옥

 

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

 

 

promise

 

비동기 처리에 사용되는 객체, 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용

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

let menu;

//프로미스 문법
fetchMenu() // promise 객체여야만 유효하게 동작한다
  .then(function (result) {
    console.log("5초 뒤 실행" , result);
    menu = result;
  })
  .catch(function (error) {
    console.log("에러 처리");
    return;
  });

 

 

async, await

 

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

async function init() {
  let menu;
  menu = await fetchMenu(); //객체가 반환되는 API나 함수여야지만 await를 붙일 수 있다
  console.log("출력 결과 : ", menu);
}

 

 

async, await 에러 처리

 

async function init() {
  try{
    let menu;
    menu = await fetchMenu(); 
    await renderPageUI();
    console.log("출력 결과 : ", menu);
  } catch (error) {
    console.log("에러 처리");
  }
}