내일배움캠프 사전팀과제 5일차
(23/3/7 사전팀과제 5일차)
[오늘 한일]
- 메인페이지 맛집 불러오기
- 상세페이지 해당맛집 불러오기
오늘 한일은 정보를 불러와서 페이지를 작성하는 기능이였다.
[오늘 배운점]
- 메인페이지 불러오기는 역시나 알고있는(배운) 부분이여서 금방할 수 있었다.
백엔드에서는 맛집리스트DB에 있는 전체 정보를 불러와서 넘겨주면되고,
프론트에서는 리스팅으로 메인에 작성하는 함수를 만들고 페이지가 켜질때 함수가 동작하면 된다.
작성되는 이미지와 제목은 곧 상세페이지로 이동하는 기능이 되는 부분이기도 하다.
그래서 작성될 때 해당 맛집을 지칭할수 있는 구분자가 필요했는데,
나는 맛집이름 자체를 구분자로 이용하기로 했다.
똑같은 이름의 맛집을 넣지만 않으면 이름이 고유한 값이 될수 있다.
(별도 Id값을 쓰지 않은건 최대한 간결하게 기능과 요소를 구상하려 했기때문이다.)
다만 상세페이지를 작성하는 기능이 아주 난관이였다.
상세페이지로 이동하는 동시에 DB를 불러와 페이지 작성이 되야 하는데,
메인에서 쓸수 있는 하위 URL은 하나이다.
즉 하나의 API로 두가지를 해야한다.
페이지 별로 내용이 달라야 하니 '/하위URL/구분값'을 써야하는 건 명확하다.
그럼 이 구분값을 이용해 DB를 조회하면서,
html페이지와 db데이터를 같이 넘길수 있는 방법이 무엇일까.
답은이렇다.
render_template로 페이지를 넘기며 data라는 변수에 db데이터를 함께 넘긴다.
그리고 html에서는 {{data}} 이렇게 받으면 된다.
이미 데이터를 받았으니 페이지 작성할때는 별도로 불러오지 않고 바로 데이터를 작성한다.
그리고 이렇게 작성된 내용을 자바스크립트에서 다시 참조해야 한다고 하면
이렇게 두가지 방법이 있다.