feat: add API client abstraction for easier fetch usage #24

poiu694 · 2024-06-27T04:43:30Z

Issue Number

#23

Description

구현 내용 및 작업한 내용

localStorage 관련된 훅과 테스트 코드를 만들었습니다.
fetch 를 추상화하여 쓸 수 있습니다. 추상화수준은 ky를 참고했습니다

To Reviewers

PR을 볼 때 주의깊게 봐야하거나 말하고 싶은 점

이전에 디코 화면공유하면서 설명드렸던 내용들이라 자세한 설명은 생략할게요~
테스트용으로 콘솔을 찍어놨는데 나중에 삭제하겠습니닷

api usage

const client = {
  public: apiClientFactory({ secure: false }), // header에 토큰을 넣지 않음
  secure: apiClientFactory({ secure: true }), // header에 토큰을 넣음
}

const user = {
  getUserProfile: () => api.secure... // 토큰이 필요한 메서드
};

const map = {
  getPlaceById: () => api.public... // 토큰이 필요없는 메서드
}

const apis = {
  user,
  map
};

이를 사용해서 page에 임시로 넣은 형태처럼 사용이 가능합니다.
옵션을 두어 next의 fetch 속성들을 사용할 수 있습니다 (cache, tags 등)

Checklist

PR 등록 전 확인한 것

올바른 타켓 브랜치를 설정하였는가
PR 제목은 포맷과 내용 둘 다 알맞게 작성되었는가 (e.g., feat: add login page)
Description에 PR을 구체적으로 설명했는가

src/app/page.tsx

github-actions · 2024-06-27T04:45:15Z

The latest updates on your projects. Preview: https://vitamin-c-bubkyff1q-poiu694s-projects.vercel.app

Name	Status	Preview	Updated
VitaminC_Web	✅ Ready	Visit Preview	2024-06-27T04:43:31Z

Pridesd

좋은 코드 잘 보고 갑니다!

src/__tests__/utils/localStorage.test.ts

src/utils/api/HTTPClient.ts

github-actions · 2024-06-27T10:40:51Z

The latest updates on your projects. Preview: https://vitamin-c-qs2o3wqsk-poiu694s-projects.vercel.app

Name	Status	Preview	Updated
VitaminC_Web	✅ Ready	Visit Preview	2024-06-27T10:39:11Z

hee-suh

우와아아아아아악 넘 예뻐요!!!! 고생하셨습니다!!!! 취향 관련 이야기와 질문 몇 개 남겼습니다 ㅎㅎ

src/app/page.tsx

src/models/interface.ts

hee-suh · 2024-06-28T13:30:41Z

src/app/page.tsx

+          onClick={async () => {
+            const res = await api.test.testPOSTSecureAPI()
+            console.log(res)
+          }}


저는 보통 setState 하나 정도만 있을 때 inline으로 사용하는데, 어떤 기준으로 inline 코드를 작성하시는지 궁금합니다!

이것도 보여주기용 코드라서 굳이 함수로 만들 생각은 안했었습니다~ 지워둘게요~!

hee-suh · 2024-06-28T14:04:04Z

src/utils/api/HTTPClient.ts

