Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor/#511 프론트의 토큰 만료 검증로직을 삭제하고 Axios를 도입한다. #554

Merged
merged 24 commits into from
Dec 19, 2023
Merged

Refactor/#511 프론트의 토큰 만료 검증로직을 삭제하고 Axios를 도입한다. #554

Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
3ec2b5f
config: axios 설치
Creative-Lee Nov 10, 2023
895be60
feat: axios 인스턴스 및 인터셉터 구현
Creative-Lee Nov 12, 2023
69605c1
refactor: 엑세스 토큰 refresh remote 함수 분리
Creative-Lee Nov 12, 2023
89bdb5f
refactor: 분리되지 않은 type, remote 함수 분리
Creative-Lee Nov 12, 2023
e10bfbe
refactor: remote 함수의 fetcher 의존성 제거 및 인스턴스 적용
Creative-Lee Nov 13, 2023
f2c79ee
refactor: 로그인 remote 함수 분리
Creative-Lee Nov 13, 2023
3ecd234
feat: 메인 페이지 장르별 fetch msw 구현
Creative-Lee Nov 13, 2023
db04ff0
chore: 불필요한 파일 제거
Creative-Lee Nov 13, 2023
a2bbcee
chore: remote 함수 중복 래핑 hook 삭제 및 코드 이동
Creative-Lee Nov 13, 2023
c287cfe
refactor: remote 함수 query parameter 처리 방식 통일
Creative-Lee Nov 13, 2023
d06887a
chore: import 방식 변경
Creative-Lee Nov 13, 2023
a4a83df
chore: auth 관련 remote함수 auth/하위로 이동
Creative-Lee Nov 13, 2023
4f858e9
fix: refresh 요청 API 명세에 맞게 로직 수정
Creative-Lee Nov 13, 2023
09cf9f3
refactor: 최종 만료시 로그인 페이지 리다이렉트 처리
Creative-Lee Nov 14, 2023
e6bfcfe
refactor: 타입 분리
Creative-Lee Nov 14, 2023
744fbff
refactor: 인터셉터 refresh 중복 요청 방지 기능 추가
Creative-Lee Nov 14, 2023
2166a72
refactor: 에러응답 타입 분리
Creative-Lee Nov 14, 2023
8e0a22f
chore: fetcher 및 토큰 만료 검증 파일 제거
Creative-Lee Nov 14, 2023
0fbcfde
refactor: 함수 네이밍 개선
Creative-Lee Nov 15, 2023
6755702
chore: 주석 수정
Creative-Lee Nov 15, 2023
0f87b75
refactor: promise 변수 null 초기화 코드 위치 이동
Creative-Lee Nov 28, 2023
dbf9655
style: promise 변수 라인 변경
Creative-Lee Nov 28, 2023
500cae1
refactor: config type 변경 및 린트 주석 제거
Creative-Lee Dec 9, 2023
ea5e89b
Merge branch 'main' into refactor/#511
Creative-Lee Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions frontend/src/shared/remotes/auth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { clientBasic } from './axios';

interface RefreshAccessTokenRes {
accessToken: string;
}

export const postRefreshAccessToken = async (staleAccessToken: string) => {
const { data } = await clientBasic.post<RefreshAccessTokenRes>('/reissue', staleAccessToken);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💬 현재 해당 함수는 구현부에서 await 1번하고, 사용처에서 await를 1번 더 해요. 객체분해할당만 하는 것이기 때문에 함수 구현부 내부에서는 굳이 await를 하지 않아도 되지 않을까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

말씀하신 부분이 잘 이해가 안되어서 그런데
promise가 이행된 후에만 새 변수에 할당이 가능하지 않나요?
구조분해할당만을 위한 함수 구현부 내부의 await가 없어도 된다는 말씀이 맞을까용?

Copy link
Collaborator

@ukkodeveloper ukkodeveloper Nov 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

구조분해할당만을 위한 함수 구현부 내부의 await가 없어도 된다는 말씀이 맞을까용?

이것은 이제 도밥이 판단해야 할 것 같아요! 정말 해당함수에서 구조분해할당을 해서 data를 가져와야 하는지요! 다만, 제가 말씀드리고 싶은 것은 그렇게 함으로써 async-await를 두 번 사용하게 된다는 점입니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하 '구조분해 할당을 위해 await가 필요없다' 가 아니고,
'await + 구조분해 할당을 해서 가져와야 하는가~ 가' 주안점이었군요!

오 그럼 궁금한게 있는데, await가 2번 사용되면 단점이있나요?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ukkodeveloper

바깥에서 data({ asccessToken })를 바로 쓰려면 data를 풀어내서 내보내야 됩니다.
그냥 내보내게 되면 response 객체이겠죠.

const { accessToken } = await getAccessToken(platform, code);

다만 async/await가 불편하다면 then이 붙은 promise를 내보내면 될 것 같네요.
둘의 차이는 어떨지 더 알아봐야 알 것 같은데, 똑똑한 여러분들이 알려주실거라 믿습니다 😄

export const getAccessToken = (platform: string, code: string) => {
  return client
    .get<AccessTokenRes>(`/login/${platform}`, {
      params: { code },
    })
    .then((response) => response.data);
};


return data;
};