[정진호] week19 #552

ayden94 · 2024-01-14T06:49:37Z

요구사항

[프로젝트 전반] https://bootcamp-api.codeit.kr/docs/linkbrary/v1 문서를 참고해 https://bootcamp-api.codeit.kr/api/linkbrary/v1 api를 활용했나요?
[프로젝트 전반] api 요청에 TanStack React Query를 활용했나요?
[로그인, 회원가입 페이지] 로그인은 POST ‘/auth/sign-in’ 을 활용했나요?
[로그인, 회원가입 페이지] 회원가입은 POST ‘/auth/sign-up’ 을 활용했나요?
[로그인, 회원가입 페이지] 이메일 중복확인은 POST ‘/users/check-email’ 을 활용했나요?
[링크 공유 페이지] 폴더의 정보는 GET ‘/folders/{folderId}’, 폴더 소유자의 정보는 GET ‘/users/{userId}’를 활용했나요?
[링크 공유 페이지] 폴더의 링크 데이터는 GET ‘/folders/{folderId}/links’ 를 활용했나요?
[링크 공유 페이지] 유효한 access token이 있는 경우 GET ‘/users’ 로 현재 로그인한 유저 정보를 받아 상단 네비게이션 유저 프로필을 보여 주나요?
[링크 공유 페이지] 유효한 access token이 없는 경우 “로그인” 버튼을 보여 주나요?
[폴더 페이지] 폴더 페이지에서 현재 유저의 폴더 목록 데이터는 GET ‘/folders’ 를 활용했나요?
[폴더 페이지] 폴더 페이지에서 전체 링크 데이터를 받아올 때 GET ‘/links’, 특정 폴더의 링크를 받아올 때 GET ‘/folders/{folderId}/links’를 활용했나요?
[모달] 폴더 이름 변경은 ‘PUT /folders/{folderId}’를 활용했나요?
[모달] 폴더 생성은 ‘POST /folders’를 활용했나요?
[모달] 폴더 삭제는 ‘DELETE /folders/{folderId}’를 활용했나요?
[모달] 링크 삭제는 ‘DELETE /links/{linkId}’를 활용했나요?
[모달] 링크 생성은 ‘POST /links’를 활용했나요?

han-kimm

+3,211 은 멘토님한테 가혹한듯

han-kimm · 2024-01-14T10:03:56Z

apis/queryClientProvider.ts

복붙의 향기가 느껴진다.. 여기 taskify인가요?

han-kimm · 2024-01-14T10:06:25Z

apis/queryClientProvider.ts

+      folderData.data.forEach(async (data) => {
+        const folder_Id = data.id;
+
+        await queryClient.prefetchQuery({
+          queryKey: ["Links", folder_Id],
+          queryFn: () =>
+            fetcher<Link[]>({
+              method: "get",
+              url: `/folders/${folder_Id}/links`,
+              headers: { Authorization: accessToken },
+            }),
+        });
+      });
+    }


ㅋㅋㅋㅋ SSR을 국물 한 모금도 안 남기고 사용하려는 거 같아서 웃겨요
forEach로 폴더별 링크까지 싸그리싹싹 가져온다..

han-kimm · 2024-01-14T10:15:06Z

components/Binder/Binder.tsx

+      link.url?.toLowerCase().includes(searchValue.toLowerCase()) ||
+      link.title?.toLowerCase().includes(searchValue.toLowerCase()) ||
+      link.description?.toLowerCase().includes(searchValue.toLowerCase())


이거 배열로 처리하면 코드 중복 줄어요~

[link.url, link.title, link,description] .map(value => value.toLowerCase()) .some(value => value.includes(searchValue.toLowerCase()))

참고로 배열 메서드도 Promise .then 체이닝처럼 엔터키 치고 줄마다 메서드 써도 됩니당

han-kimm · 2024-01-14T10:17:49Z

components/indexComponents/ServiceExplainer/ExplainerList.tsx

