DOCS.API요청

API요청, 어디에서 할 것인가?

평화로운 우아한 테크캠프 그림왕국. 그림과 그림의 남자들이 아주 평화롭게 폴더 구조를 정하고 있었어요.

• 그림의 남자2: API요청을 관리하는 건 따로 모듈을 하나 만들어서 거기서 재인증이나 다른 것들을 처리하면 되겠죠?

• 그림의 남자1: 아니다! Redux-Saga를 사용하면 리액트의 모든 액션을 Redux-saga에서 관리하면 된다!

API 모듈을 만들자는 입장 1

API 요청은 전역 상태와는 전혀 관계가 없고, 단순히 브라우저의 네트워크 기능을 사용해서 요청만 보내면 됩니다. 그래서 따로 모듈로 분리하면 Redux로 비동기 요청을 할 때도 내부에서 재인증을 받거나 다른 일이 벌어지든 모르고 추상화되어서 "API서버에 요청"이라는 작업만 하는 것으로 인지하게 됩니다. 그래서 코드를 분리하는 측면에서 봐도, 기능 측면에서 봐도 API요청을 담당하는 함수를 따로 모듈로 분리해서 만들어서 유틸함수에 넣는 것이 더 나은 방법 같습니다.

Redux-Saga에서 API 요청까지 관리하자는 입장 1

Redux-Saga를 사용하게 되면 이제까지 redux-thunk로 사용하던 비동기 처리 방식과 조금 다릅니다. Redux-Saga를 사용하게 된다면 프론트엔드에서 발생하는 모든 일에 대한 처리를 Saga에서 처리해주는 게 맞습니다. 그리고 로딩과 관련해서도 재인증을 진행하게 되면 Redux-Saga에서 로딩에 중간에 끊기는 현상이 발생합니다.

API 모듈을 만들자는 입장 2

추상화를 하게 되어서 모듈을 실행하면 내부에서 재인증을 수십번하든 Redux-Saga에서는 단순히 "API서버에 요청해서 결과를 가져왔다"로만 볼 수 있습니다. 로딩이 중간에 끊기지 않아도 돕니다.

Redux-Saga에서 API 요청까지 관리하자는 입장 2

다시 한번 이야기 하지만, Redux-Saga를 사용하면 프론트엔드에서 발생하는 모든 처리를 Redux-Saga에서 처리하는 것이 맞습니다.

결론

이렇게 평행선을 달리던 이야기는 결국 API 모듈을 만들자는 입장이 양보를 하면서 Redux-Saga에서 직접 API 요청을 하는 것으로 마무리가 되...는 줄 알았지만, 결국 마지막에 시간이 부족해서 Redux-Saga에서 API 요청과 재인증을 관리하는 방법을 찾지 못하고 이전에 만들어둔 API 요청 모듈을 조금 손보고 적용하게 됩니다.

해피 엔딩?

회고

• 박기덕(API 모듈을 만들자는 입장) : Redux-Saga에서 관리하게 되면 글로벌 상태 관리를 담당하는 게 아니라 API 요청까지 Redux-Saga에 종속되어서 나중에 코드를 바꾸기도 어려워질 것 같다. Redux-Saga로 하는 방법을 해보지 못했지만 해봤으면 더 확실하게 결론을 내릴 수 있을 것 같다.
• 서그림 : 토큰 처리를 통한 재요청 부분을 손보면서 이 부분을 내가 담당하게 됐었는데, 시간의 부족의 이유라기보다는 사가에서 재인증을 하게되면 사가 함수에서 작성해야 하는 코드가 너무 많아졌기 때문에 API 요청 모듈을 다시 도입하는 방식으로 해결하였다. 사가에서 하는 방법이 분명히 존재할 수 있다. 하지만 팀원 모두 관련 레퍼런스를 찾을 수 없었고 API 모듈을 다시 적용했을 때 사가 코드가 많이 간결해지기도 했다. 처음에는 두갈래로 나뉜 의견이었지만 마지막에는 팀원 모두가 동의하는 방향으로 잘 찾아간 것 같아서 좋았다.
• 손원우 : 두 가지 방법 모두 사용해보고 결정할 수 있었더라면 하는 아쉬움은 남지만 마침내 하나로 의견이 모아지고 진행이 되어서 좋았다. D로서 C분들의 첨예한 토론은 장관이었다! 멋있음
• 윤민상(Redux-Saga에서 API 요청까지 관리하자는 입장) : 기덕님은 axios 모듈을 이미 만들어놨고 저는 사가에서 처리할 수 있다는 정보만 가진 상태였는데 내가 너무 밀어붙인 것 같다. 무엇이 더 좋은 방법인지는 사가로 해보지 않아서 모르겠지만 다음에 이런상황이 온다면 내가 그 부분을 잘 모르고 상대방은 다른 방법에 대해 조금 더 잘 알고있다면 양보하는 방향으로 나아가고 싶다. 미안해요 ㅠㅠ