Nodejs에서의 타입스크립트 2 - 자바스크립트 + Express로 커피 주문 앱 개발하기

조금은 짧은 이론 학습과 함께 실습을 진행해 보겠다. 이번에는 커피 주문 앱을 개발하는 실습이다. 이론 수업은 짧지만 실습 영상이 굉장히 길다.

---

 

 

 

 

 

이론 2 - 자바스크립트 + Express로 커피 주문 앱 개발하기

 

 

 

 

---

 

 

 

 

실습 1 - 자바스크립트 + Express로 커피 주문 앱 개발하기

 

---

 

 

 

코드를 위에서 아래로 실행하면 앱과 라우터가 순서대로 등록된다.

---

 

 

CoffeeMenuService.js

---

 

 

먼저 addCoffeeMenu부터 작성해본다. 만든 메뉴를 다른 곳에서 사용할 수 있도록 인스턴스화한다. 이를 싱글톤 패턴이라고 한다.

 

 

실행하면 지금은 실패 메시지가 뜬다.

---

 

 

 

OrderService.js

---

 

 

커피 메뉴를 만들어서 만약 없다면 에러 메시지를 출력하는 코드를 작성한다.

 

 

하지만 이 부분에서 name을 사용할 수 없다고 한다.

 

name 변수는 이미 함수 매개변수로 정의되어 있어서 중복 정의되지 않는다. 그래서 name 변수에 밑줄이 쳐져 있지 않아야 야 한다. 이 부분을 수정해 보았다. 강의 영상에서는 이처럼 문제가 발생하지 않았는데 말이다.

그런 다음에 아래 코드도 작성했다.

---

 

 

추가 작성 : 오류 수정

 

잘못 작성한 부분이 있어서 코드를 수정했다. 그래서 선생님과 코드가 달라 오류가 발생한 것 같다.

---

 

 

 

menuRouter.js

 

라우터에서 응답하는 코드를 작성한다.

 

 

 

이 코드도 강의 영상과는 다르게 작성했다. 

 

 

 

 

실행해보면 orderRouter만 실패하고 다른 것은 성공했음을 알 수 있다. 이제 이 코드도 작성해 보겠다.

---

 

 

추가 작성 : 코드 수정

 

이 코드도 이처럼 수정하고 다시 실행했다.

 

 

 

메뉴에 대해서는 통과되었다.

---

 

 

 

 

orderRouter.js

---

 

 

 

 

 

 

 

추가 작성 : 오류 수정

 

 

 

코드를 아주 많이 수정했는데도 잘 안되었다. 그래도 코드를 다시 한번 수정해 보았다.

---

 

 

 

코드 수정하기

OrderService.js에서 코드를 이처럼 수정했다.

 

오류가 발생하는 이유는 ${} 문자열 템플릿 리터럴에서 변수를 사용할 때, 변수명이 잘못된 것 같다.

 

 

 

아무리 수정해도 오류는 끝없이 발생했다. 선생님이 코드와 너무나도 달라서 도저히 수정이 불가능하다. 그냥 이해도 못하는 코드 여기서 작성을 끝마치려고 한다.

---

 

 

 

 

코드 다시 실행 결과

 

 

오류가 떠서 이 부분을 다시 수정해보았다. '/orders' 라우터에서는 '주문 내역이 없습니다'라는 메시지를 기대했지만, 실제로는 비어있는 배열인 "[]"가 반환되고 있었다. 주문 내역이 없을 때 적절한 메시지를 반환하도록 코드를 수정해야 할 것 같다.

 

 

 

이 코드를 수정하자 orderRouter는 이제 통과되었다. 그리고 제출을 해보았다.

 

 

 

드디어 다 맞았다.

---

 

 

 

 

학습을 마치고

실습 문제가 너무 어렵기도 하고 강의에서 알려주는 코드와도 달라서 결국 제출이 잘 안 되는 것이 마음이 걸린다. 하지만 지금 내 실력에서 이 문제를 푼다는 건 거의 불가능에 가까웠다.

12월까지만 엘리스 수업을 들을 수 있어 속도를 내서 공부를 하겠지만 너무 어려운 문제는 그냥 넘어가야겠다. 이 실습 문제 하나를 푸는데 1시간 반이나 걸렸다. 이 시간이면 다른 학습을 몇 개를 더 할 수 있는데 말이다.

 

실습 문제 정말 어려운 것을 풀고 나자 이 문제도 왠지 다시 하면 할 수 있겠다는 생각이 들어 30분 넘게 투자해서 완성했다. 이제 100점이 나와서 정말 기쁘다.