[한국의 Goodreads 개발하기] Day 3. redux-saga 와 react 연동

오후 12시 31분 시작

 

어제 메일 보냈는데 알라딘 측에서 오늘 오전에 바로 메일을 확인해주셔서 Key를 발급받는 법을 알았다. 내가 추가를 해야 거기서 그 키를 인증하는 것이였다.

 

여하튼 성공적으로 알라딘 api를 사용할 수 있게 되었다. 근데 이미지 사이즈가 심각하게 작다...

 

일단 오늘 api도 사용해볼겸 redux와 redux-saga를 적용해야겠다. 물론 모두 typescript로 할것이다.

 

오후 12시 48분

 

"react-redux": "^7.1.3",

"redux": "^4.0.5",

"redux-saga": "^1.1.3",

"next-redux-wrapper": "^4.0.1",

"@types/react-redux": "^7.1.7",

 

이렇게 설치해줌. react-redux 빼고는 자체적으로 타입을 지원해 준다고 한다.

 

메인 화면에 들어가면 자동으로 리스트 api 호출해서 그걸 각 컴포넌트에 넣어줄건데, 책 관련 api니까 Book.ts로 해야겠다.

 

오후 1시 21분

 

next-redux-wrapper 에서

__REDUX_DEVTOOLS_EXTENSION__ 이거 적용하는 부분에서 오류가 나서 해메고 있다.

 

process.env.NODE_ENV === "production"
      ? compose(applyMiddleware(...middlewares))
      : compose(
          applyMiddleware(...middlewares),
          !options.isServer && (window as any).__REDUX_DEVTOOLS_EXTENSION__
            ? (window as any).__REDUX_DEVTOOLS_EXTENSION__()
            : (f: any) => f
        );

window가 undefined 일때 그냥 빈함수 f=>f를 호출해주도록 했는데 f의 인자 타입 설정을 안해주어서 오류가 났다.

 

오후 1시 52분

 

지금 redux-saga까지 다 적용하고 알라딘 api 불러오는데

 

Access to XMLHttpRequest at 'http://aladin.co.kr/ttb/api/ItemList.aspx?ttbkey=ttbawer0002043002&QueryType=ItemNewSpecial&MaxResults=20&start=1&SearchTarget=Book&output=xml&Version=20131101' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

이 에러 떠서 일단 api 불러오는 거는 서버 작업 할때 다시 해야겠다.

 

오후 2시 32분

 

커밋 메시지 앞에 Day3 붙이는거 까먹고 있다가 커밋 메시지 수정하려고 git rebase 하다가 엉켜서 삽질함.

그냥 커밋메시지는 놔두는걸로 ㅠㅠ

 

오후 2시 46분

 

알라딘 api로 책 정보 보는 페이지를 만들기 위해 필요한 mock 데이터를 가져왔다.

 

내일은 프리티어 설정이랑 책 정보 보는 페이지를 만들것이다.