api를 호출하여 데이터를 가져오던 중 문제가 있었다. 나의 챌린지 데이터에 운동 종목에 관련된 데이터가 없었다. 백엔드에서 DB 최적화를 위해 두 api를 분리하여 호출해달라고 하였고, 납득할만한 이유라 동의하였다.
원하는 종목 데이터를 받아오기 위해, 나의 챌린지 데이터에서 챌린지 ID를 이용해 해당 챌린지 상세 데이터를 불러왔다. 두 개의 데이터를 순차적으로 불러와야 했다. (ID 받아와서 -> 해당 ID에 해당하는 상세 내용 호출)
문제는 여기서 끝나지 않았고... 각 api의 response 형태(컬럼명과 담겨진 데이터 형태)가 조금씩 다르다보니, thunk 함수에 넣을 파라미터 값을 재가공하여 넣어줘야했다...!
이런 일이 생길거라곤 생각해본적이 없는데 데이터를 나누는 단위, 컬럼명, 데이터 자료형 등등을 매우 치밀하게 계산하고 예상하지 않으면 이런 문제가 생길수 있구나라고 생각했다...
어쩌면 아무리 예상을 해보아도 이런 상황은 미처 커버하지 못할수도 있겠구나 싶었다.
백엔드에 새로운 데이터 형태의 api를 요청하는것이 최선의 방식이었지만, 데이터 가공을 누가 하느냐는 협의에 관련한 문제였기 때문에 맘 편히 요청하긴 힘들었다...
더군다나 백엔드에서는 DB 최적화라는 타당한 이유를 갖고있었기 때문에, 프론트에서 데이터 가공을 해야겠다고 생각했다.
구조 설계에 대해 처음으로 깊게 공감해본 케이스였다~
더불어 백과 프론트 분업을 하는 과정에서 백엔드의 작업 내용과 방식에 대해 알아야겠다고 생각해본적이 없는데, 이번처럼 어떤 작업을 우선해야할지에 대해 생각해볼 상황이 온다면 어느정도 백엔드 작업의 지식이 필요하겠구나 생각했다.
const getMyChallengesAPI = (value) => {
return function (dispatch, getState, { history }) {
api
.get('/challenges/user')
.then((response) => {
if (value === 'get_detail') {
// DB쪽 내 챌린지 api에서 Challenge_Exercises 컬럼과 join 하면 부하가 높을것 같다고 하여 챌린지 상세 api로 대체함.
dispatch(getChallengeDetailAPI(response.data.result[0].challengeId));
}
dispatch(getMyChallenges(response.data.result));
})
.catch(function (err) {
logger('나의 챌린지를 가져오지 못했습니다.');
});
};
};- 위 작업으로 파생된 문제
// 나의 챌린지 아이디 꺼내서 -> 상세 챌린지 데이터들 열람 -> 상세 챌린지 데이터들을 이용해 addSelectedPrevItem thunk 함수 파라미터 제작...
// 너무 백엔드 친화적인 api였다...??
// 리덕스의 값을 저장해두기 위해 challengeDetail 값을 이용하여 exercise의 routine을 만들어야함. (이미 workout에서 데이터를 그렇게 불러오므로...)
const challenge = response.data.result.challenge;
const routine = {
id: challenge.id,
routineName: challenge.challengeName,
routineTime: challenge.runningTime,
rating: null,
isBookmarked: false,
isCompleted: false,
myExercise: challenge.Challenge_Exercises.map((l, idx) => {
return { exerciseName: l.exerciseName, set: l.Challenge_Sets };
}),
createdAt: challenge.createdAt,
};
dispatch(exerciseActions.addSelectedPrevItem(routine));