[한국의 Goodreads 개발하기] Day 2. 메인 화면 개발

오후 3시 38분 정도부터 시작했는데 밥먹고 나왔다가 뭐 확인하려고 하다가 페이지를 나가버려서 다 날라가버렸다.

 

일단 오늘은 react-id-swiper를 사용해서 그 슥슥 넘어가는거 구현하려고 했는데 잘 안되고 있다.

 

next, typescript 조합이 라이브러라 뭐 적용하기가 힘든거 같다.

 

좀 더 찾아보고 마무리 해봐야겠다.

 

오후 7시 11분

 

그냥 내가 CSS를 안넣어서 그런게 아닌지 강한 의심이 든다.

 

next.config.js 파일을 아래와 같이 바꾸었다.

const withSass = require("@zeit/next-sass");
const withCss = require("@zeit/next-css");

module.exports = withCss(withSass());

 

문제는 params의 coverflow의 타입 문제인것 같은데 저거 coverflow를 설정했는데도 저렇게 나온다. 왜그러냐..

 

Type '{ children: Element[]; effect: string; grabCursor: boolean; centeredSlides: boolean; slidesPerView: number; coverflowEffect: { rotate: number; stretch: number; depth: number; modifier: number; slideShadows: boolean; }; pagination: { ...; }; }' is not assignable to type 'ReactIdSwiperProps'.
  Types of property 'effect' are incompatible.
    Type 'string' is not assignable to type '"coverflow" | "slide" | "fade" | "cube" | "flip" | undefined'.

 

오후 8시 35분

그냥 타입을 못불러와서 해당 컴포넌트를 tsx 말고 jsx로 바꾸었다. 왜안되는거여 진짜. 시간될때 확인해보자 여기서 시간을 너무끌었네

jsx 하니까 잘 된다.

 

오후 8시 45분

 

알라단 책 추천 list api를 받기 위해 

http://blog.aladin.co.kr/m/openapi/5353304

[OpenAPI님의 서재] "책과 통하는 블로그, 알라딘 서재!"

이 블로그를 참조했는데 TTB 무슨 사이트를 가입하라고 해서 일단 가입하고 메일까지 보내놓은 상태다. 이거 기다리는 동안 mock 데이터로 메인 화면을 개발해야 겠다.

 

오후 9시 33분

 

개발한 swiper 메인화면에 적용함.

아까 날라갔던 것 중에 next/link 컴포넌트는 내부 pages router에만 적용하는거고 이걸 외부 주소 넣으면 오류가 발생한다. 외부로 가는거는 그냥 a 태그에 href 써서 하면 된다.

 

커밋까지 완료함. 오늘은 여기까지.

 

내일은 책 소개 페이지를 만들자!