+} from './types'
+
+class HTTPClient {
+  private baseUrl: string


브라우저 호환성을 위해, ECMAScript # 대신 TypeScript private을 사용하신 건지 궁금합니다!

tsconfig target을 es6로 설정하고 ECMAScript # private fields를 사용해서 js 런타임에서도 완전한 private을 유지하기

tsconfig target을 default(es3)로 가져가고, TypeScript private을 사용해서 js 런타임에서 private에 접근을 허용하되 브라우저 호환성을 높이기 Cf. https://www.typescriptlang.org/docs/handbook/2/classes.html#caveats

Cf. https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/#ecmascript-private-fields

큰 이유보다는 #을 붙이는 것보다 private을 붙이는게 더 가시적이라고 생각했어요!

hee-suh · 2024-06-28T14:06:58Z

src/utils/api/types.ts

타입 파일은 사용처 바로 옆에 위치시키는 걸 선호하시나요? 항상 타입을 어디에 위치시킬지 고민이라서 여쭤봅니다 ㅜ_ㅜ

이 부분은 저도 고민인데여! 호출 부분이나, 로직과 멀리 떨어진 곳에서 types를 가져다 쓰진 않을 것 같아서 옆에 두었어요!

hee-suh · 2024-06-28T14:09:50Z

src/utils/api/types.ts

+
+export interface RequestOptions {
+  headers?: Record<string, string>
+  body?: any


body는 타입을 조금 더 제한하지 않아도 괜찮을까요?

어떤 타입이 좋을까요?

hee-suh · 2024-06-28T14:29:44Z

src/utils/api/HTTPClient.ts

+
+  public post<T>(
+    url: string,
+    body?: any,


RequestOptions 안에 body가 포함되어있는데, 이 body는 어떤 의도인지 궁금합니다!

axios 처럼 post(url, body, config)로 쓰려고 만든 부분입니다~! 뒤에 option에서 omit할게요

hee-suh · 2024-06-28T14:33:59Z

src/utils/storage/index.ts

@@ -0,0 +1,4 @@
+import { LocalStorageManager } from './localStorage'
+
+export const AUTH_KEY = '@@auth-token'


잘 모르겠어서 여쭤보는 건데, @가 두 개면 어떤 걸 의미하는 건가요 ?_?

별다른 의미는 없어용!

hee-suh · 2024-06-28T14:35:48Z

src/utils/api/apiClientFactory.ts

+  secure,
+  interceptors,
+}: {
+  secure: boolean


optional로 두고, default 값을 false로 두는 건 어떨까요?

상관은 없을 것 같은데 어떤 부분에서 default를 false로 생각하신건지 궁금해요!

저는 secure인지 아닌지를 명시하고 싶어서 optional로 안두긴 했었습니다!

src/__tests__/utils/localStorage.test.ts

github-actions · 2024-06-28T15:14:16Z

The latest updates on your projects. Preview: https://vitamin-c-bx57om5i4-poiu694s-projects.vercel.app

Name	Status	Preview	Updated
VitaminC_Web	✅ Ready	Visit Preview	2024-06-28T15:11:39Z

github-actions · 2024-06-29T08:24:58Z

The latest updates on your projects. Preview: https://vitamin-c-rgjnan43a-poiu694s-projects.vercel.app

Name	Status	Preview	Updated
VitaminC_Web	✅ Ready	Visit Preview	2024-06-29T08:23:12Z

hee-suh

왁!!! 써보면서 개선 포인트들 더 고민해볼게용~!!

poiu694 requested review from hee-suh and Pridesd as code owners June 27, 2024 04:43

github-actions bot added the feature label Jun 27, 2024

github-actions bot assigned poiu694 Jun 27, 2024

poiu694 commented Jun 27, 2024

View reviewed changes

src/app/page.tsx Outdated Show resolved Hide resolved

Pridesd approved these changes Jun 27, 2024

View reviewed changes

src/__tests__/utils/localStorage.test.ts Outdated Show resolved Hide resolved

src/utils/api/HTTPClient.ts Outdated Show resolved Hide resolved

hee-suh reviewed Jun 28, 2024

View reviewed changes

poiu694 added 15 commits June 29, 2024 17:22

feat: localStorage util with implementing onChange, inMemoryStorage

3424e3f

test: localStorage util

5bdb61b

chore: for testing success

93f06e5

feat: add dummy api with delaying time

a38080c

feat: add parseJSON utility function for parsing JSON responses

9440aa3

test: parseJSON util

c90e817

feat: auth token storage

caa1fee

feat: add API client abstraction for easier fetch usage

4df866c

chore: test api instance

035ce44

chore: api error name 통일

e427f3d

chore: rename with kebab convention

82ba7d2

chore: remove useless code

f03ec8e

refactor: omit body type, duplicate parameter

d4c0890

refactor: make error extends architect

0152470

chore: default secure value to false

0d93589

poiu694 force-pushed the feature/fetch-custom branch from 5382159 to 0d93589 Compare June 29, 2024 08:23

hee-suh approved these changes Jun 29, 2024

View reviewed changes

poiu694 merged commit db23d5b into main Jun 29, 2024
3 checks passed

poiu694 deleted the feature/fetch-custom branch June 29, 2024 08:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add API client abstraction for easier fetch usage #24

feat: add API client abstraction for easier fetch usage #24

poiu694 commented Jun 27, 2024 •

edited

Loading

github-actions bot commented Jun 27, 2024

Pridesd left a comment

github-actions bot commented Jun 27, 2024

hee-suh left a comment

hee-suh Jun 28, 2024

poiu694 Jun 28, 2024

hee-suh Jun 28, 2024

poiu694 Jun 28, 2024 •

edited

Loading

hee-suh Jun 28, 2024

poiu694 Jun 28, 2024

hee-suh Jun 28, 2024

poiu694 Jun 28, 2024

hee-suh Jun 28, 2024

poiu694 Jun 28, 2024

hee-suh Jun 28, 2024

poiu694 Jun 28, 2024

hee-suh Jun 28, 2024

poiu694 Jun 28, 2024

github-actions bot commented Jun 28, 2024

github-actions bot commented Jun 29, 2024

hee-suh left a comment

		@@ -0,0 +1,4 @@
		import { LocalStorageManager } from './localStorage'

		export const AUTH_KEY = '@@auth-token'

feat: add API client abstraction for easier fetch usage #24

feat: add API client abstraction for easier fetch usage #24

Conversation

poiu694 commented Jun 27, 2024 • edited Loading

Issue Number

Description

To Reviewers

api usage

Checklist

github-actions bot commented Jun 27, 2024

Pridesd left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 27, 2024

hee-suh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

poiu694 Jun 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jun 28, 2024

github-actions bot commented Jun 29, 2024

hee-suh left a comment

Choose a reason for hiding this comment

poiu694 commented Jun 27, 2024 •

edited

Loading

poiu694 Jun 28, 2024 •

edited

Loading