과제하기 24.11.28.목 Class / Promise 이해하고 활용하기

728x90

오늘의 목표!
Class / Promise 이해하고 활용하기

프로미스는 완벽하게 이해하자

Class: 게임 캐릭터 생성기

Class는 쉽게 말해 ‘공장’, '빵틀' 같은 겁니다.
Class가 있으면 이 Class를 이용해 원하는 제품을 쉽게 반복적으로 만들어낼 수있습니다.

ex) 캐릭터 생성

// 게임 캐릭터 설계도 (클래스)
class GameCharacter {
  constructor(name, level) {
    this.name = name; // 캐릭터 이름
    this.level = level; // 캐릭터 레벨
    this.health = 100; // 기본 체력
  }

  // 캐릭터 상태 표시
  showStatus() {
    console.log(
      `이름: ${this.name}, 레벨: ${this.level}, 체력: ${this.health}`
    );
  }

  // 체력 회복 메서드
  heal(amount) {
    this.health += amount;
    console.log(`${this.name}의 체력이 ${amount}만큼 회복되었습니다.`);
  }
}

// 캐릭터 생성 (객체 만들기)
const hero = new GameCharacter('용사', 1);
const mage = new GameCharacter('마법사', 5);

// 캐릭터 상태 보기
hero.showStatus(); // 이름: 용사, 레벨: 1, 체력: 100
mage.showStatus(); // 이름: 마법사, 레벨: 5, 체력: 100

// 체력 회복
hero.heal(20); // 용사의 체력이 20만큼 회복되었습니다.
hero.showStatus(); // 이름: 용사, 레벨: 1, 체력: 120

Step 1: Class 만들기 - 메이플 스토리 게임 캐릭터

기본적으로 캐릭터를 새로 만들때마다 게임 내부에서는 캐릭터 생성기를 Class를 이용해 구현합니다

// 게임 캐릭터 설계도 (클래스)
class GameCharacter {
  constructor(name, str, dex, int, luk) {
    this.name = name; // 캐릭터 이름
    this.str = str;
    this.dex = dex;
    this.int = int;
    this.luk = luk;
  }
}

이 class를 이용해 캐릭터를 생성. 여기서 생성한 캐릭터를 ‘객체’나 '인스턴스'라고 부름

class 넣는 값에 따라 성질이 조금 씩 다른 객체를 찍어냄.

// 게임 캐릭터 설계도 (클래스)
class GameCharacter {
  constructor(name, str, dex, int, luk) { // 인수를 다르게 주어 서로 다른 성질의 캐릭터 만들기. 
    this.name = name; // 캐릭터 이름
    this.str = str;
    this.dex = dex;
    this.int = int;
    this.luk = luk;
  }
}

const myCharaceter = new GameCharacter("내 캐릭터", 10, 10, 10, 10);
const yourCharaceter = new GameCharacter("내 캐릭터", 10, 10, 10, 10);

내 캐릭터의 이름이나 체력 등을 확인하고 싶으면?

// 게임 캐릭터 설계도 (클래스)
class GameCharacter {
  constructor(name, str, dex, int, luk) {
    this.name = name; // 캐릭터 이름
    this.str = str;
    this.dex = dex;
    this.int = int;
    this.luk = luk;
  }
}

const myCharaceter = new GameCharacter("내 캐릭터", 10, 10, 10, 10);
const yourCharaceter = new GameCharacter("내 캐릭터", 10, 10, 10, 10);

conosle.log(myCharaceter.name);
conosle.log(myCharaceter.str);
conosle.log(myCharaceter.dex);
conosle.log(myCharaceter.int);
conosle.log(myCharaceter.luk);

Step 2: method 란?

method(방법) - 공격이나 방어같은 비슷하게 반복되는 캐릭터를 조작? 행동을 캐릭터 클래스에 넣어 필요할 때 마다 불러옴.
‘공격’ method를 만들기

// 게임 캐릭터 설계도 (클래스)
class GameCharacter {
  constructor(name, str, dex, int, luk) {
    this.name = name; // 캐릭터 이름
    this.str = str;
    this.dex = dex;
    this.int = int;
    this.luk = luk;
  }
  
  attack() {
    console.log(`${this.str}의 힘으로 공격합니다!`);
  }
}

공격을 하면 0부터 str x 10 사이에서 공격력이 결정된다

