코드리뷰 용 PR by Arooming · Pull Request #2 · Arooming/github-follow-detector

Arooming · 2024-04-13T16:10:04Z

📌 react-query 커스텀 훅

(1) `libs > hook > useGetUserInfo()`

토큰을 입력한 사용자의 정보를 불러오는 커스텀 훅
에러 발생 시, 세션 스토리지에 저장된 토큰 값을 버리고 홈으로 라우팅

(2) `libs > hook > useGetFollowInfo()`

사용자의 팔로우 목록을 불러오는 커스텀 훅
불러온 팔로우 목록을 가공하여 맞팔로우, 언팔로우 리스트 생성

(3) `libs > hook > usePutFollower()`

선택한 사용자를 팔로우 목록에 추가하는 커스텀 훅
putFollower 함수를 호출 → 데이터 패칭 성공 시, query-key에 해당하는 함수에 저장된 데이터를 날리고 새로운 데이터 refetch
즉, putFollower()에 데이터가 성공적으로 패칭된 경우, 팔로워를 불러오는 함수에 저장된 팔로우 목록을 지우고, 새로운 팔로우 목록을 불러오도록 함.

(4) `libs > hook > useDeleteFollower()`

선택한 사용자를 팔로우 목록에서 삭제하는 커스텀 훅
usePutFollower()와 같은 방식으로 구현함.
- deleteFollower 함수를 호출 → 데이터 패칭 성공 시, query-key에 해당하는 함수에 저장된 데이터를 날리고 새로운 데이터 refetch
- 즉, deleteFollower()에 데이터가 성공적으로 패칭된 경우, 팔로워를 불러오는 함수에 저장된 팔로우 목록을 지우고, 새로운 팔로우 목록을 불러오도록 함.

📌 트러블 슈팅

(1) full reload warning

새로고침 시, full reload 워닝 발생
- 편집 중인 파일 외의 다른 컴포넌트가 export 되고 있는 경우
- 컴포넌트의 이름이 PascalCase가 아닌 camelCase인 경우
위와 같은 경우 해당 워닝이 발생할 수 있음을 파악
- camelCase로 정의했던 컴포넌트 이름을 PascalCase로 수정하여 이슈 해결
참고: 🔗 https://nextjs.org/docs/messages/fast-refresh-reload

(2) The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead

images.domains → images.remotePatterns로 변경하여 사용하라는 경고

프로토콜, 호스트 이름으로 나눠 정의함.

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "avatars.githubusercontent.com",
      },
      {
        protocol: "https",
        hostname: "localhost",
      },
    ],
  },
};

참고 1: 🔗 https://stackoverflow.com/questions/75002714/next-js-can-i-configure-multiple-image-hostnames-in-next-config-js
참고 2: 🔗 https://nextjs.org/docs/messages/next-image-unconfigured-host

(3) browser caching 으로 인해 최신 데이터를 받아오지 못하는 이슈

캐싱 비활성화를 위해 Cache-Control 설정 → CORS 에러 발생
- If-None-Match를 활용하여 에러 해결
```
headers: {
      "If-None-Match": "",
      ...
}
```
  If-None-Match에 빈 값을 할당하여 서버에 캐싱된 값을 보내지 않도록 함.**

Yeonseo-Jo

짧은 기간에 한건데 너무너뮤너무 디테일하게 잘 구현했네용😎!!!
저번 구현사항에 대한 피드백도 잘 담겨 있어서 더 좋은것 가타요~
고생 많아써 ~~

Yeonseo-Jo · 2024-04-15T15:34:56Z

common/CommonLayout.tsx

+import Header from "./Header";
+const inter = Inter({ subsets: ["latin"] });
+
+const queryClient = new QueryClient();


nextjs에서 root layout 계층에 선언하는 queryClient는, 성능적인 측면과 참조 동일성 유지(라이프사이클에서 한 번만 초기화 될 수 있도록)를 위해 useState를 사용해 설정해주는게 좋다고 합니다!

참고한 자료 링크도 함께 남겨요~

오!! 참고해볼게요 감사합니다 !

Yeonseo-Jo · 2024-04-15T15:36:40Z

app/layout.tsx

+      <CommonLayout>
+        <body className={inter.className}>{children}</body>
+      </CommonLayout>


CommonLayout이 body 태그로 이루어져 있는데, 하위에 body 태그가 또 있어서 중복 코드 같습니다!
폰트 provide 해주는 body 태그까지 한번에 CommonLayout에 넣어주고 여기 body 태그는 삭제하면 더 좋을것 같습니당💪🏻

Suggested change

<CommonLayout>

<body className={inter.className}>{children}</body>

</CommonLayout>

<CommonLayout>

{children}

</CommonLayout>

Yeonseo-Jo · 2024-04-15T16:12:46Z

app/page.tsx

