React book search page 1

리액트.. 우리는 오래오래 함께 할 거야..

노마드 리액트 영화 웹 만들기 강의를 통해 리액트를 접하게 된다. 단박에 이해되는 공부 내용이 아니므로 두어번 더 듣고 강의를 토대로 코드를 작성하며 나름 다른 것들도 추가해서 나만의! 라고는 조금 부끄러운 프로젝트 하나를 완성했다.

그 쯤 API의 매력을 느낀다. 다른 API 사용이 마구마구 하고 싶어졌다. 처음으로 도전한 건 음악API었는데 이건 우회를 하고 어쩌고 하는 바람에 처참하게 실패하고 mock.json 파일을 만들어 배열 리스트까지 뽑아냈지만.. 우선 패스.

도서 API를 따온 건, 어쩌면 당연했는데 내가 책에 관심이 많아서 그렇다! 원래는 독서기록장을 만들고 싶었는데 이것도 다음으로 미루고.. 우선은 교보문고, 알라딘, 밀리의 서재, 리디북스 등등의 플랫폼을 뒤져보고 책을 검색하는 페이지를 넣어서 리액트 프로젝트를 시작하게 된다!

구글이 없었다면.. 정말 영영 못 해냈을지도 모른다..

페이지 전환이 되는 Home, Join, Login, Search 페이지는 routes로, 나머지는 Component로 만들었다.

디자인이라고 하기엔 애석한 디자인을 끼얹어 어쨌든 프로젝트 완성 -!

1. header

영화웹 과 다를 바가 없다. 비슷하게 구성했다. div 안에 flex를 사용해 레이아웃을 잡았다. book app 과 서치, 회원가입, 로그인 폼을 space-between으로 잡았는데 양 쪽 margin이 정확하게 가운데로 잡히기 않아서 한 쪽에만 margin을 살짝 더 준 점이 아쉽다. 홈-서치 버튼 클릭 후 페이지 넘어 갈 때는 괜찮은데 회원가입-로그인 페이지로 넘어 갈 때는 맞지 않는다 ^_ㅜ...

그리고 제작노트를 쓰면서 생각해보니
header 부분을 nav로 만들었으면 좋았을 뻔했다. 요즘 페이지들은 모두 상단 네비바가 고정된 상태로 스크롤과 같이 내려오는데 내가 그것까지 챙기지 못해서 아쉽다. 이건 다음에 보완할 것이다!

2. img-Slide

이미지 슬라이드 부분은 밀리의 서재에서 따왔다. 그냥 메인 화면 캡쳐해서 포토샵으로 작업했다. 아니 정말 저렇게 쓱쓱 넘어가는 부분이 나의 허접한 디자인을 조금이라도 보완해 줄 것 같아서 도전했다. 방법은 별 다르게 생각나지 않아서 CSS 애니메이션을 사용했다.

repeat-x 를 통해 가로방향으로만 흐르게 만들고, 후루룩 후루룩 너무 빠르게 지나가서 100000ms 설정했다.

3. 카카오 API

네이버 API와 고민하다 카카오를 땄는데 이유는.. 이게 더 쉬워서 그랬고 예제들이 많아서 나같은 허저비가 찾아가며 하기에 수월했다. 이런 접근성 면에서 카카오가 정말 잘해둔 것 같았다. 이걸 따고 다음 번엔 지도API도 도전해보고 싶을 정도로!

API를 사용하기 위해서 axios 를 프로젝트 내에 설치했다.

axios?

xios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리다. 다시 말해, 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. 이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할땐 axios를 쓰는 편이라고 보면 된다.

$ npm install axios

* 기본문법

axios({
url: 'https://test/api/cafe/list/today', // 통신할 웹문서
method: '', // 통신할 방식
data: { // 인자로 보낼 데이터
foo: 'diary'
}
});

4. 도서 불러오기

useState를 사용해 목록을 생성하고 useEffect를 사용해 책 목을 받아올 함수를 만들었다. 여기서 async-await 비동기 함수를 사용해 도서 api의 결과값을 얻을 때까지 잠시의 시간을 부여하도록 패치했다.

const Bestseller = () => {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    getBooks();
  }, []);

  const getBooks = async () => {
    const params = {
      query: "민음사",
      sort: "recency",
      size: "10",
      target: "",
    };

    const {
      data: { documents },
    } = await bookSearch(params);
    setBooks(documents);
  };

query에 민음사만 넣은이유.. 는 여러가지가 되지 않아서. 모든 출판사의 베스트셀러를 구하고 싶었는데 실패했다. 검색도 실패했다.

{books.map((book, index) => (
          <Books
            key={index}
            author={book.authors}
            title={book.title}
            image={book.thumbnail}
          />

위에서 받아 온 함수는 map 배열 메서드를 통하여 호출한 뒤, 값이 할당 된 배열의 인덱스에 대해서만 호출하도록 했다.