Part3 김민섭 week19 제출 #497

striker1826 · 2024-07-01T04:51:04Z

주요 변경사항

기존 코드 리펙토링
기존 API들 react-query로 변경

멘토에게

커밋이 한꺼번에 많이 올려드려서 죄송합니다.
기존 코드 리펙토링을 중점적으로 진행했습니다.

kiJu2 · 2024-07-01T16:55:42Z

수고 하셨습니다 ! 스프리트 미션 하시느라 정말 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다.

kiJu2 · 2024-07-01T16:56:17Z

커밋이 한꺼번에 많이 올려드려서 죄송합니다.

아하핳 괜찮습니다 ! 모든 코드 보면서 리뷰해보도록 할게요 !

기존 코드 리펙토링을 중점적으로 진행했습니다.

넵넵 😊

kiJu2 · 2024-07-01T16:56:37Z

commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?

git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
흔히 하는 말이 있습니다:

커밋은 합칠 수 있지만 나눌 수 없습니다.

그럼 커밋을 언제 해야 할까요?

저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:

커밋을 하는 단위는 커밋 메시지 한 줄로 설명할 수 있는 행동
하나의 목표 혹은 액션이 달성될 때

또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:

tl;dr:

커밋 메시지 형식

type: Subject

body

footer

기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다.

메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다.

feat : 새로운 기능 추가
fix : 버그 수정
docs : 문서 내용 변경
style : 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 등
refactor : 코드 리팩토링
test : 테스트 코드 작성
chore : 빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우 등

원문보기

kiJu2 · 2024-07-01T17:25:55Z

queries/user/useGetUserInfo.ts

+export const useGetUserInfo = {
+  queryKey: () => key.user(),
+
+  queryOptions: () =>
+    queryOptions<{ data: { data: User[] } }>({
+      queryKey: useGetUserInfo.queryKey(),
+      queryFn: () => apiInstance.get(CODEIT_USER),
+    }),
+};


해당 객체는 hook으로 보이지 않습니다 !:

Suggested change

export const useGetUserInfo = {

queryKey: () => key.user(),

queryOptions: () =>

queryOptions<{ data: { data: User[] } }>({

queryKey: useGetUserInfo.queryKey(),

queryFn: () => apiInstance.get(CODEIT_USER),

}),

};

export const userQuery = {

queryKey: () => key.user(),

queryOptions: () =>

queryOptions<{ data: { data: User[] } }>({

queryKey: useGetUserInfo.queryKey(),

queryFn: () => apiInstance.get(CODEIT_USER),

}),

};

보편적으로 use ~는 커스텀 훅에 사용됩니다. 위처럼 다른 네이밍을 사용해보는게 어떨까요 !?

혹은 다음과 같이 쿼리들을 관리할 수도 있어요:

export const userQueries = { getUsers: () => null, getUserById: () => null };

그리고 키들은 다음과 같이 !

export const userKeys = { getUsers: ['user'], getUserById: (id: string) => ['user', id] };

kiJu2 · 2024-07-01T17:43:01Z

entities/folder/ui/folderHeader/Header.tsx

