yesl-kim / itbook-store Goto Github PK

• 현재 api에서 받아오는 페이지별 데이터의 개수는 10개
• | 연산을 사용하여 검색한 경우 20개의 데이터가 렌더됨 (두 반환값이 합쳐진 형태)
• 렌더최적화를 위해 한 번에 렌더하는 데이터의 개수를 지정할 수 있도록 수정

• '|' 연산시 두 반환값이 그대로 합쳐지기 때문에 순서가 지켜지지 않음
• test 검색 후 test | js 검색시 test 결과 뒤에 바로 js 결과가 이어붙음 -> 실제 겸색이 다시 되었는지 알기 어려움

기대사항

• 두 결과가 합쳐지거나 상쇄될 때 정렬이 되기를 기대 (제목 기준)

• 서적 리스트 중 선택된 서적의 상세 정보를 보여준다.
• JSON으로 받은 데이터 중 다음 프로퍼티를 필수로 화면에 보여주어야한다.

{
	"title":"MongoDB in Action, 2nd Edition",
	"subtitle":"Covers MongoDB version 3.0",
	"authors":"Kyle Banker, Peter Bakkum, Shaun Verch, Douglas Garrett, Tim Hawkins",
	"publisher":"Manning",
	"pages":"480",
	"rating":"4",
	"desc":"MongoDB in Action, 2nd Edition is a completely revised and updated version. It introduces MongoDB 3.0 and the document-oriented database model. This perfectly paced book gives you both the big picture you'll need as a developer and enough low-level detail to satisfy system engineers.MongoDB in ...",
	"price":"$19.99",
	"image":"https://itbook.store/img/books/9781617291609.png",
}

프로젝트 내의 상수 관리

• naviagate 경로
• fetch HOST
• 쿼리 파라미터의 key

• 테이블 데이터 맵핑

Description

• 특정 키워드를 입력받을 수 있도록 한다.
• 키워드는 최대 2개이고 ‘or’ 와 ‘not’ operator로 구분된다.
  • ‘or(|)’ operator는 각각의 키워드로 검색한 결과를 합쳐서 보여준다. (e.g. ‘tdd|javascript’ : tdd로 검색한 결과와 jvascript으로 검색한 결과를 합쳐서 보여준다.)
  • ‘not(-)’ operator는 앞의 키워드가 제목에 포함된 서적을 검색하되 뒤의 키워드가 포함되지
    않은 서적들을 보여준다. (e.g. ‘tdd-javascript’ : tdd가 제목에 포함된 서적을 검색하되
    javascript라는 키워드를 가지고 있는 서적은 제외한다.)

Tasks

• 유효성 검사
• 검색 요청

component

• Search component
• book-list component
• book-card component

util function

• lib/search-books
• parser

page

• home
• book list
• book detail

• 로딩 처리
• 모든 목록을 다 가져왔을 경우 (마지막 페이지)

• 검색어 없이 도서목록 화면에 진입한 경우 (ex. 홈 화면을 거치지 않고 주소창을 통해 바로 들어온 경우) 홈 화면으로 리다이렉트

• 검색 전 초기 화면
• 검색 후 도서목록 출력: 다음 프로퍼티를 필수로 화면에 보여주어야한다.

{
    "title": "MongoDB in Action, 2nd Edition",
    "subtitle": "Covers MongoDB version 3.0",
    "image": "https://itbook.store/img/books/9781617291609.png",
    "url": "https://itbook.store/books/9781617291609"
}

• 도서 목록이 없을 경우 (검색결과가 없는 경우)
• 로딩: 스켈레톤
• 에러