[Week4] 3기 - Mission7 필수 구현사항

sykim·2020년 5월 1일
0

[Week4] 3기 - Mission7 필수 구현사항

  • redux-thunk로 적용된 부분을 redux-saga로 변경해주세요.
    모든 서버와의 인터렉션에서는 로딩처리를 해주세요.
  • 저장된 토큰을 가지고 서버에 요청을 해주세요.
  • 가입페이지에서 가입이 완료되면 자동으로 로그인이 되고 홈페이지로 이동되게 해주세요.
  • 토큰을 보관하고 있다가 토큰이 만료되지 않으면 홈 화면에 접근을 허용해주세요.
  • 로그인을 안하면 로그인과 가입페이지를 제외하고는 접근을 못하게 해주세요
  • 스크롤을 아래로 내리면 다음 페이지의 데이터를 가져오도록 처리해주세요.

Mission7 review

  1. JWT 토큰 인증 후 API로부터 DATA 가져오기
    jwt 토큰으로 인증을 처리하는 부분에 대한 개념이 없어 초반에 많이 버벅거렸지만 실무에서 대략 어떻게 데이터를 가져오는지 알 수 있어 좋았습니다. :)

  2. 액션, 리듀서, 사가, 서비스폴더(api) 각각의 개념이 아직 완전치는 않지만 다시 한번 정리를 해보자면
    포스트 하나를 업로드하는 작업을 할 때

  • 포스트 업로드 버튼에 POST ADD REQUEST 액션 실행
  • POST ADD REQUEST 액션의 설명서 역할을 하는 리듀서를 읽고
  • 사가에서 제너레이터 함수가 제공하는 yield와 같은 함수를 이용해 api 작업 (비동기)
  • 알맞은 api 요청 후 result 값이 나오면 다시 yield로 POST ADD SUCCESS 액션 실행
  • POST ADD SUCCESS 액션의 설명서 역할을 하는 리듀서를 읽고
  • 리액트 state 값이 변경되면서 화면에 새로운 포스트 출력

저는 미션7에서의 액션,리듀서,사가,api 흐름을 대략 이렇게 이해했습니다.

++
like, comment 처리는 진행 중


question list

Q1. 토큰을 클라이언트에 저장하는 장소은 localStorage로 해놨는데 보통은 쿠키를 이용해서 저장을 해두나요? 쿠키와 localStorage, 각각의 저장하는 용도는 어떤 걸로 결정이 되나요?

Q2. thunk와 비교했을 때 saga를 도입함으로서 얻는 장점을 알고 싶습니다. 같은 맥락으로 function*, yield와 같은 제너레이터 함수를 사용할 수 있다는 점이 어떤 점에서 장점인지 궁금합니다.
(단순히 비동기만을 위해 사가를 도입한 건 아니라고 생각해서 비동기 이외에 사가가 주는 장점이 궁금했습니다.. thunk도 비동기 기능을 하니까)

Q3. 작업하는 프로젝트의 브라우저 버전(ex. 크롬, 익스 등)에 대한 결정은 어떤 것들을 기준으로 잡으시는지 궁금합니다. (크롬에도 버전 종류가 있는 것으로 알고 있는데 세세한 버전까지 생각을 하시는지)


정리되지 않은 키워드

react lib set (react tool kit)
-redux
-ramda

react resource

profile
블로그 이전했습니다

0개의 댓글