-const Header = () => {
-  const { userData, error } = useGetUserData();
+export const Header = () => {
+  const { data: userData } = useQuery(useGetUserInfo.queryOptions());


만약 전 리뷰처럼 수정된다면 다음과 같이 수정되겠네요 !:

Suggested change

const { data: userData } = useQuery(useGetUserInfo.queryOptions());

const { data: userData } = useQuery({ queryFn: userQueries.getUser, queryKey: userQueryKeys.getUser });

kiJu2 · 2024-07-01T17:44:47Z

shared/model/useAuthGuard.ts

+export function useAuthGuard() {
+  const router = useRouter();
+
+  type GuardPath = "token" | "notToken";
+
+  const guardPath: Record<GuardPath, Record<string, boolean>> = {
+    token: { "/folder/[[...folderId]]": true },
+    notToken: { "/signin": true },
+  };
+  // SSR에서의 접근을 막기 위한 로직입니다.
+  if (typeof window === "undefined") return;
+  const pathname = router.pathname;
+  const token = localStorage.getItem("accessToken");
+
+  if (!token && guardPath["token"][pathname]) {
+    router.push("/signin");
+    return;
+  }
+}


오호? 커스텀 훅으로 인가가 되지 않았을 때 접근을 방어하셨군요? 🫢

kiJu2 · 2024-07-01T17:47:12Z

shared/model/useAuthGuard.ts

+    token: { "/folder/[[...folderId]]": true },
+    notToken: { "/signin": true },


만약, signup도 화이트 리스트(notToken)에 추가하고 싶다면?

만약 singup페이지도 추가하고 싶다면 코드에 변경이 필요할 것 같아요. 화이트 리스트는 보편적으로 배열로 관리하기에, 배열로 만들어두는게 어떨까요?

kiJu2 · 2024-07-01T17:49:15Z

shared/model/useAuthGuard.ts

+    token: { "/folder/[[...folderId]]": true },
+    notToken: { "/signin": true },


그리고 변수명 제안드립니당 😉:

Suggested change

token: { "/folder/[[...folderId]]": true },

notToken: { "/signin": true },

requireLoggedIn: { "/folder/[[...folderId]]": true },

requireLoggedOut: { "/signin": true },

kiJu2 · 2024-07-01T17:50:49Z

queries/link/useGetLinklist.ts

+const key = {
+  linkList: () => ["users/1/links"],
+};


함수로 만든 이유가 있을까요?

Suggested change

const key = {

linkList: () => ["users/1/links"],

};

const key = {

linkList: ["users/1/links"],

};

값이므로 배열 값으로 충분할 것 같아요 !

혹은 다음과 같이 동적으로 작성할 수도 있을 것 같아요:

Suggested change

const key = {

linkList: () => ["users/1/links"],

};

const key = {

linkList: (id: string) => ['users', id, 'links'],

};

kiJu2 · 2024-07-01T17:54:52Z

widgets/signin/api/signinApi.ts

+
+export const signinApi = async (data: { email: string; password: string }) => {
+  const res = await apiInstance.post("sign-in", data);
+  if (!res) return;


API 통신부에서 에러가 났을 때 어떻게 대처하면 될까요?

제가 예상하는 문제는 로그인을 하는데 "이미 등록된 아이디임"과 "아이디에 특수문자 들어가면 안됨" 이라는 에러 UI를 출력한다고 생각해봅시다..!

현재 error를 그냥 undefined로 반환해주고 있기에 해당 함수를 사용하는 컴포넌트에서는 분기처리하기 힘들거예요 !

그렇다면 어떻게 할까요?

방법은 다양합니다만, 지금 바로 해볼 수 있는 방법은 throw를 해보는거예요:

Suggested change

if (!res) return;

try {

} catch (error) {

console.error(`Failed to fetch data: ${error}`); // 통신부에서 처리할 로직 및 로깅

throw(error);

}

위처럼 throw를 해준다면 서버에서 보내준 에러의 메시지를 사용자에게 toast든, 모달이든, 알러트든 보여줄 수 있겠죠?

다음과 같이요 !!:

// Component useEffect(() => { try { getItemsComments(); // 이어서.. } catch (err) { alert(err.message) } }, [])

kiJu2 · 2024-07-01T17:55:25Z

widgets/signin/api/signinApi.ts

+import apiInstance from "@/shared/model/axios";
+
+export const signinApi = async (data: { email: string; password: string }) => {
+  const res = await apiInstance.post("sign-in", data);


반환 타입을 지정해볼까요?:

Suggested change

const res = await apiInstance.post("sign-in", data);

const res = await apiInstance.post<SignInResponse>("sign-in", data);

제네릭으로 위와 같이 반환 타입을 지정할 수 있습니다 !

kiJu2 · 2024-07-01T17:57:28Z

widgets/signin/model/signin.ts

+
+  localStorage.setItem("accessToken", result.data.accessToken);
+  window.location.replace("/folder");
+  console.log("signin");


console.log를 남기게 되면 추 후 디버깅이 어려울 수 있습니다 !:

git add {path} -p 옵션

git add . -p를 사용하게 되면 변경사항을 스테이징에 올릴 때 파일 내 코드 단위로 잘라서 올릴 수 있습니다 ! 상당히 유용하므로 히스토리를 신경쓰신다면 꼭 사용해보세요 😊

어떻게 사용하지?

git add . -p

kiJu2 · 2024-07-01T17:57:51Z

widgets/signin/model/signin.ts

+  localStorage.setItem("accessToken", result.data.accessToken);
+  window.location.replace("/folder");


해당 함수는 클라이언트 사이드에서만 사용할 수 있겠군요? 🤔

kiJu2 · 2024-07-01T18:00:17Z

수고하셨습니다 민섭님 !! 😊
변경사항이 깔끔해서 집중해서 리뷰할 수 있었어요 !
그리고 FSD 아키텍쳐를 적용해보신 것 같아요. 도전성이 좋으시군요 😉👍

striker1826 added 2 commits May 24, 2024 13:27

법균님 보세요

f9a47ea

refactor: week19 제출

dfcb7c3

striker1826 requested a review from kiJu2 July 1, 2024 04:53

striker1826 added the 순한맛🐑 마음이 많이 여립니다.. label Jul 1, 2024

kiJu2 approved these changes Jul 1, 2024

View reviewed changes

kiJu2 merged commit 65bb9c0 into codeit-bootcamp-frontend:part3-김민섭 Jul 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Part3 김민섭 week19 제출 #497

Part3 김민섭 week19 제출 #497

striker1826 commented Jul 1, 2024

kiJu2 commented Jul 1, 2024

kiJu2 commented Jul 1, 2024

kiJu2 commented Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 Jul 1, 2024

kiJu2 commented Jul 1, 2024

	const { data: userData } = useQuery(useGetUserInfo.queryOptions());
	const { data: userData } = useQuery({ queryFn: userQueries.getUser, queryKey: userQueryKeys.getUser });

		token: { "/folder/[[...folderId]]": true },
		notToken: { "/signin": true },

-  if (!res) return;
+  try {
+  } catch (error) {
+    console.error(`Failed to fetch data: ${error}`); // 통신부에서 처리할 로직 및 로깅
+    throw(error);
+  }

	const res = await apiInstance.post("sign-in", data);
	const res = await apiInstance.post<SignInResponse>("sign-in", data);

		localStorage.setItem("accessToken", result.data.accessToken);
		window.location.replace("/folder");

Part3 김민섭 week19 제출 #497

Part3 김민섭 week19 제출 #497

Conversation

striker1826 commented Jul 1, 2024

주요 변경사항

멘토에게

kiJu2 commented Jul 1, 2024

kiJu2 commented Jul 1, 2024

커밋이 한꺼번에 많이 올려드려서 죄송합니다.

기존 코드 리펙토링을 중점적으로 진행했습니다.

kiJu2 commented Jul 1, 2024

commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?

그럼 커밋을 언제 해야 할까요?

관련하여 읽으시면 좋은 아티클을 추천드릴게요:

tl;dr

또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:

tl;dr:

Choose a reason for hiding this comment

해당 객체는 hook으로 보이지 않습니다 !:

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

만약, signup도 화이트 리스트(notToken)에 추가하고 싶다면?

Choose a reason for hiding this comment

그리고 변수명 제안드립니당 😉:

Choose a reason for hiding this comment

함수로 만든 이유가 있을까요?

혹은 다음과 같이 동적으로 작성할 수도 있을 것 같아요:

Choose a reason for hiding this comment

API 통신부에서 에러가 났을 때 어떻게 대처하면 될까요?

그렇다면 어떻게 할까요?

다음과 같이요 !!:

Choose a reason for hiding this comment

반환 타입을 지정해볼까요?:

Choose a reason for hiding this comment

console.log를 남기게 되면 추 후 디버깅이 어려울 수 있습니다 !:

git add {path} -p 옵션

어떻게 사용하지?

Choose a reason for hiding this comment

해당 함수는 클라이언트 사이드에서만 사용할 수 있겠군요? 🤔

kiJu2 commented Jul 1, 2024

해당 객체는 `hook`으로 보이지 않습니다 !:

만약, `signup`도 화이트 리스트(`notToken`)에 추가하고 싶다면?

`console.log`를 남기게 되면 추 후 디버깅이 어려울 수 있습니다 !:

`git add {path} -p` 옵션