TIL Day 75.

Django 최종 팀 프로젝트

음성 주문 기능 - 메뉴 추천

• 음성 재인식을 통해 메뉴 추천 받기: 기존 초기 화면에서 음성을 받아 메뉴로 넘어온 것과 같은 로직을 실행.
• 단지 음성 재인식을 통해 메뉴 추천을 받는 것은 처음 menu로 구분해주었던 input text를 그대로 가지고 있어야 해 로직을 조금 변경해주어야 함.

문제

1. views.py 에 orderbot()이 html의 axios.get으로 값을 가져올 때 response 를 받았어야 하는데 해당 응답 내용이 비어있었던 문제
   ⇒ orderbot()의 get 요청에서 axios가 넘겨주어야 하는 parameter 값을 확인해보니 비어있었음
   ⇒ axios에서는 콘솔 로그를 찍어보니 parameter 값을 넘겨주고 있는 것을 확인
   ⇒ 터미널에서 요청을 보내는 파라미터를 확인해 보니

• 정상작동하고 있는 aibot 의 경우

"GET /orders/orderbot/?recommended_menu=[%22%EC%95%84%EC%9D%B4%EC%8A%A4+%EC%95%84%EB%A9%94%EB%A6%AC%EC%B9%B4%EB%85%B8%22,%22%EC%95%84%EB%A9%94%EB%A6%AC%EC%B9%B4%EB%85%B8%22,%22%EC%B9%B4%ED%8E%98%EB%9D%BC%EB%96%BC%22] HTTP/1.1" 200 414

• 작동하고 있지 않은 orderbot 의 경우

"GET /orders/orderbot/?recommended_menu[]=%EC%95%84%EC%9D%B4%EC%8A%A4+%EC%95%84%EB%A9%94%EB%A6%AC%EC%B9%B4%EB%85%B8&recommended_menu[]=%EC%95%84%EB%A9%94%EB%A6%AC%EC%B9%B4%EB%85%B8&recommended_menu[]=%EC%B9%B4%ED%8E%98%EB%9D%BC%EB%96%BC HTTP/1.1" 200 1

로 넘어가는 파라미터에서 문제가 있는 것을 발견하였다.

aibot()의 파라미터는 이렇게 넘어가는 반면

orderbot()의 파라미터는 이렇게 넘어가고 있었다.

json으로 stringify, parse 하는 과정이 들어있다 보니 생긴 오류.

⇒ 따라서 axios.get 을 해줄 때 parameter를 stringify 해줌

axios.get('/orders/orderbot/', { params: { recommended_menu: JSON.stringify(recommended_menu) } })

2. popupImage is not defined 오류
   ⇒ 팝업의 이미지에 대한 오류였기 때문에 const 로 선언해준 부분을 확인
   ⇒ document.addEventListener 안에 들어있었기 때문에 const popupImage 가 로컬에서 선언 되어있어 자바스크립트 제일 앞쪽으로 빼주어 전역 변수로 설정해 해결.

이외의 문제

• 다국어 설정을 넣으면서 기존에 정상 작동하던 기능에서도 버그 발생

1. 언어 별로 전환하였을 때 메뉴가 그 나라 언어로 표현되는 데에 반해 결제하기 버튼 등 그 외의 요소들에 대해서는 그대로 한국어로 진행됨
   python manage.py compilelanguages 로 .po 로부터 .mo 파일들을 생성해주어야 적용됨
2. 윈도우에서는 LanguageCodeOut 에러가 발생하는데 이는 GNU 프로그램을 설치해주어야 함. 유닉스 운영 체제에서 발생하는 에러로 추정 (맥에서는 발생하지 않음)
3. 비고령자 템플릿에서 설정된 언어가 있는 채로 고령층 템플릿으로 이동하면 그 설정이 그대로 유지되어 ai 작동에 오류가 발생: 오늘 메뉴 추천으로는 부드러운 맛의 芒果奶昔가 정말 좋아요. 등의 답변을 줌
   ⇒ 템플릿 상단에 language 처리를 해주면 됨 (코드 추후 추가)
4. recommended_menu 리스트 안에 담겨있는 메뉴 이름으로 메뉴를 필터링해서 가져와야 하는데 가져와지지 않음.
   ⇒ print()를 찍어보니 메뉴를 이름으로 불러오지 못함: <MultilingualQuerySet[]> 오브젝트만 불러와짐.
   ⇒ 몇 개의 메뉴에 다른 외국어 칸들을 채워주니 작동이 되긴 했는데 외국어 칸을 채우지 않은 메뉴들도 잘 불러와지기 때문에 왜 해결됐는지 모름..
   <MultilingualQuerySet [<Menu: 아이스 아메리카노>]> 로 리스트에 json 형태로 해당 메뉴를 잘 불러와줌.

주요 목표

• 장바구니 데이터 저장: Redis 로 저장하기로 함
  - 리액트 튜터님과 담당 튜터님께 여쭤본 결과 브라우저에 저장하거나 쿠키에 저장도 가능하지만 redis 쪽에서 처리하는 것이 백엔드 쪽을 활용할 수 있고 강의로 배운 것도 확인할 수 있어서 이렇게 진행해보기로..