// 게임 캐릭터 설계도 (클래스)
class GameCharacter {
  constructor(name, str, dex, int, luk) {
    this.name = name; // 캐릭터 이름
    this.str = str;
    this.dex = dex;
    this.int = int;
    this.luk = luk;
  }
  
  attack() {
    console.log(`${this.str}의 힘으로 공격합니다!`);
  }
}

const myCharacter = new GameCharaceter("지구인", 10, 10, 10, 10);
myCharaceter.attack();

공격력 랜덤

// 게임 캐릭터 설계도 (클래스)
class GameCharacter {
    constructor(name, str, dex, int, luk) {
        this.name = name; // 캐릭터 이름
        this.str = str;
        this.dex = dex;
        this.int = int;
        this.luk = luk;
    }

    attack() {
        const randomNumber = Math.random();
        const damage = randomNumber * (this.str * 10);
        // Math.floor : 소수점 아래 버림
        console.log(`${Math.floor(damage)}의 힘으로 공격합니다!`);
    }
}

// 캐릭터 생성 및 공격 테스트
const myCharacter = new GameCharacter("지구인", 10, 10, 10, 10);
myCharacter.attack();

Step 3: method 활용하기 - 레벨업
레벨업을 한다면 str, dex, int, luk을 1씩 추가해준다고 가정

class GameCharacter {
    constructor(name, str, dex, int, luk) {
        this.name = name; // 캐릭터 이름
        this.str = str;
        this.dex = dex;
        this.int = int;
        this.luk = luk;
        this.level = 1; // 초기 레벨
        this.experience = 0; // 초기 경험치
    }

    attack() {
        const randomNumber = Math.random(); // 0~1 사이 랜덤 수
        const damage = randomNumber * (this.str * 10);
        console.log(`${damage.toFixed(2)}의 피해를 입힙니다!`);
    }

    levelUp() {
        const experienceRequired = this.level * 200; // 레벨 당 필요 경험치
        if (this.experience >= experienceRequired) {
            this.experience -= experienceRequired; // 경험치 차감
            this.level++; // 레벨 증가
            this.str++;
            this.dex++;
            this.int++;
            this.luk++;
            console.log(`레벨업 완료! 현재 레벨: ${this.level}`);
        }
    }

    gainExperience(amount) {
        this.experience += amount; // 경험치 증가
        console.log(
            `${amount} 경험치를 획득하였습니다. 현재 경험치: ${this.experience}`
        );
    }
}

const myCharacter = new GameCharacter("지구인", 10, 10, 10, 10);

// 경험치 획득 및 레벨업 예시
myCharacter.gainExperience(500); // 500 경험치 획득

myCharacter.gainExperience(500); // 500 경험치 획득

myCharacter.gainExperience(500); // 500 경험치 획득

myCharacter.gainExperience(500); // 500 경험치 획득
myCharacter.levelUp(); // 레벨업 시도

Promise: 약속

Promise는 기본적으로 ‘약속’이라고 생각하기

ex)
Promise = “엄마가 저녁 7시에 치킨을 사 올게!”
이 약속에는 3가지 상태가 있어요.
Pending (대기): 엄마가 치킨집에서 치킨을 사오시길 기다리고 있음.
Fulfilled (이행): 엄마가 치킨을 사 오심.
Rejected (실패): 치킨집이 문을 닫아서 치킨을 못사옴.

.then : 약속 이행 처리. resolve에 들어 있던 값이 들어감

.catch : 약속 불이행(에러 방지) 처리. reject에 넣었던 값이 들어감

message : resolve에 들어 있던 값이 들어감. 같다X 연결된 거임

error : reject에 넣었던 값이 들어감. 같다X 연결된 거임

입구 resolve 출구 .then

입구 reject 출구 .catch

// 치킨 약속 (Promise)
const buyChicken = new Promise((resolve, reject) => {
  const isChickenShopOpen = true; // 치킨집이 열려 있는지 여부

  if (isChickenShopOpen) {
    resolve('치킨을 사 왔습니다!'); // 성공
  } else {
    reject('치킨집이 닫혀 있습니다.'); // 실패
  }
});

// 약속 처리하기
buyChicken
  .then((message) => {
    console.log(message); // 성공 메시지 출력: "치킨을 사 왔습니다!"
  })
  .catch((error) => {
    console.log(error); // 실패 메시지 출력: "치킨집이 닫혀 있습니다."
  });

