자판기

🔍 진행방식

미션은 기능 요구사항, 프로그래밍 요구사항, 과제 진행 요구사항 세 가지로 구성되어 있다.
세 개의 요구사항을 만족하기 위해 노력한다. 특히 기능을 구현하기 전에 기능 목록을 만들고, 기능 단위로 커밋 하는 방식으로 진행한다.
기능 요구사항에 기재되지 않은 내용은 스스로 판단하여 구현한다.

🎯 기능 요구 사항

반환되는 동전이 최소한이 되는 자판기를 구현한다.

1) 공통

상단에 탭메뉴가 존재하며 각 탭에 따라 적절한 기능을 수행한다.

상품 관리탭은 자판기가 보유하고 있는 상품을 추가하는 기능을 수행한다.
잔돈 충전탭은 자판기가 보유할 금액을 충전하는 기능을 수행한다.
상품 구매탭은 사용자가 금액을 투입할 수 있으며, 투입한 금액에 맞춰 상품을 구매하고, 남은 금액에 대해서는 잔돈을 반환하는 기능을 수행한다.
다른 탭으로 이동했다 돌아와도 기존 탭의 상태가 유지되어야 한다.
localStorage를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.

2) 상품 관리 탭

상품 관리탭에서, 다음과 같은 규칙을 바탕으로 상품을 추가한다.

최초 상품 목록은 비워진 상태이다.
상품명, 가격, 수량을 입력해 상품을 추가할 수 있다.
- 상품 가격은 100원부터 시작하며, 10원으로 나누어 떨어져야 한다.
사용자는 추가한 상품을 확인할 수 있다.

3) 잔돈 충전 탭 (자판기 보유 동전)

잔돈 충전 탭에서, 다음과 같은 규칙으로 자판기 보유 금액을 충전한다.

잔돈 충전 탭에서 최초 자판기가 보유한 금액은 0원이며, 각 동전의 개수는 0개이다.
잔돈 충전 입력 요소에 충전할 금액을 입력한 후, 충전하기 버튼을 눌러 자판기 보유 금액을 충전할 수 있다.
- 자판기 보유 금액은 {금액}원 형식으로 나타낸다.
자판기 보유 금액만큼의 동전이 무작위로 생성된다.
- 동전의 개수는 {개수}개 형식으로 나타낸다.
자판기 보유 금액을 누적하여 충전할 수 있다. 추가 충전 금액만큼의 동전이 무작위로 생성되어 기존 동전들에 더해진다.

4) 상품 구매 탭

상품 구매탭에서, 다음과 같은 규칙을 바탕으로 금액을 충전하고, 상품을 구매하며, 잔돈을 반환한다.

상품 구매 페이지에서 최초 충전 금액은 0원이며, 반환된 각 동전의 개수는 0개이다.
사용자는 투입할 금액 입력 요소에 투입 금액을 입력한 후, 투입하기버튼을 이용하여 금액을 투입한다.
- 금액은 10원으로 나누어 떨어지는 금액만 투입할 수 있다.
- 자판기가 보유한 금액은 {금액}원 형식으로 나타낸다.
금액은 누적으로 투입할 수 있다.
사용자는 반환하기 버튼을 통해 잔돈을 반환 받을 수 있다.

상품 구매 > 잔돈 계산 모듈

상품 구매 탭에서 잔돈 반환 시 다음과 같은 규칙을 통해 잔돈을 반환한다.

잔돈을 돌려줄 때는 현재 보유한 최소 개수의 동전으로 잔돈을 돌려준다.
지폐를 잔돈으로 반환하는 경우는 없다고 가정한다.
잔돈을 반환할 수 없는 경우 잔돈으로 반환할 수 있는 금액만 반환한다.
동전의 개수를 나타내는 정보는 {개수}개 형식으로 나타낸다.

💻 실행 결과 예시

상품 관리

잔돈 충전

상품 구매 및 잔돈 반환

✅ 프로그래밍 요구 사항

DOM 선택자

각 요소에 아래와 같은 선택자를 반드시 지정한다.

탭 메뉴 버튼

상품 구매 탭으로 이동하는 메뉴 버튼 id는 product-purchase-menu이다.
잔돈 충전탭으로 이동하는 메뉴 버튼 id는 vending-machine-manage-menu이다.
상품 관리탭으로 이동하는 메뉴 버튼 id는 product-add-menu이다.

상품 관리(추가) 메뉴

상품 추가 입력 폼의 상품명 입력 요소의 id는 product-name-input이다.
상품 추가 입력 폼의 상품 가격 입력 요소의 id는 product-price-input이다.
상품 추가 입력 폼의 수량 입력 요소의 id는 product-quantity-input이다.
상품 추가하기 버튼 요소의 id는 product-add-button이다.
추가한 각 상품 요소의 class명은 product-manage-item이며, 하위에 아래 요소들을 갖는다.
- 상품명에 해당하는 요소의 class명은 product-manage-name이다.
- 가격에 해당하는 요소의 class명은 product-manage-price이다.
- 수량에 해당하는 요소의 class명은 product-manage-quantity이다.

잔돈 충전 (자판기 보유 동전) 메뉴

