🍉🍊🍋🍍🍏🍒🍎 음료 자판기 벤딩머신 구현 도전
벤딩머신 - HTML/CSS
목표 : 최대한 예시와 똑같은 화면으로 보이도록 한다
위의 화면처럼 HTML / CSS 구현해보기
👉 구현 해본 벤딩머신 화면
요구사항 명세
- 판매할 음료에 대한 데이터는 따로 분리되어 있어야 합니다. (혹은 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();
인스턴스는 클래스를 통해 생성된 객체,
클래스의 프로퍼티 이름과 메소드를 갖는 객체이다
new
를 붙여서 생성()
괄호를 붙인다constructor
에서 필요한 정보를 인자로 넘겨줄수 있다)instance
를 colaGenerator
라는 변수에 저장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
키워드를 적절하게 사용하면 사용자 경험을 향상시키는데 도움이 된다
여기까지 시작점이 되는 엔트리 파일을 살펴보았다 다음은 본격적으로
음료 데이터를 가져올수 있는 ColaGenerator 클래스를 살펴보자