이전에 로그인 API를 구현하고 이제는 컴포넌트들을 생성하여 API와 연결해줘 완성을 했다. 만드는 동안 발생했던 에러들과 내가 새로 알게된 것들과 함께 정리하는 시간을 갖아보려한다. 내가 공부한 로그인 방법의 API를 정리한 글에서 나와있듯이 데이터 입력 > 데이터 검토 > 유효성 검사(토큰확인) > 결과 와 같은 순서로 구성되어있으며, 위의 기능들을 하기 위한 장치들은 API에서 모두 만들어 놨으므로 이제는 이용하는 일만 남았다. 모듈에서는 액션, 액션생성함수, 리듀서, 초기State를 담아주고, 최상위 index에서는 store와 sagaMiddleware, localstorage를 관리해준다. 그리고 컨테이너에서 dispatch로 액션을 전달하여 State에 정보를 전달해준다. 데이터의 흐름은 페..
redux-saga
데이터 로딩은 서버 사이드 렌더링을 구현할 때 까다로운 문제 중 하나이다. 이때 데이터 로딩은 API 요청을 의미한다. 서버의 경우 문자열 형태로 렌더링하는 것이므로 state나 리덕스 스토어의 상태가 바뀐다고 해서 자동으로 리렌더링 되지 않는다. 그 대신 renderToString 함수를 한 번 더 호출해야 한다. 거기다 서버에서는 componentDidMount 같은 라이프 사이클 API도 사용 불가능 하다. SSR의 데이터 로딩을 해결할 수 있는 방법은 많지만, 이번에는 redux-thunk와 redux-saga를 사용해 보자. 1) redux-thunk 코드 준비 여기에서 thunk와 saga, axios를 설치해 주자 npm add redux-thunk redux-saga axios 이번 프로젝..
redux-saga redux-thunk 다음으로 많이 사용하는 비동기 작업 관련 미들웨어이다. 사용하기 좋은 상황 기존 요청을 취소 처리해야 할때 ( 불필요한 중복 요청 방지 ) 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계없는 코드를 실행했을 때 웹소켓을 사용할 때 API 요청 실패 시 재요청해야 할 때 제너레이터 함수 redux-saga 에서는 ES6의 제너레이터 함수를 사용한다. (처음 다뤄봐서 이해하기 힘들었다....) 제너레이터 함수를 사용하면 함수에 값을 순차적으로 반환할 수 있다. 또한 함수의 흐름을 도중에 멈춰 눻았다가 이어 진행할 수 있다. function* generatorFunction() { console.log(`11`); yield 1; co..
