CodeHoon

2025.02.24 - [FrontEnd/React.js] - [React.js] Stream 데이터 fetch로 처리하기 - 2

지난 포스팅에서 Streaming 을 통해서 데이터를 노출하는 것까지 예시를 통해서 완료하였다.

이번에는 ai text 챗. Chatgpt 처럼 중간에 "정지"할 수 있는 기능을 추가하려고 한다.

1. AbortController

// 새로운 AbortController 인스턴스 생성
const abortController = new AbortController()

바로 abortController 기능을 사용하는건데, 해당 기능은 node15 이상부터 사용할 수 있으니 저버전의 서버를 사용하고 계신다면 주의 바랍니다. (그 이하를 쓰는거면 얼마나 오래된겁니까..)

이렇게 abrotController 를 선언하였다면, 

// API 요청에 signal 추가
const response = await fetch(`/api/streaming`, {
    method: 'POST',
    headers: Config.headers,
    body: JSON.stringify(requestBody),
    signal: abortController.signal, // AbortController의 signal 추가
})

signal 을 추가하여 처리할 수 있다.

결과 맛보기

zustand(store) 을 이용하여 분리되어있는 api 와 화면을 연결하였고,

실제로 사용한 모습은 다음과 같다.

//api.js
const abortController = new AbortController()

const response = await fetch(`api/`, {
    method: 'POST',
    headers: Config.headers,
    body: JSON.stringify(requestBody),
    signal: useStore.getState().abortController.signal,
})

React.js 화면

// 검색종료버튼
const handleStop = useCallback(() => {
    const store = useStore.getState()
    store.abortController.abort()
    store.setIsStopped(true)
}, [])

return (
    <button onClick={handleStop}>
        <FaRegStopCircle className='text-lg' /> {/* 정지아이콘 */}
    </button>
)

이제 실제로 동작하는 모습은 "개발자도구 -  네트워크 - REST API 명 - 응답"탭에서 볼 수 있는데,

이런식으로 쭉 하단으로 나열되다가 중단을 시키면

이렇게 결과가 나온다.

그때 화면에서는 아래와 같이 플로팅 버튼이 노출되도록 설정했고, "재생성하기" 버튼을 누르면 기존에 입력했던(송신했던) 정보를 가지고 python에서는 해당 내용을 가지고 다시 응답을 생성하도록 선언 해놓았다.

중요한건 Streaming 데이터를 REST API 를 통해서 호출하고,
이를 받아서 처리하는 과정에 있으며, 중간에 정지(abort) 하는 기능까지 만들었다는 것이다.

안녕하세요 상훈입니다.

Vue.js 혹은 React.js (프론트 프레임워크) 에서 카카오로그인을 구현하려고 합니다.
그런데 401 에러가 자꾸 뜨면서 코드 값을 줬는데도 토큰을 내뱉지 않더라구요. 그래서 찾아보다가 KakaoDeveloper 에서 작성된 내용중에 저와 같은 케이스가 있는지 여러 사례들을 확인할 수 있었습니다. 
+ 어떤 블로그를 보면서 진행하고있었는데, 거기서는 code만 보내는 걸로 해서 계속 나오는 에러였습니다.
+ axios를 사용하고있었는데, 지속적인 오류가 출력되어 성공하지 못하고 fetch 방식으로 변경하였습니다.

✔ 사전 환경 체크!

- Backend(Spring)을 거치지 않고 JS 프론트 프레임워크 (Vue.js, React.js) 에서 전부 처리하려고 합니다.
- 현재는 2단계(token 가져오기)입니다.
   (1단계는 code를 가져오는 단계입니다.)
- 결과 데이터로 [token_type, access_token...] 을 얻어옵니다.

✔ 시작!!

일단 필요요소는 다음 사진과 같습니다.

const bodyData = {
    grant_type: 'authorization_code',
    client_id: KAKAO_REST_API_KEY,
    redirect_uri: DEV_REDIRECT_URI,
    code: payload,  // 1단계에서 발급받은 코드
    client_secret: CLIENT_ID
  }

1) client_id : 내 어플리케이션 > 앱설정 > 요약정보 > REST API 키
2) redirect_uri :  내 어플리케이션 > 제품설정 > 카카오로그인 > Redirect URI
3) code : 1단계에서 받아온 code의 값
4) client_secret :  내 어플리케이션 > 제품설정 > 카카오로그인 > 보안 > ClientSecret :  코드

이렇게 body에 들어갈 내용들을 전부 가지고 REST API (비동기 통신) 으로 값을 요청하고 받아옵니다.

const bodyData = {
    grant_type: 'authorization_code',
    client_id: KAKAO_REST_API_KEY,
    redirect_uri: DEV_REDIRECT_URI,
    code: payload,
    client_secret: CLIENT_ID
}

const queryStringBody = Object.keys(bodyData)
    .map(k => encodeURIComponent(k) + '=' + encodeURI(bodyData[k]))
    .join('&')


fetch('https://kauth.kakao.com/oauth/token', {
    method: 'POST',
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    body: queryStringBody
})
.then(res => res.json())
.then((data) => {
  console.log(data)
})

저 같은 경우는 Vuex-store를/을 사용하여 action에서 이 내용을 처리하였습니다.

actions: {
	async KakaoLogin ({state, commit}, payload) {
	  const bodyData = { ... }
        
	  const queryStringBody = Object ...
        
	  fetch(... )
	    .then(
	      commit() // 여기서 결과 받아서 처리
	    )
	}
}

✔ 결과

console 로 출력하도록 일단 설정하였는데요, 해당 내용은 이제 성공하였습니다.