[React] 도움!! 같은 함수 2번 실행하는 방법

res.data 가 왜 reload인 건가요? 엑세스토큰이 만료됌을 알려주는 건가요? 그렇다면 200 응답이 아니라 400번대 에러 응답을 서버에서 보내주는게 더 노멀한 방법입니다. 엑세스 토큰 만료시에 자동으로 토큰 리프래시 후 재요청을 하고 싶은거면 axios interceptor를 키워드로 찾아보시는걸 추천드려요

전역상태관리 에서 방법을찾아보시는건 어떤가요?

refresh token내용을 모르겠는데 promise를 반환받고, then에서 await loadboard하면 될것같은데요!

안녕하세요, 지나가다가 댓글남깁니다! 토큰 처리방식과는 별개로 질문자님께서 다른 댓글에 제공해주신 코드만을 보았을 때 로직 상은 큰 문제가 없어 보입니다! 다만, 그럼에도 await refresh_token(); await load_bord(); 부분이 동기적으로 실행되지 않는다면 refresh_token 함수 내부의 비동기 처리 방식을 의심해 볼 수 있을듯 합니다. 혹시 내부 구현 방식이 어떻게 되어있을까요? 아래는 제가 예상해본 방식입니다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 1. 옳은 예: await을 통해 동기적으로 fetch
async function refresh_token() {
  const { data: newToken } = await fetchToken();
  console.log('New Token: ', newToken);
  localStorage.setItem('token', newToken); // localStorage는 동기적 실행을 보장
}

// 2. 틀린 예: then으로 promise를 resolve시키지만, 정작 then 프로세스가 끝나는 것을 기다리지는 않음
async function refresh_token() {
  fetchToken().then(res => {
    console.log('New Token: ', res.data);
    localStorage.setItem('token', res.data);
  });
}

// 2-1. 틀린 예를 활용한 동작 가능 코드
async function refresh_token() {
  await fetchToken().then(async res => {
    console.log('New Token: ', res.data);
    localStorage.setItem('token', res.data);
  });
}