[React] 카카오톡 간편인증관련

 

현재 세금환급서비스를 만들고 있다. 그 중에서 기존에 해보지 않은 로직을 짤 일이 생겨서, 이렇게 기록으로 남겨둔다.

물론 지금의 코드는 추후 개선될 확률이 높다.

 

 

먼저 코드를 짜기 전에, 아래와 같은 플로우차트를 작성하였다.

 

 

기존의 백엔드와 데이터를 주고받는 방식이 조금 달랐기에, 재미는 있었다.

 

 

 

 

 

---

 

 

Response의 데이터 값이 유동적이다.

 

 

 

간편인증 정보를 입력한 뒤 보낸 요청으로 스크래핑 업체에서는 총 3개의 API를 거친다. 근데, 간편인증 정보의 조건에 따라서 2개를 거칠수도 있고, 1개를 거칠수도 있다. 그럼 어떤 문제가 생길까?

 

Response로 오는 데이터값이 객체인데, 그 중 키값이 2개일수도, 1개일수도 또는 3개일수도 있다.

 

 

참으로 난잡하다. 키값이 계속해서 달라지는 것을 대비해서, 데이터를 처리하는 로직을 짜야한다.

그래서 다음과같이, Object.keys를 이용해 키값의 개수를 가지고 조건식을 돌렸다.

 

 

 

코드의 일부분만 가져왔다.

   let ResultKeys = Object.keys(data.payload);
        let result = data.payload;
        console.log("response키값들", ResultKeys);

        //만약 Z5004만 response로 올 경우,이미 수임동의가 된 경우임.
        if (ResultKeys.length === 1 && ResultKeys[0] === "Z5004") {
          //이미 수임동의 되었으니, already는 true가 되고,
          state.userInfo.already = true;
        }

 

 

이렇게 고객이 간편인증을 완료하면, 백엔드에서 API를 거친 뒤 response를 보내준다. response에 에러값이 없으면, 유효성 통과이다. 근데 여기서 예외사항이 있다. 이미 한 번 인증을 했던 사람의 정보로 데이터 요청을 보내면, 고객이 간편인증을 완료하기도 전에 백엔드에서 response를 보내준다. 이런 상황에서는 어떤 문제점이 생길까?

 

고객이 간편인증을 성공여부를 프론트 측에서는 알 턱이 없다.

 

 

 

---

 

 

 

소켓처럼 계속해서 고객의 간편인증 성공여부를 트랙킹하자.

 

 

내 실력으로 생각할 수 있는 유일한 수단이였다. 고객이 간편인증정보를 입력하고, 그 고객이 이미 인증을 했던 사람이라면 setInterval() 을 통해서, 주기적으로 데이터요청을 통해 고객의 성공여부를 트랙킹한다.

 

        //만약 Z5004만 response로 올 경우,이미 수임동의가 된 경우임.
        if (ResultKeys.length === 1 && ResultKeys[0] === "Z5004") {
          //이미 수임동의 되었으니, already는 true가 되고,
          state.userInfo.already = true;
        }
        
        
        
        위와 같이, 이미 인증한 고객의 response를 조건문으로 걸러내고 setInterval 실행
        
        
    
        
         //이미 수임동의를 한 유저면, 1초마다 axios post요청을 통해 z54err을 조회해야함.
    const Time = setInterval(async () => {
      if (userStatus.userInfo.already && time > 1) {
        const response = await TaxBackApi.post(formData);
        if (response.data?.Z54err === "정상") {
          dispatch(alreadyVerify());
        }
      }
    }, 1000);

 

 

 

 

---

 

 

 

문제는 해결되었으나, 동시접속자수가 많은 상태에서 1초마다 서버로 데이터요청을 보낸다면 어떤 일이 일어날 지 예상할 수 없다. 이 부분은 백엔드와 얘기해봐야할 것 같다.