재고검색사이트의 View 구조

본 사이트의 View구조, 즉 Html 맵핑구조는 간단하게 3가지 정도로만 나뉘어져있다.

  • 최초의 Index 페이지
  • 검색 선택 페이지 (Select)
  • 최종 검색 결과 페이지 (Result)

View.py 사진 첨부

selse.png

1. Index 페이지

최초의 Index 페이지에서는 이용자가 검색하고자 하는 책의 정보를 입력받는 곳이다.

해당 페이지는 딱히 프로그래밍적 기능적인 부분은 들어가있지 않기에, 단순한 HTML코딩으로만 이루어져있다.

Index 페이지의 View단 코드(위) 및 Html 코드(아래)

view.png

index h.png

해당 페이지에서 사용자가 입력한 텍스트 정보를 Post 방식으로 Select 페이지에 넘겨준다. 정보를 넘겨주는 것 이외의 기능은 전혀 없다.

2. Select 페이지

Select 페이지의 View단 코드와 Html 코드 일부

select view.png

selec html.png

Select페이지는 Index페이지에서 이용자가 검색한 단어를 받아와 네이버 API측으로 넘겨준다. 최초 로직은 단순하게 네이버 Book 포탈사이트에서 직접 검색을 한 뒤 가장 연관순위가 높은 책 5권의 해당하는 데이터를 크롤링하여 정보를 넘겨주는 것이었지만, 서비스의 속도개선을 위해 네이버 Book API를 끌어다 쓰기로했다.

해당 페이지는 2개의 분기점으로 갈라지는데, 이용자가 입력한 단어에 연관되는 책이 한권도 존재하지 않을 경우 반환하게 되는 Error 페이지와 정상적으로 책을 받아왔을때 반환하는 기본 Select 페이지로 나뉘어진다.

네이버 API에서 받아온 데이터는 딕션 컨테이너로 구성되어있으며, 본 사이트에서 실질적으로 필요한 데이터들은 딕션 안 특정 Key의 Values값으로 들어가있다. 해당 Values값 역시 딕션 자료형이며(딕션 안의 딕션) 우리는 해당 Values 값에서 책의 제목, 작가, 출판사, 이미지, 가격, isbn에 해당하는 정보만을 뽑아와 Select 페이지의 Html에 랜더링 해주었다.

특히 isbn 데이터는 이후 Result 페이지로 연결해주는 요청 파라미터 데이터로 사용했다. 재고검색 버튼에 해당 isbn 데이터를 연결하여 해당 버튼을 클릭했을때 선택한 책에 대한 재고 Result 페이지로 연결되는 구조이다.(post 요청으로 연결)

데이터 가공의 흐름도

구조도.png

3. Result 페이지

Result 페이지는 검색한 책에 관한 전국 교보문고 점포의 재고정보를 크롤링해서 보여준다. (아직 영풍문고와 반디앤루니스의 재고정보는 추가하지 않았음)

Select 페이지에서 받아온 Isbn 데이터를 이용해서 해당하는 각 서점의 링크에 접속하고 재고정보를 크롤링해오는 로직으로 구성되어있다. 책에 관한 재고정보와 Select 페이지에서 가져온 책에 대한 세부적 내용은 임시 DB에 저장되고, 해당 DB 데이터는 Result 페이지에서 랜더링 된다.(재고테이블과 점포 윈포윈도우에 데이터의 내용이 렌더링)

Result 페이지를 작성하면서 고민했던 부분은