+  };
+
+  return (
+    <main className={styles.HomeWrapper}>


요기는 vanilla extract의 css 정의 네이밍이 PascalCase로 되어 있네유
수정해주면 좋을것 같습니다!

Yeonseo-Jo · 2024-04-15T16:22:18Z

app/follow-list/page.tsx

+  const { isLoading: userInfoLoading, data: userInfoData } = useGetUserInfo();
+  const { isLoading: followInfoLoading, data: followInfoData } =


저는 여기서 두 useQuery문을 병렬적으로 실행하기 위해 useQueires문을 사용했는데요,
데이터 return 되는 타입이 복잡해진다는 단점이 있지만 loading, data 값을 한 번에 관리할 수 있고(tanstack query v5의 combine 문법 사용) 지금처럼 한 뷰에 보여져야 하는 데이터들을 병렬적으로 호출할 수 있다는 장점이 있는것 같습니다!

useQuries 공식 문서 링크 보고 한 번 비교해봐도 좋을것 가타요~

안 그래도 연서님 코드 리뷰하면서 useQueries에 대해 더 깊게 알아보고 또 직접 코드에 적용해봐야겠다고 생각했습니다!

useQuery를 사용하면서 쿼리 수가 증가함에 따라 loading과 data 값의 수 역시 함께 증가해서 관리가 복잡하다고 느꼈는데요..!
이런 상황에 사용하는게 useQueries인 것 같네요!! 참고하겠습니당 :)

Yeonseo-Jo · 2024-04-15T16:23:33Z

app/follow-list/page.tsx

+  const { isLoading: followInfoLoading, data: followInfoData } =
+    useGetFollowInfo();
+
+  return userInfoLoading || followInfoLoading ? (


isLoading이라는 것을 판단하는 변수를 만들어서 써주면 더 직관적일것 같아요!

Suggested change

return userInfoLoading || followInfoLoading ? (

const isLoading = useInfoLoading || followInfoLoading

return isLoading ? (

Yeonseo-Jo · 2024-04-16T02:48:48Z

libs/hook/useDeleteFollower.ts

+      queryClient.invalidateQueries(["get-follow-info"]);
+    },
+  });
+  return mutation;


이 useMutation에서 사용되는것은 mutate 메서드이기 때문에,
return 자체를 mutation.mutate로 해줘도 좋을것 가타요!

Suggested change

return mutation;

return mutation.mutate;

Yeonseo-Jo · 2024-04-16T02:49:10Z

libs/hook/useGetFollowInfo.ts