Promise 이해하기
새로운 약속을 만들기 - ‘약속’ Class를 이용

const newPromise = new Promise()

약속 객체를 만들기 위한 조건 : resolve, reject 라는 인자를 사용할 수 있는 콜백 함수를 넣어줘야 함.

function callback(resolve, reject) {}

새로운 약속 만드는 코드

// resolve, reject 둘다 콜백함수
function callback(resolve, reject) {}

const newPromise = new Promise(callback)

화살표 함수로 바꾸기

보통은 화살표 함수를 사용하고, 콜백 함수를 따로 정의하기 보다는 class 안에 넣어 사용합니다.

const newPromise = new Promise((resolve, reject) => {})

약속 성공 : resolve 안에 어떤 값을 넣기
약속 실패 : reject 안에 값을 넣기.

// 치킨 약속 (Promise)
const buyChicken = new Promise((resolve, reject) => {
  const isChickenShopOpen = true; // 치킨집이 열려 있는지 여부

  if (isChickenShopOpen) {
    resolve('치킨을 사 왔습니다!'); // 성공
  } else {
    reject('치킨집이 닫혀 있습니다.'); // 실패
  }
});

자, 이제 이 약속결과에 따른 처리
then은 “약속을 지키면~”
catch는 “약속을 못지키면~”

// 치킨 약속 (Promise)
const buyChicken = new Promise((resolve, reject) => {
  const isChickenShopOpen = true; // 치킨집이 열려 있는지 여부

  if (isChickenShopOpen) {
    resolve('치킨을 사 왔습니다!'); // 성공
  } else {
    reject('치킨집이 닫혀 있습니다.'); // 실패
  }
});

// 약속 처리하기
buyChicken
  .then((message) => {
    console.log(message); // 성공 메시지 출력: "치킨을 사 왔습니다!"
  })
  .catch((error) => {
    console.log(error); // 실패 메시지 출력: "치킨집이 닫혀 있습니다."
  });

.then : 약속 이행 처리. resolve에 들어 있던 값이 들어감

.catch : 약속 불이행(에러 방지) 처리. reject에 넣었던 값이 들어감

message : resolve에 들어 있던 값이 들어감. 같다X 연결된 거임

error : reject에 넣었던 값이 들어감. 같다X 연결된 거임

입구 resolve 출구 .then

입구 reject 출구 .catch

Promise의 실전 사용

기본적으로 Promise는 미래의 약속에 대해 사용.
지금 바로 결과를 알 수 있는 것에 대해서는 굳이 약속을 할 필요가 없음

ex) 게임 보상

게임에서 어떤 퀘스트를 수행하고 보물 상자를 받았다고 해볼게요.
그 보물 상자는 ‘열기’ 버튼을 클릭하고 2초 후에 열린다는 ‘약속’
우선 기본 틀을 만들어볼게요.

const openBox() = new Promise((resolve, reject) => {
// setTimeout 2초가 2000
  setTimeout(() => {
		...
  }, 2000); // 2초 후에 결과 공개
});

그리고 50%의 확률로 상자를 열 수 있다고 가정
resolve, reject를 사용하기

const openBox() = new Promise((resolve, reject) => {
  setTimeout(() => {
		const success = Math.random() > 0.5;
		if (success) {
			resolve("성공");
		} else {
			reject("실패");
		}
  }, 2000); // 2초 후에 결과 공개
});

결과처리는 then, catch를 사용.

const openBox() = new Promise((resolve, reject) => {
  setTimeout(() => {
		const success = Math.random() > 0.5;
		if (success) {
			resolve("성공");
		} else {
			reject("실패");
		}
  }, 2000); // 2초 후에 결과 공개
});

// 보물 상자 열기 실행
openBox()
  .then((message) => {
    console.log(message); // 성공 메시지
  })
  .catch((error) => {
    console.log(error); // 실패 메시지
  });

이해하려들지 말고 그냥 외워서 쓰세요...

조별 학습

비동기 함수의 필요성

비동기 함수는 다른 일을 하다가 응답이 왔을 때(callback) 돌아오라는 의미.

서버는 비동기가 없을까?

레이턴시가 최소한으로 걸리도록

레이턴시(처리 대기시간)

게임서버는 여러명의 플레이어의 reqest를 처리할 때 비동기가 필수.

DB서버도 비동기적 처리

