Feat/#95 킬링파트 등록 & 노래 상세 정보 API 로직을 구현 #99

Creative-Lee · 2023-07-20T08:32:05Z

📝작업 내용

fetch 추상화 유틸 구현
api 로직 구현
- 킬링파트 등록 post
- 노래상세정보 get
fetch 추상화 custom hook 구현
- useFetch(get)
- useMutation(post, patch, delete등 )
컴포넌트에서 사용할 수 있는 개별 custom hook 구현
- usePostKillingPart
- useGetSongDetail

💬리뷰 참고사항

[fetch 유틸] --> [각 fetch함수] --> [useFetch / useMutaion hook] --> [use{METHOD}{DOMAIN} 형식의 hook]

위 순서대로 단계별로 추상화 되어진 api flow입니다.

fetch 유틸 : 각 fetch함수에서 사용하는 fetch API에서 공통되는 부분을 추상화한 유틸입니다.
useFetch / useMutaion : 사용처(컴포넌트)에서 필요한 통신 관련 공통 state(data, loading, error)를 제공하는 hook입니다.

앞으로 추가될 수많은 api 로직을 생각하여 각 로직을 비슷한 레벨로 관리할 수 있도록 신경써봤습니다.
프로젝트 내, 첫 api 로직이라 기준을 잘세우려고 노력했어요.
피드백 많이 부탁드립니다!
다들 화이팅입니다!

#️⃣연관된 이슈

close #95

ukkodeveloper · 2023-07-24T07:02:01Z

frontend/src/hooks/@common/useFetch.ts

+
+const useFetch = <T>(fetcher: () => Promise<T>) => {
+  const [data, setData] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState(false);


처음 isLoading 상태가 false인 이유가 있을까요?

cruelladevil

고생많으셨습니다👍👍

cruelladevil · 2023-07-24T13:51:04Z

frontend/src/apis/index.ts

+
+const BASE_URL = `http://43.202.41.118`;
+
+const fetcher = async <T>(url: string, method: string, body?: unknown): Promise<T> => {


💬 method가 string보다는 union이 들어가면 더 좋을 것 같은데 어떻게 생각해요? ("GET" | "POST" | ...)

cruelladevil · 2023-07-24T16:34:31Z

frontend/src/apis/index.ts

+  const options: RequestInit = {
+    method,
+    headers: {
+      'Content-type': 'application/json',
+    },
+  };
+
+  if (body) {
+    options.body = JSON.stringify(body);
+  }


💬 타입스크립트에서는 동적으로 속성을 추가하기 보다 한 번에 객체를 선언하는 것이 타입 추론에 좋습니다. example

options에 RequestInit이라고 타입을 명시해주어서 추론과는 크게 상관 없지만
동적으로 추가하기 보다 객체를 한 번에 선언해주면 보다 선언적으로 코드를 관리할 수 있을 것 같아요.

Request body에는 ReadableStream이나 null이 들어갈 수 있습니다.

const options: RequestInit = { method, headers: { 'Content-type': 'application/json', }, body: body !== undefined ? body : null, };

cruelladevil · 2023-07-24T16:38:59Z

frontend/src/types/song.ts

+type KillingPart = {
+  exist: true;
+  rank: 1;
+  start: 5;
+  end: 15;
+  partVideoUrl: PartVideoUrl;
+  voteCount: number;
+};


KillingPart 타입은 rank가 1, start가 5, end가 15로 고정인가요?!

cruelladevil · 2023-07-24T16:40:28Z

frontend/src/hooks/song.ts

+import useFetch from './@common/useFetch';
+import type { SongDetail } from '@/types/song';
+
+export const useGetSongDetail = (songId: number) => {


💬 useSongDetail 또는 getSongDetail이 더 이해하기 쉬울 것 같습니다.

cruelladevil · 2023-07-24T16:48:51Z

frontend/src/hooks/song.ts

+    isLoading,
+    error,
+    fetchData,
+  } = useFetch<SongDetail>(() => getSongDetail(songId));


💬 useSongDetail 또는 getSongDetail이 더 이해하기 쉬울 것 같습니다.

💬 위 코멘트에 이어서,
getSongDetail이라는 함수가 굳이 나뉘었어야 되나 싶은 느낌입니다.

const { data: songDetail, isLoading, error, fetchData, } = useFetch<SongDetail>(async () => await fetcher<SongDetail>(`/songs/${songId}`, 'GET'));

cruelladevil · 2023-07-24T17:21:58Z

frontend/src/hooks/@common/useFetch.ts

+    setError(null);
+    setIsLoading(true);


동일한 의견입니다.
useEffect 훅으로 인해 useFetch가 호출될 때 fetchData 함수가 실행됩니다.
fetchData 함수를 실행하면 isLoading을 true로 바꿉니다.
굳이 시작 상태를 false로 두는 이유가 있나요?

💬 위 코멘트에 이어서,
error의 시작 상태는 null인데 null로 set해주는 이유가 있을까요?

cruelladevil · 2023-07-24T17:22:22Z

frontend/src/hooks/@common/useFetch.ts

+      setError(error as ErrorResponse);
+    } finally {
+      setIsLoading(false);
+    }


👍 finally

cruelladevil · 2023-07-24T17:44:10Z

frontend/src/hooks/@common/useFetch.ts

+    } finally {
+      setIsLoading(false);
+    }
+  }, []);


