벤딩머신 - 데이터를 가져오기 전.. entry 과정 (instance,async,await)

wldls·2023년 5월 2일

CSS JavaScript html

javascript

목록 보기

29/33

🍉🍊🍋🍍🍏🍒🍎 음료 자판기 벤딩머신 구현 도전

벤딩머신 - HTML/CSS

목표 : 최대한 예시와 똑같은 화면으로 보이도록 한다

위의 화면처럼 HTML / CSS 구현해보기
👉 구현 해본 벤딩머신 화면

벤딩머신 - JavaScript

요구사항 명세

판매할 음료에 대한 데이터는 따로 분리되어 있어야 합니다. (혹은 API로 받아야 합니다.)

돈의 입금과 음료의 선택 시점은 자유롭지만 돈이 모자라면 음료가 나와서는 안됩니다.

거스름돈이 나와야 합니다.

버튼을 누르면 상품이 1개씩 추가됩니다. (일반적인 자판기와 동일)

.
.
.

그런데, 판매할 음료부터 데이터를 어떻게 가져오는지?

먼저 데이터를 가져오기 전 그러한 역할을 하는 클래스의 파일을 가져올 수 있도록 프로젝트의 진입점을 담당하는 엔트리 파일이 있어야한다

해당 판매할 음료 데이터를 가져와 화면에 만드는 작업을 하는 ColaGenerator 클래스는
엔트리 파일인 index.js가 실행될 때 즉시 실행되는
import 구문과 new 키워드로 생성한 instance 구문을 통해 ColaGenerator 클래스를 실행시키게 된다

엔트리..? 인스턴스..? 무엇일까 ? 🤔

❓ 엔트리(entry) ❓
엔트리 파일은 웹팩을 사용하는 프로젝트에서 웹팩이 프로젝트를 빌드할 때 시작점이 되는 파일이다
엔트리 파일에서 시작하여 웹팩은 의존성 그래프를 만들어가며 프로젝트의 모든 파일들을 가져온다
일반적으로 엔트리 파일은 프로젝트의 진입점을 담당한다

"entry"란 일반적으로 웹팩(Webpack)이나 Parcel과 같은 모듈 번들러에서 사용되는 용어이다
엔트리(entry)는 번들링 작업을 시작할 파일을 가리킨다
이 파일에서 애플리케이션의 모든 다른 모듈과 종속성을 로드하고 웹팩은 이 파일을 시작으로 모든 종속성을 찾아서 하나의 번들 파일로 묶는다

예를들어

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: '/dist'
  }
}

위처럼 파일에서 entry는 ./src/index.js라는 파일을 가리킨다
이 파일이 웹팩의 진입점이 되고, 웹팩은 이 파일과 해당하는 모든 종속성을 찾아서 bundle.js라는 파일로 묶어서 /dist 디렉토리에 저장한다

💡 인스턴스(instance) 💡


const colaGenerator = new ColaGenerator();

인스턴스는 클래스를 통해 생성된 객체,
클래스의 프로퍼티 이름과 메소드를 갖는 객체이다

인스턴스는 Class 이름에 new를 붙여서 생성
클래스 이름 옆에 () 괄호를 붙인다
(내부에는 constructor 에서 필요한 정보를 인자로 넘겨줄수 있다)
ColaGenerator 클래스의 instance를 colaGenerator라는 변수에 저장
이처럼 ColaGenerator 클래스의 새로운 instance를 생성하려면
new 키워드가 필요하다 new 키워드는 constructor() 메서드를 호출하고 새로운 instance를 리턴해준다

인스턴스가 생성되면 ColaGenerator 클래스의 생성자 함수(constructor)가 실행된다
-> 이때 생성된 객체가 ColaGenerator 클래스의 인스턴스이다



class ColaGenerator {
	// 선언된 ColaGenerator 클래스는 콜라 제조에 필요한 정보를 가져오고
	// 해당 정보를 사용하여 HTML에 콜라를 만드는 역할을 한다
    
  constructor() {
    this.itemList = document.querySelector('.section1 .cola-list');
  }
}

생성자 함수(constructor)는 객체를 생성할 때 실행되며, 인스턴스에 할당될 변수를 초기화하거나,
DOM 요소를 찾아서 인스턴스에 할당하는 등의 작업을 수행 ->
인스턴스를 사용할 준비 완료 😉 하게 된다

그렇구나..

완료 되면 다음 단계는❓


await colaGenerator.setup();

이제 colaGenerator 객체의 데이터를 가져오는 메서드를 통해
비동기적으로 실행하여 데이터를 가져온다

왜 await 를 쓰는지 ❓
작업자에게 어떤 장점이 있는지 ❓

colaGenerator.setup()은 비동기 함수이기 때문에 await 키워드를 사용하여
해당 함수가 완료될 때까지 기다린 다음 다음 코드를 실행하게 된다
그리고 작업이 끝나면 해당 결과를 반환하게 되는데 이로 인해

비동기 작업을 처리할 때 코드를 보다 간결하고 직관적으로 작성할 수있다
동기적으로 보이기 때문에 비동기 코드를 작성할 때 발생할 수 있는 콜백 헬(callback hell)과 같은 문제를 예방할 수 있다
await를 사용하면 Promise 객체를 반환하는 함수의 결과를 쉽게 처리할 수있다
즉, await는 코드를 보다 간결하고 가독성 있게 작성할 수 있도록 도와주는 기능이다

`await`는 `async` 함수 내부에서만 사용할 수 있다

간단한 예제를 살펴보자


async function foo() {
  const result = await Promise.resolve('안녕하세요 여러분😘');
  console.log(result);
}

foo();

이 코드는 "안녕하세요 여러분😘" 문자열을 반환하는 함수이다
async 함수 foo를 정의하고, await 키워드를 사용하여
Promise.resolve() 메서드의 결과를 기다린다

하지만 아래 코드에서는 async가 보이지 않는다


await colaGenerator.setup();

-> colaGenerator.setup()이 Promise를 반환하는 함수이기 때문에
해당 함수의 반환 값을 변수에 저장하거나 함수 호출 결과에 직접 await를 사용할 수도 있다
이 텍스트를 클릭해 promise, async, await 이전 글도 참고 해주세요 ! 😉

이러한 특징으로 사용자 에게는 어떠한 장점이 있을까 ❓

사용자가 어플리케이션을 사용할 때 애플리케이션이 반응이 빨리 일어날 수록
사용자 경험이 좋아진다

await 키워드를 사용하여 비동기 처리를 하면 처리가 완료될 때까지
대기하지 않고 다른 작업을 수행할 수 있다
-> 이는 곧 애플리케이션의 반응성을 높이고, 사용자가 대기하는 시간을 줄여줄 수 있다는 것 ❗

await 키워드를 적절하게 사용하면 사용자 경험을 향상시키는데 도움이 된다