콜백헬 탈출하기

db를 사용하려면 비동기적 처리가 필요하지만 조회 결과로 계정->캐릭터정보->아이템을 조회할 때 동기적 처리가 필요함.

해결을 위해 async/await 사용

숙제

Class: RPG 게임 캐릭터 만들기

과제 내용:
1. RPG 게임에서 사용할 캐릭터 클래스를 설계하세요.

class Character {
   
}

2. 캐릭터 클래스는 아래 조건을 만족해야 합니다:
캐릭터의 이름, 레벨, 체력, 공격력 속성을 가질 것.

class Character {
    constructor(name, level, health, power) {
        this.name = name;
        this.level = 0;
        this.health = health;
        this.power = power;
    }
}

attack 메서드를 구현하여, 호출 시 “<캐릭터 이름>가 공격을 시도합니다!“를 출력할 것.

class Character {
    // attack 메서드를 구현하여, 호출 시 “<캐릭터 이름>가 공격을 시도합니다!“를 출력할 것.
    attack(){
        console.log(`${name}가 공격을 시도합니다!`)
    }
}

heal 메서드를 구현하여, 호출 시 체력이 회복되고 “(이름)의 체력이 Y만큼 회복되었습니다.“를 출력할 것.

class Character {
    // heal 메서드를 구현하여, 호출 시 체력이 회복되고 “(이름)의 체력이 (Y)만큼 회복되었습니다.“를 출력할 것.
    heal(Y){
        this.health += Y
        console.log(`${this.name}의 체력이 ${Y}만큼 회복되었습니다.`)
    }
}

levelUp 메서드를 구현하여 레벨업을 하면 렌덤으로 체력, 공격력을 추가해줄 것.

class Character {
...
    levelUP() {
        let random = Math.floor(Math.random() * 100);
        this.health += random;
        this.power += random;
    }
}

3. 설계한 클래스를 사용하여 3명의 캐릭터 객체를 만드세요.

// (name, level, health, power)
const calyCharacter = new Character("Caly", 1, 100, 30);
const malisaCharacter = new Character("Malisa", 1, 100, 30);
const julCharacter = new Character("Jul", 1, 100, 30);

4. 각 캐릭터 객체에서 attack과 heal 메서드를 실행해 보세요.

// Class: RPG 게임 캐릭터 만들기
// 과제 내용:
// 1. RPG 게임에서 사용할 캐릭터 클래스를 설계하세요.
// 2. 캐릭터 클래스는 아래 조건을 만족해야 합니다:
class Character {
    //  캐릭터의 이름, 레벨, 체력, 공격력 속성을 가질 것.
    constructor(name, health, power) {
        this.name = name;
        this.level = 1;
        this.health = health;
        this.power = power;
    }

    // attack 메서드를 구현하여, 호출 시 “<캐릭터 이름>가 공격을 시도합니다!“를 출력할 것.
    attack() {
        console.log(`${this.name}가 공격을 시도합니다!`);
    }

    // heal 메서드를 구현하여, 호출 시 체력이 회복되고 “(이름)의 체력이 (Y)만큼 회복되었습니다.“를 출력할 것.
    heal(Y) {
        this.health += Y;
        console.log(`${this.name}의 체력이 ${Y}만큼 회복되었습니다.`);
    }

    // levelUp 메서드를 구현하여 레벨업을 하면 렌덤으로 체력, 공격력을 추가해줄 것.
    levelUP() {
        this.level++;
        const randomUp = Math.floor(Math.random() * 100);
        this.health += randomUp;
        this.power += randomUp;
    }
}

// 3. 설계한 클래스를 사용하여 3명의 캐릭터 객체를 만드세요.
// (name, level, health, power)
const calyCharacter = new Character("Caly", 100, 30);
const malisaCharacter = new Character("Malisa", 100, 30);
const julCharacter = new Character("Jul", 100, 30);

// 4. 각 캐릭터 객체에서 attack과 heal 메서드를 실행해 보세요.
calyCharacter.heal(100); // Caly의 체력이 100만큼 회복되었습니다.
malisaCharacter.attack(); // Malisa가 공격을 시도합니다!

// 레벡 2  jul의 체력 : 138, 공격력 : 68

console.log(`레벨 ${julCharacter.level} jul의 체력 : ${julCharacter.health}, 공격력 : ${julCharacter.power}`);
// 레벨 1 jul의 체력 : 100, 공격력 : 30

