- 내일배움캠프 사전팀과제 6일차 목차
(23/3/8 내일배움캠프 사전팀과제 6일차)
[오늘 한일]
- 상세페이지 리뷰 추가하기
- 상세페이지 리뷰 불러오기
오늘은 리뷰부분을 작업했다.
[오늘 배운점]
- 리뷰 추가하기는 금방이였다.
백엔드에선 POST기능 API하나를 만들고, 두번째 DB를 지정했다.
(DB에 대해서는 2일차에 미리 구상해놨었기 때문에 수월했다.)
프론트에선 아이디, 별점, 리뷰를 넘겨주는 함수를 등록하기 버튼으로 작동하면 된다.
리뷰를 리스팅할때 해당 페이지에서는 해당 맛집 리뷰만 보여줘야 한다.
그래서 DB를 조회할때 맛집명으로 필터링해서 불러올것을 구상했고,
그렇다면 리뷰가 작성될때 부터 맛집명이 이름표로 붙어와야 한다.
여기에서 활용한게 어제 작업일지 마지막 줄에 있는 부분이다.
shop을 그대로 가져와서, 추가할때 같이 보내주게 했다.
그러면 실제 DB에는 데이터가 4개씩.
즉 알짜데이터 3개와 구분용데이터 1개가 저장된다.
상세페이지를 불러오고 작성하는 API에 이미 맛집명이 구분자로 활용되고 있으니,
리뷰를 불러올때도 그 구분자를 그대로 사용하면된다.
즉 두번째 DB에도 같은 구분자로 필터링한 데이터를 불러오는것이다.
이렇게 백엔드 기능과 요소를 간결하게 디자인할수 있었다.
- 그런데, 이렇게 불러온 리뷰리스트는 여러개의 데이터이다.
그래서 이 데이터는 html에 바로 작성하지 않고 함수로 리스팅을 해줘야 한다.
(개수만큼 작성되야 하기에 함수를 쓰는건 불가결하다)
이때 난관이 있었는데,
이 데이터가 json형태여서 자바스크립트에서 딕셔너리로 인식하지 못했다.
그냥 변수에 담을 경우 하나의 긴 데이터로 인식했다.
한참 알아본 끝에,
let reviewlist = JSON.parse('{{ data1 | tojson}}');
이렇게 작성하여 참조할수 있었다.
먼저 data1을 json파일인걸로 인식해야하고,
변수에 담을때 json형태를 벗겨내어 안에있는 순수한 딕셔너리를 담는다.
전자를 하지 않는다면 파일 형식 오류가 나오고,
후자를 하지 않으면 데이터가 통짜로 인식되며 맨앞과끝에 대괄호가 남아있다.
(대괄호는 DB에서 뽑을때부터 붙어있다.)
이방법으로 data1을 이용해 리뷰리스팅을 하는 함수를 만들었다.