자판기가 보유할 금액을 충전할 요소의 id는 vending-machine-charge-input이다.
충전하기 버튼에 해당하는 요소의 id는 vending-machine-charge-button이다.
충전된 금액을 확인하는 요소의 id는 vending-machine-charge-amount 이다.
보유한 각 동전의 개수에 해당하는 요소의 id는 다음과 같다.
- 500원: vending-machine-coin-500-quantity
- 100원: vending-machine-coin-100-quantity
- 50원: vending-machine-coin-50-quantity
- 10원: vending-machine-coin-10-quantity

상품 구매 메뉴

투입 금액 입력 요소의 id는 charge-input이다.
투입하기 버튼 요소의 id는 charge-button이다.
투입한 금액을 확인하는 요소의 id는 charge-amount이다.
반환하기 버튼 요소의 id는 coin-return-button이다.
반환된 각 동전의 개수에 해당하는 요소의 id는 다음과 같다.
- 500원: coin-500-quantity
- 100원: coin-100-quantity
- 50원: coin-50-quantity
- 10원: coin-10-quantity
각 상품 요소의 class명은 product-purchase-item이고, 하위에 아래 요소들을 갖는다.
- 구매 버튼에 해당하는 요소의 class명은 purchase-button이다.
- 상품명에 해당하는 요소의 class명은 product-purchase-name이다.
- 가격에 해당하는 요소의 class명은 product-purchase-price이다.
- 수량에 해당하는 요소의 class명은 product-purchase-quantity이다.
- 상품명은 dataset 속성을 사용하고 data-product-name 형식으로 저장한다.
- 가격은 dataset 속성을 사용하고 data-product-price 형식으로 저장한다.
- 수량은 dataset 속성을 사용하고 data-product-quantity 형식으로 저장한다.

라이브러리

잔돈을 무작위로 생성하는 기능은 MissionUtils 라이브러리의 Random.pickNumberInList를 사용해 구한다.
- MissionUtils 라이브러리 스크립트는 index.html에 이미 포함되어 전역 객체에 추가되어 있으므로, 따로 import 하지 않아도 구현 코드 어디에서든 사용할 수 있다.

공통 요구사항

스크립트 추가 외에 주어진 index.html파일은 수정할 수 없다.
- 스타일(css)은 채점 요소가 아니다.
모든 예외 발생 상황은 alert메서드를 이용하여 처리한다.
외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
자바스크립트 코드 컨벤션을 지키면서 프로그래밍 한다. 정답이 없으므로, 다양한 컨벤션을 비교해보며 스스로 더 적절해보이는 컨벤션을 자율적으로 선택한다.
indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용한다.
- 예를 들어 while문 안에 if문이 있으면 들여쓰기는 2이다.
- 힌트: indent(인덴트, 들여쓰기) depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 된다.
함수(또는 메소드)가 한 가지 일만 하도록 최대한 작게 만들어라.
변수 선언시 var 를 사용하지 않는다. const 와 let 을 사용한다.
- const
- let
import 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import
함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.
- 함수(또는 메소드)가 한 가지 일만 잘 하도록 구현한다.

📝 과제 진행 요구사항

미션은 javascript-vendingmachine-precourse 저장소를 Fork/Clone해 시작한다.
기능을 구현하기 전에 javascript-vendingmachine-precourse/docs/README.md 파일에 구현할 기능 목록을 정리해 추가한다.
Git의 커밋 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가한다.
- AngularJS Commit Message Conventions 참고해 commit log를 남긴다.
과제 진행 및 제출 방법은 프리코스 과제 제출 문서 를 참고한다.

✉️ 미션 제출 방법

미션 구현을 완료한 후 GitHub을 통해 제출해야 한다.
- GitHub을 활용한 제출 방법은 프리코스 과제 제출 문서 를 참고해 제출한다.
GitHub에 미션을 제출한 후 우아한테크코스 지원 플랫폼 에 접속하여 프리코스 과제를 제출한다.
- 자세한 방법은 링크 를 참고한다.
- Pull Request만 보내고, 지원 플랫폼에서 과제를 제출하지 않으면 최종 제출하지 않은 것으로 처리되니 주의한다.

🚨 과제 제출 전 체크리스트 - 0점 방지를 위한 주의사항

요구사항에 명시된 출력값 형식을 지키지 않을 경우 기능 구현을 모두 정상적으로 했더라도 0점으로 처리된다.
기능 구현을 완료한 뒤 아래 가이드에 따라 테스트를 실행했을 때 모든 테스트가 성공하는 지 확인한다. 테스트가 실패할 경우 0점으로 처리되므로, 반드시 확인 후 제출한다.

✔️ 테스트 실행 가이드

테스트 실행에 필요한 패키지 설치를 위해 Node.js 버전 14 이상이 필요하다.
다음 명령어를 입력해 패키지를 설치한다.

// {폴더 경로}/javascript-vendingmachine-precourse/ 에서
npm install

설치가 완료되었다면, 다음 명령어를 입력해 테스트를 실행한다.

// {폴더 경로}/javascript-vendingmachine-precourse/ 에서
npm run test

아래와 같은 화면이 나오며 모든 테스트가 pass한다면 성공!

euijinkk / javascript-vendingmachine-precourse Goto Github PK

javascript-vendingmachine-precourse's Introduction

자판기