+import styles from "./ServiceExplainer.module.css";
+import { ReactNode } from "react";
+
+class ExplainerSection {


갑자기 여기서 클래스를 쓴다고여

han-kimm · 2024-01-14T10:20:08Z

components/indexComponents/ServiceExplainer/ServiceExplainer.tsx

+function ServiceExplainer() {
+  return (
+    <main>
+      {ExplainerList.map((Item) => {


taskify 할때도 useInputControler에서 지독했었는데,
이 남자의 객체 사랑 미쳣다

han-kimm · 2024-01-14T10:20:53Z

components/input/Input.tsx

이 파일도 taskify의 향기가 난다..

kiJu2 · 2024-01-17T11:59:50Z

늦어서 죄송합니다 !! 속결로 꼼꼼하게 쏙쏙 파내서 코드리뷰 진행하겠습니다 !
수고 많으셨습니다 진호님 😊😊😊

kiJu2 · 2024-01-17T13:28:27Z

indexComponents가 혹시 root pages에서 사용되는 components를 의미하는 걸까요?
만약 그렇다면 pages 루트에 components를 만들고 안에 보관하는게 어떨까요?

기본적으로 진호님께서 특정 pages 내부에서만 사용되는 건 로컬 components로 만드신 것 같아서요 =)

kiJu2 · 2024-01-17T11:59:17Z

apis/instance.ts

+export const request = (config: AxiosRequestConfig) => {
+  const client = instance;
+  return client(config);
+};


현재 코드에서 client를 선언하는 것은 의미가 없어보입니다 !

Suggested change

export const request = (config: AxiosRequestConfig) => {

const client = instance;

return client(config);

};

export const request = (config: AxiosRequestConfig) => {

return instance(config);

};

kiJu2 · 2024-01-17T12:07:10Z

apis/queryClientProvider.ts

+      });
+
+      folderData.data.forEach(async (data) => {
+        const folder_Id = data.id;


일관된 코드 컨벤션을 사용하시는게 좋을 것 같아요 !

Suggested change

const folder_Id = data.id;

const folderId = data.id;

kiJu2 · 2024-01-17T12:09:53Z

apis/instance.ts

+
+const instance = axios.create({
+  baseURL: "https://bootcamp-api.codeit.kr/api/linkbrary/v1",
+  timeout: 10000,


ㅗㅜㅑ 타임아웃까지 설정하시는 디테일 ~ 좋습니다 👍

kiJu2 · 2024-01-17T12:34:43Z

apis/queryClientProvider.ts

+export const queryClientProvider = async (context: GetServerSidePropsContext) => {
+  const queryClient = new QueryClient();
+
+  const accessToken = getAccessToken(context) as string;


타입 어설션을 사용하지 않고 반환 타입을 명시하는게 어떨까요?

Suggested change

const accessToken = getAccessToken(context) as string;

const accessToken = getAccessToken(context);

// getAccessToken.ts import { GetServerSidePropsContext } from "next"; export const getAccessToken = (context: GetServerSidePropsContext): string => { const accessToken = context.req.cookies["accessToken"]; return accessToken ?? ""; };

진호님이라면 아실 수 있지만 타입스크립트에서는 흔히 도는 말이 있습니다!

any 타입을 사용하지 말 것.

타입 어설션을 사용하지 말 것.

물론 생산성을 위해서 사용될 수도 있지만 사용 안하는걸 인지하고 있는 것도 좋을 것 같아서 제안드립니다 =)
만약 앞으로 타입 어설션을 사용하지 않으려 할 때 문제가 생긴다면 타입 가드가 유용한 대체가 될 수 있습니다.

참고 자료

kiJu2 · 2024-01-17T12:36:40Z

business/sign/signError.ts

+const errorText = {
+  email: {
+    null: "이메일을 입력해주세요",
+    wrong: "올바른 이메일 주소가 아닙니다",
+    dup: "이미 사용 중인 이메일입니다",
+  },
+  password: {
+    null: "비밀번호를 입력해주세요",
+    wrong: "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요",
+  },
+  passwordCheck: {
+    wrong: "비밀번호가 일치하지 않아요",
+  },
+};


밸리데이션 문구를 따로 빼놓으셨군요 👍 가독성 측면에서 매우 좋습니다.

다음에는 유효성 검사 툴인 joi를 사용해보는 것도 추천드려요 !

kiJu2 · 2024-01-17T13:17:28Z

hooks/useInput.tsx

+    setEyesValue((current) => !current);
+  };
+
+  const typeChanger = (type: string | undefined) => {


함수 명은 동사로 짓는게 좋습니다 !
changeType으로 바꾸는 것이 어떨까요?

kiJu2 · 2024-01-17T13:18:59Z

hooks/useInput.tsx

+  name?: string;
+  initialvalue?: string;
+  eyeButton?: boolean;
+  placeholder?: string | undefined;


타입에 ?가 있으면 undefined가 유니언 타입(|)과 같은 문법입니다.

Suggested change

placeholder?: string | undefined;

placeholder?: string;

kiJu2 · 2024-01-17T13:21:57Z

hooks/useToggle.tsx

+
+function useToggle() {
+  const [state, setState] = useState(false);
+
+  const handleToggle = (e: MouseEvent) => {
+    e.preventDefault();
+    setState((state) => !state);
+  };
+
+  return { state, handleToggle };
+}


심플하고 깔끔한 유틸 훅 😊

kiJu2 · 2024-01-17T13:25:30Z

components/indexComponents/HeroSec/HeroSec.tsx

+import styles from "./HeroSec.module.css";
+import TextGradiant from "@/components/TextGradiant/TextGradiant";
+
+function HeroSec() {


약어 보다는 풀네임을 사용하시는걸 권장드립니다 !
자칫 닌자 코드이 될 수 있습니다 ! 👺👺

kiJu2 · 2024-01-17T13:30:18Z

next.config.js

-  reactStrictMode: true,
+
+module.exports = {
+  reactStrictMode: false,


혹시 스트릭트 모드 해제한 이유가 있으실까요?

ayden94 added 2 commits January 14, 2024 15:29

feat(Axios + React Query) : 새로운 방식으로 API 통신

dc78658

feat(instance.ts) : timeout이 1000라서 post가 cancel되는 문제 해결

0c1d219

ayden94 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jan 14, 2024

Merge branch 'part3-정진호' into part3-정진호-week19

039d2c2

han-kimm reviewed Jan 14, 2024

View reviewed changes

kiJu2 self-requested a review January 17, 2024 12:00

kiJu2 merged commit e5ec22b into codeit-bootcamp-frontend:part3-정진호 Jan 17, 2024

kiJu2 reviewed Jan 17, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[정진호] week19 #552

[정진호] week19 #552

ayden94 commented Jan 14, 2024

han-kimm left a comment

han-kimm Jan 14, 2024

han-kimm Jan 14, 2024

han-kimm Jan 14, 2024

han-kimm Jan 14, 2024

han-kimm Jan 14, 2024

han-kimm Jan 14, 2024

kiJu2 commented Jan 17, 2024

kiJu2 commented Jan 17, 2024

kiJu2 Jan 17, 2024

kiJu2 Jan 17, 2024

kiJu2 Jan 17, 2024

kiJu2 Jan 17, 2024

kiJu2 Jan 17, 2024

kiJu2 Jan 17, 2024

kiJu2 Jan 17, 2024

kiJu2 Jan 17, 2024

kiJu2 Jan 17, 2024

kiJu2 Jan 17, 2024

	const accessToken = getAccessToken(context) as string;
	const accessToken = getAccessToken(context);

[정진호] week19 #552

[정진호] week19 #552

Conversation

ayden94 commented Jan 14, 2024

요구사항

han-kimm 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

kiJu2 commented Jan 17, 2024

kiJu2 commented Jan 17, 2024

Choose a reason for hiding this comment

현재 코드에서 client를 선언하는 것은 의미가 없어보입니다 !

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

타입에 ?가 있으면 undefined가 유니언 타입(|)과 같은 문법입니다.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

현재 코드에서 `client`를 선언하는 것은 의미가 없어보입니다 !

타입에 `?`가 있으면 `undefined`가 유니언 타입(`|`)과 같은 문법입니다.