React book search page 2

쉽게 쉽게 간다 했음.. 배포까지 이틀이 걸렸다.

궁금증이 생길 때마다 검색했는데 너무너무 잘 나왔다 아무래도 내가 구현하고 싶은 방법이 흔하기(?) 때문인 것 같았다. 그렇지만 내가 해내기엔 솔직히 조금 어려웠고. 응? 엥? 하는 부분이 많아서 강의와 구글에 엄청~ 의존을 했다. 그나마 이번 프로젝트로 얻은게 있다면 hook을 쓰는 법? 을 약간? 아주 미세하게? 조금이라도? 느낌이 왔다는 것이 있겠다!

5. 장르 구별

제일 힘들었던 거. 장르 별로 구분하는 파트였다. 이걸 무조건 하고 싶어서 서치를 엄청 했다. 사실 너무너무 슬프게도 우선 코드를 따라치는 것으로 시작했다. (ㅠㅠ) 혼자서는 도저히 할 수 가 없었다!

const getBooks = useCallback(async() => {
    let params = {
      query : genres,
      size: "6",
    };
    if (genres === "어린이") {
      params = {
        query: "어린이", 
        sort: "latest", 
        size: "6"
      }
    }
    const {
      data : { documents },
    } = await bookSearch(params);
    setBooks(documents);
  }, [genres])

근데? 되짚으며 씹어 보니까 내가 강의에서 배웠던 코드에 if문만 추가된.. 그런 코드였다! 나에겐 정말 대반전인 이야기!!!! useCallback 과 그 안에서 async 를 사용하므로, useState 사용하는 것을 하나 줄일 수 있었다. (이게 아닐 수도... 사실 이렇게 생각하고 썼는데 내가 무지해서 모르는 것일수도.. 핵심이 이게 아니고 나 혼자 짜맞춰 이해한걸수도..)

6. 도서 검색창

대망의 도서검색!! 이번 프로젝트의 하이라이트라고 할 수 있다. 사실 이걸 만나지 않았더라면 아마 밋밋한 한 페이지 구성에서 벗어날 수 없었을것이다.

(1) item 목록 컴포넌트

<li>
  <dl>
   <dt>
    <img src={props.thumbnail} alt={props.thumbnail} className={'item_img'}/>
   </dt>
   <dd>
     <strong className={'item_title'}>{props.title}</strong>
  <br/><br/>
  <a href={props.url} className={'item_link'}>상세정보</a>
   </dd>
  </dl>
</li>

Search에 사용할 리스트 컴포넌트를 만든다.

(2) Search 라우츠
서치는 페이지 -> 페이지로 변경되는 부분이기 때문에 컴포넌트가 아닌 라우츠로 사용했다.

  useEffect(() => {
    if (query.length > 0) {
      bookSearchHttpHandler(query, true);
    }
  }, [query]);

핸들러 값으로 변경된 쿼리 인식과 리스트를 초기화 한 후,다시 랜더링을 할 것인지 말 것인지에 대한 여부를 만든다.

  const onEnter = e => {
    if (e.keyCode === 13) {
      setQuery(text);
    }
  };

키코드13(엔터) 사용하여, 엔터를 쳤을 때 결과값이 나오도록 한다.

7. Error

배포를 앞두고 대망의 에러를 만나고 만다.
그건 바로 No routes matched location "/" 란 에러코드를 만나게 된다. 라우츠를 찾을 수 없다는 의미인데 제대로 연결이 되어있는데 왜 안된다고 하는건지 도통 이해를 할 수 없었다. 여기서 엄청난 답답함을 느끼게 됐다. 물어볼 곳이 없다! 어디도 어느곳에도! 이래서 학원을 다니는걸까!!! 아무튼 그렇지만 나에겐 아직 구글이 있고 헤쳐나갈 수 있다고 믿었으니까. 구글에 문장을 쳐서 10페이지 까지 에러를 확인했지만 명확한 해답을 찾지 못했다. App.js 부분의 path 코드 부분을 / 빼보고 "" 빼보고 별 짓을 다 ~~ 해봤는데도 안 됐고 첫 리액트 프로젝트가 이렇게 떠내려가나 싶어서 천장 구경을 하염없이 하던 차였는데..

모든 에러 질문의 해결 제시 방법에는 기본 함수를 사용하지 않고 에로우 함수를 사용하고 있었던 것이 기억났다! 그래서 또 10페이지 다 다시 확인했다. 정말 모두가 에로우 함수를 사용하고 있었음 (ㅋㅋㅋ) 혹시나! 반신반의의 마음으로 const () => {} 으로 전부 변경했더니 그제야 제대로 뜨기 시작했다. 이걸로 이틀을 삽질했는데.. 이렇게 사소한 것에서 에러가 나다니 '0'!!!.. 기본함수(function) 사용이 아예 안되는건지 되는건지에 대해서는 명확한 답을 찾지 못했다. 그렇지만 리액터6 공식문서도 그렇고 구글의 모든 문서가 에로우 함수를 사용하고 있으니 그것이 맞지 않을....? 까? 라는 의문을 남기며.. 어쨌든 성공해버리고 말았다!!!

8. 수고하셨습니다.

처음 시작 할 때 그렸던 구상도

여기는 완성 ~ 😄
http://7uckystrike.github.io/bookSearch