julCharacter.levelUP();
console.log(`레벡 ${julCharacter.level} jul의 체력 : ${julCharacter.health}, 공격력 : ${julCharacter.power}`);
// 레벡 2  jul의 체력 : 138, 공격력 : 68

Promise: 보물 찾고 열어보기

Promise : intertace Promise<T> var Promise: PeomoseConstructor Represents the completion of an asyncjronus operation

Promise : 인터페이스 Pronise<T> var Promise: PeomoseConstructor 비동기 작업의 완료를 나타냅니다.

과제 내용:
1. 보물 상자를 여는 Promise 함수를 만들어보세요.
2. 함수는 다음 조건을 만족해야 합니다:
함수 이름은 findTreasure로 합니다.

3초 동안 보물을 찾는 작업을 시뮬레이션합니다.

10% 확률로 성공 또는 90%확률로 실패가 발생합니다

성공(resolve) 시 “축하합니다! 황금 보물을 발견했습니다!” 메시지를 반환.
실패(reject) 시 “보물을 찾는 데 실패했습니다. 다시 시도하세요.” 메시지를 반환.
3. findTreasure를 호출한 뒤 .then()과 .catch()를 사용하여 성공과 실패 메시지를 출력하세요.
4. then, catch를 try/catch, async/await로 변경해보기. (이 부분은 스스로 공부해보세요!)

then/catch

과제 내용:
1. 보물 상자를 여는 Promise 함수를 만들어보세요.

2. 함수는 다음 조건을 만족해야 합니다:
함수 이름은 findTreasure로 합니다.

function findTreasure() {
    return new Promise((resolve, reject) => {
    });
}

3초 동안 보물을 찾는 작업을 시뮬레이션합니다.

function findTreasure() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
        }, 3000); // 3초 대기
    });
}

10% 확률로 성공 또는 90%확률로 실패가 발생합니다

const chance = Math.random(); // 0 ~ 1 사이의 랜덤 값 생성
   if (chance <= 0.1) {
   } else {
   }

성공(resolve) 시 “축하합니다! 황금 보물을 발견했습니다!” 메시지를 반환.
실패(reject) 시 “보물을 찾는 데 실패했습니다. 다시 시도하세요.” 메시지를 반환.

const chance = Math.random(); // 0 ~ 1 사이의 랜덤 값 생성
   if (chance <= 0.1) {
      // 성공 확률 10%
      resolve("축하합니다! 황금 보물을 발견했습니다!");
   } else {
      // 실패 확률 90%
      reject("보물을 찾는 데 실패했습니다. 다시 시도하세요.");
}

3. findTreasure를 호출한 뒤 .then 과 .catch 를 사용하여 성공과 실패 메시지를 출력하세요.

findTreasure()
    .then((message) => {
        console.log(message); // 성공 메시지 출력
    })
    .catch((error) => {
        console.error(error); // 실패 메시지 출력
    });

전체 코드

// Promise: 보물 찾고 열어보기
// 과제 내용:

//1. 보물 상자를 여는 Promise 함수를 만들어보세요.
//2. 함수는 다음 조건을 만족해야 합니다:
//       함수 이름은 findTreasure로 합니다.
function findTreasure() {
    return new Promise((resolve, reject) => {
        //  3초 동안 보물을 찾는 작업을 시뮬레이션합니다.
        setTimeout(() => {

            //  10% 확률로 성공 또는 90%확률로 실패가 발생합니다
            const isSuccess = Math.random() < 0.1;
            if (isSuccess) {
                // 성공 확률 10%
                //  성공(resolve) 시 “축하합니다! 황금 보물을 발견했습니다!” 메시지를 반환.
                resolve("축하합니다! 황금 보물을 발견했습니다!");
            } else {
                // 실패 확률 90%
                //  실패(reject) 시 “보물을 찾는 데 실패했습니다. 다시 시도하세요.” 메시지를 반환.
                reject("보물을 찾는 데 실패했습니다. 다시 시도하세요.");
            }
        }, 3000); // 3초 대기
    });
}

// 3. findTreasure를 호출한 뒤 .then 과 .catch 를 사용하여 성공과 실패 메시지를 출력하세요.
findTreasure()
    .then((message) => {
        console.log(message); // 성공 메시지 출력
    })
    .catch((error) => {
        console.error(error); // 실패 메시지 출력
    });