+
+const useGetFollowInfo = () => {
+  const { isLoading, data } = useQuery({
+    queryKey: ["get-follow-info"],


queryKey는 상수 파일로 빼서 관리하면 더 좋을것 가타요!

Yeonseo-Jo · 2024-04-16T02:50:05Z

libs/hook/useGetUserInfo.ts

+    onError: () => {
+      alert("토큰을 정확히 입력해주세요.");
+      router.push("/");
+      sessionStorage.clear();


헙 에러 핸들링을 이렇게 커스텀 훅 내에서 해주는거 너무 좋아요!
저는 sessionStorage 지워주는 로직이 없는데 이거 참고해서 추가 해봐야겠어용✨

Yeonseo-Jo · 2024-04-16T02:56:04Z

component/FollowList.tsx

+              <p className={styles.title}>
+                {list === matchedList
+                  ? "맞팔 중인 사용자"
+                  : "내가 팔로우 안 한 사용자"}
+              </p>
+              <p className={styles.title}>{`${list.length} 명`}</p>
+            </div>
+
+            <ListLayout list={list} isUserInfo={false} isFollowingBtn={list !== matchedList} />


list === matchedList 로직을 여러 곳에서 사용하고 있는것 같아요!
플래그를 만들어줘서 활용하면 더 가독성이 좋아질것 같습니당

Suggested change

<p className={styles.title}>

{list === matchedList

? "맞팔 중인 사용자"

: "내가 팔로우 안 한 사용자"}

</p>

<p className={styles.title}>{`${list.length} 명`}</p>

</div>

<ListLayout list={list} isUserInfo={false} isFollowingBtn={list !== matchedList} />

const isMatchedList = list ===matchedList

<p className={styles.title}>

{isMatchedList

? "맞팔 중인 사용자"

: "내가 팔로우 안 한 사용자"}

</p>

<p className={styles.title}>{`${list.length} 명`}</p>

</div>

<ListLayout list={list} isUserInfo={false} isFollowingBtn={!isMtachedList} />

Yeonseo-Jo · 2024-04-16T02:58:32Z

common/ListLayout.tsx

+import Image from "next/image";
+import * as styles from "../style/Common/ListLayout.css";
+
+const ListLayout = ({ list, isUserInfo, isFollowingBtn }: ListLayoutTypes) => {


흐음 요건 개인적인 의견인데...
맞팔 중인 리스트 / 아닌 리스트를 구분해서 1) 버튼에 들어갈 텍스트 구분 2) mutate function 구분을 하는 플래그인 isFollowingBtn이 살짝 버튼 네이밍에 의존적인것 같아요...!
ListType 이런식으로 바꿔보면 더 가독성 있고, 내부 로직을 보여주지 않는 플래그 네이밍이 될수 있을것 같습니당!

Arooming added 30 commits March 29, 2024 20:50

init: nextjs 초기세팅

f4171e3

remove: 불필요한 파일 삭제

bc94f96

init: 파비콘 변경 및 프로젝트 초기화

4dba641

init: 초기세팅

7b236b1

init: 패키지 매니저 변경 및 라이브러리 재설치

92ccc44

style: reset.css 및 globalStyle 설정

bde244a

init: 패키지 매니저 변경

60b961f

chore: .gitignore 내용 추가

34842b0

feat: axios instance 및 interceptor 설정

1a4ca2f

test: 테스트 코드 작성

1b9767b

chore: 폴더 구조 변경

dfd8310

chore: npm install

2642ecd

feat: 공통 컴포넌트 적용

d128515

feat: 헤더 생성

7f4964b

feat: 팔로잉/ 팔로워 목록 불러오는 api

8f56101

feat: 커스텀 훅 생성

29826e4

feat: 타입 정의

646e07d

style: 공통 스타일 입히기

499be93

style: 로고 에셋 추가

273003f

style: 스타일 정의

04f854e

style: settings.json 수정

b8b741d

chore: 불필요한 코드 삭제

275e832

chore: .gitignore 내용 추가

a602313

feat: 홈화면 구현

9badc68

chore: 라이브러리 설치

691b826

style: 로티 에셋 추가

a00e1ac

feat: 로딩 컴포넌트 생성

85de9e4

style: settings.json 수정

e83a81d

fix: full reload 이슈 해결

1783a75

chore: 주석 추가

8f80ffb

Arooming and others added 26 commits April 10, 2024 12:51

feat: 팔로우/ 팔로잉 정보 불러오는 페이지

ca5bfac

feat: 컴포넌트 분기처리

1055837

feat: 팔로잉/ 팔로워 정보를 보여줄 컴포넌트

7baba10

feat: 토큰 입력한 사용자의 정보를 보여줄 컴포넌트

80533ee

feat: 사용자 프로필 정보 불러오는 api

cc83351

feat: 불필요한 코드 삭제

a43400f

feat: 타입 정의

56d5d66

feat: next/Image 관련 설정

224a147

feat: 사용자의 팔로우 목록을 보여주는 컴포넌트

8993136

feat: 공통 컴포넌트 분리

19a436d

feat: 공통 컴포넌트 분리 및 스타일링 적용

01fc2d8

style: 스타일 정의

3b44247

feat: 유저의 정보를 보여주는 컴포넌트

1028f71

chore: 불필요한 타입 삭제

a8f3e1c

feat: 팔로우/ 언팔로우 버튼 생성

b0bebc2

feat: 팔로우 수 표시

29753d0

chore: 타입 추가

0783d34

style: 스타일링 수정

d6e76c7

feat: 버튼 클릭 시 팔로우/ 언팔로우 기능 구현

9877220

feat: 언팔로우 api

9f2f8c5

feat: 팔로우 api

5cad9fd

chore: 디스크 캐시 관련 주석 추가 및 코드 변경

a06d3ac

chore: 불필요한 코드 삭제

b1b5a35

fix: image/domain deprecated 이슈 해결

1f38612

fix: CORS 에러 해결

cf65e20

Merge branch 'empty' into review

8a014af

Arooming self-assigned this Apr 13, 2024

Yeonseo-Jo reviewed Apr 16, 2024

View reviewed changes

		const { isLoading: userInfoLoading, data: userInfoData } = useGetUserInfo();
		const { isLoading: followInfoLoading, data: followInfoData } =

	return userInfoLoading \|\| followInfoLoading ? (
	const isLoading = useInfoLoading \|\| followInfoLoading
	return isLoading ? (

Conversation

Arooming commented Apr 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 react-query 커스텀 훅

(1) libs > hook > useGetUserInfo()

(2) libs > hook > useGetFollowInfo()

(3) libs > hook > usePutFollower()

(4) libs > hook > useDeleteFollower()

📌 트러블 슈팅

(1) full reload warning

(2) The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead

(3) browser caching 으로 인해 최신 데이터를 받아오지 못하는 이슈

Uh oh!

Yeonseo-Jo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Arooming Apr 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Arooming commented Apr 13, 2024 •

edited

Loading

(1) `libs > hook > useGetUserInfo()`

(2) `libs > hook > useGetFollowInfo()`

(3) `libs > hook > usePutFollower()`

(4) `libs > hook > useDeleteFollower()`

Arooming Apr 16, 2024 •

edited

Loading