[자바스크립트 심화 과정] 실력 확인 테스트 2 : 문제 4번

마지막 문제는 실습 문제라서 코드가 정말 길이서 따로 이 문제를 풀기로 했다. 아직 실습 문제를 혼자서 풀 수 있는 실력은 되지 않아서 자료를 찾아보면서 풀었다.

---

 
 
 
 

테스트 문제 풀기 두 번째

 

문제 4번

 

---

 
 
 

주어진 코드

 

App.js

---

 
 
 
 

index.html

---

 
 
 

api.js

---

 
 

CoffeeMaker.js

---

 
 
 

store.js

---

 
 
 
 

코드 분석하기

 

CoffeeMaker.js

1. CoffeeMaker 함수
   • 클로저로 상태와 API를 제어하는 함수이다.
   • 상태(state)는 초기화 후 클로저 내에서 유지되며, store.js의 update를 통해 관리된다.
   • 주요 메서드
     • prepareMachine
     • grindBean
     • brewPowder
     • getCoffee
     • addBean
     • getState
2. 핵심 메서드
   • prepareMachine : 머신을 준비하고 API를 호출
   • grindBean : 커피 원두를 갈아서 파우더로 변환
   • brewPowder : 파우더를 사용하여 커피를 만듦
   • getCoffee : 1잔의 커피를 반환
   • addBean : 커피 원두를 추가
   • getState : 현재 상태를 반환

---

 
 
 

store.js

1. 상태 관리
   • CoffeeMaker의 상태를 정의하고 액션에 따라 상태를 업데이트한다.
   • update 함수는 action.type에 따라 적절히 상태를 변경한다
2. 구현되지 않은 부분
   • grindBean, addBeans, brewPowder, getCoffee 케이스를 작성해야 한다.

---

 
 
 

api.js

1. 비동기 API 구현
   • 머신 준비, 원두 갈기, 커피 파우더 추출 등 비동기 작업을 각각 구현한다.
   • Promise와 setTimeout을 통해 각각의 작업을 일정 시간 동안 대기시킨 후 완료된다
2. 상세 동작
   • prepareMachine : 머신 준비에 필요한 시간(MACHINE_PREPARE_TIME) 후 완료
   • grindBean : 원두를 가는 작업(GRIND_TIME) 후 완료
   • brewPowder : 커피 파우더를 추출하는 작업(BREW_TIME) 후 완료

---

 
 
 

App.js

1. CoffeeMaker와 DOM의 연결
   • DOM 요소와 CoffeeMaker를 연결하여 상태를 관리하고, UI를 업데이트한다.
2. 주요 버튼 기능
   • 원두 추가 버튼 (addBeanButton)
     • 입력된 양만큼 원두를 추가하고 UI를 갱신한다.
   • 커피 제조 버튼 (makeCoffeeButton)
     • prepareMachine -> grindBean -> brewPowder -> getCoffee 순서로 비동기 작업을 실행하며, 작업 완료 후 UI를 갱신한다.
   • 상태 확인 버튼 (checkStateButton)
     • 현재 상태를 JSON 형태로 표시한다.
3. 렌더링 (render 함수)
   • CoffeeMaker의 현재 상태를 읽어와 DOM에 업데이트한다.
   • 상태는 Promise를 반환하므로, 비동기 작업 체인에서 상태 갱신을 호출한다.

---

 
 
 
 

문제 풀기

 

CoffeeMaker.js

 
 
 

store.js

 

---

 
 
 

코드 실행하기

 
 

 
 

 
 
커피콩을 추가하고 상태도 확인할 수 있다.
 
 

 
답안도 잘 제출되었다.
 
 

 
 
 

---

 
 
 
 

학습을 마치고

정말 어려운 문제였는데 그래도 잘 풀어서 다행이었다. 자바스크립트 공부는 오늘까지 해서 정확히 13일을 공부했다. 그동안 공부를 포기하고 싶을 때도 정말 많았지만 끝까지 포기하지 않고 최선을 다해서 너무나도 뿌듯하고 기쁘다.
오늘 저녁에는 내가 좋아하는 영화도 보며 놀고 싶기도 하고 바로 JSP 공부를 시작하고 싶기도 하다. 어쨌든 오늘 너무나또 잘해서 내게 칭찬을 해주고 싶다.