try/catch

과제 내용:
1. 보물 상자를 여는 Promise 함수를 만들어보세요.

2. 함수는 다음 조건을 만족해야 합니다:
함수 이름은 findTreasure로 합니다.

function findTreasure() {
    return new Promise((resolve, reject) => {        
    });
}

3초 동안 보물을 찾는 작업을 시뮬레이션합니다.

function findTreasure() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
        }, 3000); // 3초 대기
    });
}

10% 확률로 성공 또는 90%확률로 실패가 발생합니다

const isSuccess = Math.random() < 0.1;
if (isSuccess) {
} else {}

            if (isSuccess) {
                resolve("축하합니다! 황금 보물을 발견했습니다!");
            } else {
                reject("보물을 찾는 데 실패했습니다. 다시 시도하세요.");
            }

3. findTreasure를 호출한 뒤 try 과 catch 를 사용하여 성공과 실패 메시지를 출력하세요.

(async function () {
    try {
        const result = await findTreasure();
        console.log(result); // 성공 메시지 출력
    } catch (error) {
        console.log(error); // 실패 메시지 출력
    }
})();

// Promise: 보물 찾고 열어보기
// 과제 내용:
// 1. 보물 상자를 여는 Promise 함수를 만들어보세요.
// 2. 함수는 다음 조건을 만족해야 합니다:
//        함수 이름은 findTreasure로 합니다.
function findTreasure() {
    return new Promise((resolve, reject) => {
        // 3초 동안 보물을 찾는 작업을 시뮬레이션합니다.
        setTimeout(() => {
            //  10% 확률로 성공 또는 90%확률로 실패가 발생합니다
            const isSuccess = Math.random() < 0.1;

            // 성공(resolve) 시 “축하합니다! 황금 보물을 발견했습니다!” 메시지를 반환.
            if (isSuccess) {
                resolve("축하합니다! 황금 보물을 발견했습니다!");
            } else {
                // 실패(reject) 시 “보물을 찾는 데 실패했습니다. 다시 시도하세요.” 메시지를 반환.
                reject("보물을 찾는 데 실패했습니다. 다시 시도하세요.");
            }
        }, 3000); // 3초 대기
    });
}

// 3. findTreasure를 호출한 뒤 try와 .catch()를 사용하여 성공과 실패 메시지를 출력하세요
(async function () {
    try {
        const result = await findTreasure();
        console.log(result); // 성공 메시지 출력
    } catch (error) {
        console.log(error); // 실패 메시지 출력
    }
})();

async/await

과제 내용:
1. 보물 상자를 여는 Promise 함수를 만들어보세요.
2. 함수는 다음 조건을 만족해야 합니다:
함수 이름은 findTreasure로 합니다.

function findTreasure() {
    return new Promise((resolve, reject) => {
        
    });
}

3초 동안 보물을 찾는 작업을 시뮬레이션합니다.

function findTreasure() {
    return new Promise((resolve, reject) => {
        // 3초 동안 작업을 시뮬레이션
        setTimeout(() => {
            
        }, 3000); // 3초
    });
}

10% 확률로 성공 또는 90%확률로 실패가 발생합니다

function findTreasure() {
    return new Promise((resolve, reject) => {
        // 3초 동안 작업을 시뮬레이션
        setTimeout(() => {
            // 10% 확률로 성공
            const isSuccess = Math.random() < 0.1;
            if (isSuccess) {
                resolve("축하합니다! 황금 보물을 발견했습니다!");
            } else {
                reject("보물을 찾는 데 실패했습니다. 다시 시도하세요.");
            }
        }, 3000); // 3초
    });
}

async function openTreasureBox() {
    try {
        const result = await findTreasure();
        console.log(result);  // 성공 시 메시지 출력
    } catch (error) {
        console.log(error);  // 실패 시 메시지 출력
    }
}

3. findTreasure를 호출한 뒤 async과 await 를 사용하여 성공과 실패 메시지를 출력하세요.

openTreasureBox(); // 함수 호출

코드 전체

