해커톤 리펙토링(OX QuizAPI)

들어가며

해커톤에서 백엔드와 협업을 처음 해보았다. 또한 해커톤의 특성상 짧은 시간안에 코드를 짜야하고 각자 분업이 있다보니 API 연결을 거의 시도조차 하지 못했었다. 때문에 리펙토링을 하며 코드를 이해하고 분석하고 싶었다.

Request

---

Parameter

Name	Desc	Type	Required
quizId	퀴즈 ID	Long	O

Body

Name	Desc	Type	Required
answer	사용자 답변	Boolean	O

Response

---

Success

Name	Desc	Type
quizId	퀴즈 ID	Long
correct	정답 여부	Boolean

{
	"code": 200,
	"message": "success",
	"data": {
			"quizId" : 1,
			"correct" : true
	}
}

---

❓이전코드

완성된 코드를 갖고 오진 않았고, API 연결 직전의 코드를 갖고 왔다.

  const handleClickOnBtn = () => {
     const data = api.post(`/api/v1/quiz/${quizId}/solve/${userId}`, {answer: correctIc ? 1 : 0});
     data.data.correct ? setIsCorrect(true) : setIsCorrect(false);
     navigate('/result', {state : isCorrect});
  };

---

❗️해결방법

이 부분의 대한 api 연결은 내가 연결하지 않아 이해가 가지 않았다. 우선 api 명세서를 제대로 이해하기 위해 명세서부터 한번 파보았다.

• URL은 /api/v1/quiz/${quizId}/solve/${userId}
• 요청 본문에는 answer가 포함. corretIc가 true이면 answer는 1, 그렇지 않으면 0

또한 필요없는 state 부분을 지워주고 그 자리에 sessionStorage를 사용하여 사용자 분기처리를 해주었다. api 를 따로 분리하여 QuizPage에 불러오면서 코드를 조금 더 깔끔하게 정리하였다.

// postAnswerAPI
import { api } from '../api';
export const postAnswer = async (corretIc: boolean) => {
  try {
    const quizId = sessionStorage.getItem('quizId');
    const userId = !sessionStorage.getItem('userId')
      ? 1
      : sessionStorage.getItem('userId');

    const { data } = await api.post(`/api/v1/quiz/${quizId}/solve/${userId}`, {
      answer: corretIc ? 1 : 0,
    });
    const { correct } = data.data;
    return correct;
  } catch (error) {
    throw new Error(String(error));
  }
};

각 코드의 대해서 설명을 하겠다.

const quizId = sessionStorage.getItem('quizId');

→ sessionStorage 에서 quizID를 가져온다. API 요청의 파라미터로 간다.

---

const userId = !sessionStorage.getItem('userId') ? 1 : sessionStorage.getItem('userId');

→ sessionStorage에서 userId를 가져온다. 만약 userId가 존재하지 않으면 기본값으로 1을 사용한다.

---

const { data }

→ 사실 여기서 구조분해할당을 도대체 왜 사용한거지..? 라는 의문이 들었다. 구조분해할당이 된 상태에서 console.log를 찍어보았다.

const { data } = await api.post(`/api/v1/quiz/${quizId}/solve/${userId}`, {
      answer: corretIc ? 1 : 0,
    });
console.log(data)

그런 다음 구조분해를 푼 뒤 data 의 console.log를 찍어보았다.

const data = await api.post(`/api/v1/quiz/${quizId}/solve/${userId}`, {
      answer: corretIc ? 1 : 0,
    });
  console.log(data)

data의 depth를 보면 data → data → data 밑에 true 가 있는것을 볼 수 있다. 우리는 여기서 correct 의 값인 boolean 을 전달해야 한다. 때문에 구조분해할당을 사용한 것이다.

---

const { correct } = data.data;

→ 이제는 depth 가 2단계만 남았으니 안에있는 correct 의 값을 구조분해할당을 통해 값을 전달해주는 역할이다. 처음엔 이름을 왜 correct로 지었지..? 라는 생각을 갖고있었는데 당연히 data 안에 값 이름이 correct 이기 때문에 const { correct }로 지어준 것이다. 밑에 사진은 correct을 console.log를 찍어준 모습이다.

---

분리한 API 코드를 QuizPage에 갖고온 후 async/await 으로 감싼 뒤, 비동기처리를 해주면서 오류 및 API 분기 처리를 한꺼번에 처리하였다.

// QuizPage.tsx
const handleClickOnBtn = async () => {
    try {
      const res = await postAnswer(correctIc);
      console.log(res);
      navigate('/result');
    } catch (error) {
      throw new Error(String(error));
    }
  };

결과하면을 보면 true를 뱉는 모습을 확인할 수 있다.