💬 fetchData의 동일 참조를 유지하기 위한 목적으로 useCallback을 사용하였다면
dependency로 fetcher가 들어가지 않을까요?

💬 그와 별개로 동일 참조를 유지해준 이유가 궁금합니다.

cruelladevil · 2023-07-24T17:55:46Z

frontend/src/apis/index.ts

+
+const BASE_URL = `http://43.202.41.118`;
+
+const fetcher = async <T>(url: string, method: string, body?: unknown): Promise<T> => {


body에 줄 수 있는 타입이 있습니다.

더불어 fetch의 interface를 따라가면서 RequestInit을 활용하는 것도 좋은 것 같습니다.

const fetcher = async <T>(url: string, { method, body }: RequestInit): Promise<T> => { ... };

💬 여기서 더해서 목적이 기존 fetch에서 공통 option을 추가해주는 것이라면
fetcher도 option을 method와 body로 한정짓지 않고 열어주는 것이 좋을 것 같습니다.

const fetcher = async <T>(url: string, init: RequestInit): Promise<T> => { const options = { ...init, headers: { 'Content-type': 'application/json', }, body: init?.body !== undefined ? JSON.stringify(init?.body) : null, }; ... };

cruelladevil · 2023-07-25T00:51:27Z

frontend/src/apis/index.ts

+  message: string;
+}
+
+const BASE_URL = `http://43.202.41.118`;


환경변수로 빠져야 될 것 같아요

[FEAT] 환경설정 수정 및 추가 #109

Creative-Lee added 12 commits July 20, 2023 01:04

feat: fetch 유틸함수 구현

a5235fd

feat: 킬링파트 post api 로직 구현 및 타입 추가

2ba2db3

feat: 노래 상세조회 get api 로직 구현 및 타입 추가

d9b9cd3

feat: fetch 유틸에 baseURL 추가

30e5de7

fix: 누락된 async/await 키워드 추가

6ed7aec

fix: 누락된 baseUrl 스킴 추가

d204fe9

feat: useFetch 추상화 훅 구현

d0eac85

feat: useMutaion 추상화 훅 구현

79b53a4

feat: 노래 상세 정보 api 커스텀 훅 구현

5891fbc

feat: 킬링 파트 등록 api 커스텀 훅 구현

d58a7a0

refactor: 킬링파트, 노래 상세조회 데이터 type 변경

66a3e59

refactor: 불필요한 api headers 삭제

7e9ebd8

Creative-Lee requested review from cruelladevil and ukkodeveloper July 20, 2023 08:32

Creative-Lee self-assigned this Jul 20, 2023

Creative-Lee added [ 🌞 FE ] 프론트엔드 크루들의 빛나는 개발 이야기 하나둘셋 호! ✨ Feat 꼼꼼한 기능 구현 중요하죠 labels Jul 20, 2023

Creative-Lee added this to the 킬링 파트 등록 및 공유 기능 구현 milestone Jul 20, 2023

Creative-Lee added 3 commits July 20, 2023 18:37

refactor: 킬링 파트 응답 type 변경

1bf5d69

refactor: api baseUrl 변경

1f2dc92

refactor: 킬링파트 type에 voteCount 추가

cd39072

Creative-Lee merged commit 0a41de8 into develop Jul 20, 2023

Creative-Lee deleted the feat/#95 branch July 20, 2023 12:45

cruelladevil mentioned this pull request Jul 21, 2023

Feat/#89 킬링파트 페이지 완성 및 서버와 연동 #104

Merged

ukkodeveloper reviewed Jul 24, 2023

View reviewed changes

cruelladevil reviewed Jul 25, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/#95 킬링파트 등록 & 노래 상세 정보 API 로직을 구현 #99

Feat/#95 킬링파트 등록 & 노래 상세 정보 API 로직을 구현 #99

Creative-Lee commented Jul 20, 2023 •

edited

Loading

ukkodeveloper Jul 24, 2023 •

edited by cruelladevil

Loading

cruelladevil left a comment

cruelladevil Jul 24, 2023

cruelladevil Jul 24, 2023

cruelladevil Jul 24, 2023

cruelladevil Jul 24, 2023

cruelladevil Jul 24, 2023

cruelladevil Jul 24, 2023

cruelladevil Jul 24, 2023

cruelladevil Jul 24, 2023

cruelladevil Jul 24, 2023

cruelladevil Jul 24, 2023

cruelladevil Jul 25, 2023


		const BASE_URL = `http://43.202.41.118`;

		const fetcher = async <T>(url: string, method: string, body?: unknown): Promise<T> => {

Feat/#95 킬링파트 등록 & 노래 상세 정보 API 로직을 구현 #99

Feat/#95 킬링파트 등록 & 노래 상세 정보 API 로직을 구현 #99

Conversation

Creative-Lee commented Jul 20, 2023 • edited Loading

📝작업 내용

💬리뷰 참고사항

#️⃣연관된 이슈

ukkodeveloper Jul 24, 2023 • edited by cruelladevil Loading

Choose a reason for hiding this comment

cruelladevil 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

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

Creative-Lee commented Jul 20, 2023 •

edited

Loading

ukkodeveloper Jul 24, 2023 •

edited by cruelladevil

Loading