// Promise: 보물 찾고 열어보기
// 과제 내용:
// 1. 보물 상자를 여는 Promise 함수를 만들어보세요.
// 2. 함수는 다음 조건을 만족해야 합니다:
//        함수 이름은 findTreasure로 합니다.
function findTreasure() {
    return new Promise((resolve, reject) => {
        // 3초 동안 작업을 시뮬레이션
        setTimeout(() => {
            // 10% 확률로 성공 또는 90%확률로 실패가 발생합니다
            const isSuccess = Math.random() < 0.1;

            if (isSuccess) {
                resolve("축하합니다! 황금 보물을 발견했습니다!");
            } else {
                reject("보물을 찾는 데 실패했습니다. 다시 시도하세요.");
            }
        }, 3000); // 3초
    });
}

// 3. findTreasure를 호출한 뒤 async와 await를 사용하여 성공과 실패 메시지를 출력하세요.
async function openTreasureBox() {
    try {
        const result = await findTreasure();
        console.log(result); // 성공 시 메시지 출력
    } catch (error) {
        console.log(error); // 실패 시 메시지 출력
    }
}

// 4. then, catch를 try/catch, async/await로 변경해보기. (이 부분은 스스로 공부해보세요!)
openTreasureBox(); // 함수 호출

※ 요약

◆ class, promis 둘다 빵틀.

◆ Promise = 약속
약속의 3가지 상태
Pending (대기)
Fulfilled (이행)
Rejected (실패)

.then : 약속 이행 처리. resolve에 들어 있던 값이 들어감

.catch : 약속 불이행(에러 방지) 처리. reject에 넣었던 값이 들어감

message : resolve에 들어 있던 값이 들어감. 같다X 연결된 거임

error : reject에 넣었던 값이 들어감. 같다X 연결된 거임

입구 resolve 출구 .then

입구 reject 출구 .catch

※ 기억할 것

◆ class에서는 변수, 함수 선언 시 let이나 funtion을 사용하지 않고 이름만 바로 적습니다.

// 게임 캐릭터 설계도 (클래스)
class GameCharacter {
  constructor(name, str, dex, int, luk) {
    this.name = name; // 캐릭터 이름
    this.str = str;
    this.dex = dex;
    this.int = int;
    this.luk = luk;
  }
}

◆ Promise

// 치킨 약속 (Promise)
const buyChicken = new Promise((resolve, reject) => {
  const isChickenShopOpen = true; // 치킨집이 열려 있는지 여부

  if (isChickenShopOpen) {
    resolve('치킨을 사 왔습니다!'); // 성공
  } else {
    reject('치킨집이 닫혀 있습니다.'); // 실패
  }
});

// 약속 처리하기
buyChicken
  .then((message) => {
    console.log(message); // 성공 메시지 출력: "치킨을 사 왔습니다!"
  })
  .catch((error) => {
    console.log(error); // 실패 메시지 출력: "치킨집이 닫혀 있습니다."
  });

◆ 비동기 함수는 다른 일을 하다가 응답이 왔을 때(callback) 돌아오라는 의미.

저작자표시

'내일배움캠프_게임서버(202410) > 분반 수업 Basic-A' 카테고리의 다른 글

4주차 Express, Restful API - 숙제중 (2)	2024.12.05
베이직 241203 화 - 숙제 해설 (0)	2024.12.03
241126 화 (0)	2024.11.26
콜백함수_241119목 (0)	2024.11.21
해설_241119화 (0)	2024.11.19

Strobus

과제하기 24.11.28.목 Class / Promise 이해하고 활용하기

Class: 게임 캐릭터 생성기

Promise: 약속

Promise의 실전 사용

조별 학습

비동기 함수의 필요성

서버는 비동기가 없을까?

콜백헬 탈출하기

숙제

Class: RPG 게임 캐릭터 만들기

Promise: 보물 찾고 열어보기

then/catch

try/catch

async/await

※ 요약

※ 기억할 것

'내일배움캠프_게임서버(202410) > 분반 수업 Basic-A' 카테고리의 다른 글

티스토리툴바

과제하기 24.11.28.목 Class / Promise 이해하고 활용하기

Class: 게임 캐릭터 생성기

Promise: 약속

Promise의 실전 사용

조별 학습

비동기 함수의 필요성

서버는 비동기가 없을까?

콜백헬 탈출하기

숙제

Class: RPG 게임 캐릭터 만들기

Promise: 보물 찾고 열어보기

then/catch

try/catch

async/await

※ 요약

※ 기억할 것

'내일배움캠프_게임서버(202410) > 분반 수업 Basic-A' 카테고리의 다른 글

관련글

티스토리툴바