[김보미] sprint11 #670

Kbomi16 · 2024-06-14T03:10:54Z

요구사항

기본

회원가입

유효한 정보를 입력하고 스웨거 명세된 “/auth/signUp”으로 POST 요청해서 성공 응답을 받으면 회원가입이 완료됩니다.
회원가입이 완료되면 “/login”로 이동합니다.
회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.

로그인

회원가입을 성공한 정보를 입력하고 스웨거 명세된 “/auth/signIn”으로 POST 요청을 하면 로그인이 완료됩니다.
로그인이 완료되면 로컬 스토리지에 accessToken을 저장하고 “/” 로 이동합니다.
로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.

메인

로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.

심화

로그인, 회원가입 기능에 react-hook-form을 활용해봅니다.

주요 변경사항

.env 파일 git에서 제거했습니다.
기존에는 state로 폼 관리하다가 이번에 리액트 훅 폼으로 변경했습니다.. 확실히 코드가 짧아지니 기분이 좋습니다..ㅎㅎ 익숙해지면 유용하게 잘 쓸 것 같습니다!
테일윈드 색상 변수명 config파일에 옮겼습니다.
인터셉터 설정해서 refreshToken으로 accessToken 갱신하도록 했습니다.

스크린샷

멘토에게

저번 미션과 이어지는 미션(로그인 유무에 따라 게시글, 댓글 등록하기)이라 Next.js로 구현했습니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

Kbomi16 · 2024-06-14T03:14:51Z

lib/axiosGetInstance.ts

+import axios from "axios";
+
+const axiosGetInstance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+});
+
+export default axiosGetInstance;


한 파일에서 동일한 instance를 사용하면 에러가 나더라구요.. POST요청을 할 때 인터셉터를 설정해야 해서, GET instance를 분리했습니다.

오잉 혹시 어떤 문제가 있었던가요 ?

Failed to load resource: the server responded with a status of 404 (Not Found)

boards/id로 이동하면 404페이지 뜹니다... 따로 분리하니까 잘 들어가지더라구요,,, 왜 오류나는지는 모르겠습니돠..! ㅠ

Kbomi16 · 2024-06-14T03:18:36Z

components/Header.tsx

  useEffect(() => {
    const token = localStorage.getItem("accessToken");
-    setAccessToken(token);
-  }, []);
+    if (token) {
+      setAccessToken(token);
+    }
+  }, [router.pathname]);


전에 로그인 후 바로 적용이 안 되는 이슈가 있어서 reload()를 썼었는데 의존성 배열에 router.pathname을 넣으면 바로 반영되도록 수정했습니다.

이렇게 되면 리다이렉트 시 변경을 감지하고 리렌더링 시켜주는 걸까요?

일단 논리적으로는 맞는 말이지만 근본적이진 못할 수 있을 것 같아요.
Context API를 통하여 헤더가 상태를 관리하고 있다면 어떨까요?

Kbomi16 · 2024-06-14T03:23:01Z

components/Pagination.tsx

+  const pages = useMemo(
+    () => Array.from({ length: totalPages }, (_, i) => i + 1),
+    [totalPages],
+  );


멘토님께서 저번 미션 때 메모이제이션을 추천해주셔서 처음으로 사용해봤습니다. 사실, 메모이제이션에 대해 깊이 이해하지는 못했고, 리액트도 아직 익숙하지 않아서 메모이제이션이 다소 어렵게 느껴졌습니다. 언제 사용하는 것이 좋을지 판단하는 것도 쉽지 않네요..ㅎㅎ..

ㅎㅎㅎ 그쵸. 다음 아티클을 읽어보세요 !

[https://kentcdodds.com/blog/usememo-and-usecallback](useMemo and useCallback)

kiJu2 · 2024-06-17T04:43:18Z

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

kiJu2 · 2024-06-17T04:43:49Z

저번 미션과 이어지는 미션(로그인 유무에 따라 게시글, 댓글 등록하기)이라 Next.js로 구현했습니다.

넵넵! 좋습니다 😊

kiJu2 · 2024-06-17T04:45:29Z

api/api.ts

+    const params = new URLSearchParams({
+      pageSize: "10000",
+      orderBy: "recent",
+    });
+
+    const { data } = await axiosGetInstance.get("/articles?", { params });


굳굳 ! 훨신 깔끔해졌네요 😊

Suggested change

const params = new URLSearchParams({

pageSize: "10000",

orderBy: "recent",

});

const { data } = await axiosGetInstance.get("/articles?", { params });

const params = new URLSearchParams({

pageSize: "10000",

orderBy: "recent",

});

const { data } = await axiosGetInstance.get("/articles", { params });

위와 같이 ?는 지워도 될 것으로 보여요 !

kiJu2 · 2024-06-17T04:46:32Z

api/api.ts

+      headers: {
+        "Content-Type": "multipart/form-data",
+        Authorization: `Bearer ${token}`,
+      },
+    });


여기만 Content-Type이 달라서 이렇게 처리하셨군요 👍👍

kiJu2 · 2024-06-17T04:47:52Z

api/api.ts

+  } catch (error) {
+    console.error("postArticleComments 함수에서 오류 발생:", error);
+  }


오잉? 이렇게 되면 함수 반환타입이 void이거나 any가 될 것으로 보입니다 !

Suggested change

} catch (error) {

console.error("postArticleComments 함수에서 오류 발생:", error);

}

} catch (error) {

console.error("postArticleComments 함수에서 오류 발생:", error);

throw error;

}

만약 에러가 발생하면 컴포넌트에서 캐치하여 처리해야하지 않을까요?

kiJu2 · 2024-06-17T04:48:35Z

api/api.ts

+    const { data } = await axiosGetInstance.get(
+      `/articles?&pageSize=${pageSize}`,
+      {
+        params,
+      },


반환 타입도 지정해보면 어떨까요?

Suggested change

const { data } = await axiosGetInstance.get(

`/articles?&pageSize=${pageSize}`,

{

params,

},

const { data } = await axiosGetInstance.get<GetBestPosts>(

`/articles?&pageSize=${pageSize}`,

{

params,

},

kiJu2 · 2024-06-17T04:50:05Z

components/Header.tsx

  useEffect(() => {
    const token = localStorage.getItem("accessToken");
-    setAccessToken(token);
-  }, []);
+    if (token) {
+      setAccessToken(token);
+    }
+  }, [router.pathname]);


이렇게 되면 리다이렉트 시 변경을 감지하고 리렌더링 시켜주는 걸까요?

일단 논리적으로는 맞는 말이지만 근본적이진 못할 수 있을 것 같아요.
Context API를 통하여 헤더가 상태를 관리하고 있다면 어떨까요?

kiJu2 · 2024-06-17T04:56:39Z

lib/axios.ts

+
+    // accessToken이 존재하는 경우, 헤더에 추가
+    if (accessToken) {
+      config.headers["Content-Type"] = "application/json";


Content-Type은 처음 createInstance 하실 때 넣어두셔도 됩니다 !

kiJu2 · 2024-06-17T04:56:56Z

lib/axiosGetInstance.ts

+import axios from "axios";
+
+const axiosGetInstance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+});
+
+export default axiosGetInstance;


오잉 혹시 어떤 문제가 있었던가요 ?

kiJu2 · 2024-06-17T04:57:52Z

pages/signup.tsx

+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors, isValid },
+  } = useForm<FormData>({
+    mode: "onChange",
+  });


굳굳 ! react hook form을 사용하셨군요 !

훌륭한 비제어 컴포넌트 툴이지요 ! 👍

kiJu2 · 2024-06-17T04:58:20Z

tailwind.config.js

+        main: "#3692ff",
+        error: "#f74747",
+        gray: {
+          50: "#f7f7f8",
+          100: "#e8ebed",
+          200: "#e5e7eb",
+          400: "#9ea4a8",
+          500: "#72787f",
+          600: "#454c53",
+          700: "#374151",
+          800: "#26282b",
+          900: "#1b1d1f",
+        },
+        coolgray: {
+          50: "#f9fafb",
+          100: "#f3f4f6",
+          800: "#1f2937",
+        },
+        btn: {
+          1: "#3692ff",
+          2: "#1967d6",
+          3: "#1251aa",
+          4: "#9ca3af",
+        },
+        bannerbg: "#cfe5ff",
+        loginbg: "#e6f2ff",
+        footer: "#111322",
+        footercodeit: "#676767",
+        borderbottom: "#e5e7eb",
+        fontcolor: "#6b7280",


굳굳 ! 테마를 이번 시간에 다 정의해두셨군요 !

앞으로 브랜딩 컬러를 사용할 때 정말 유용하겠어요 !

kiJu2 · 2024-06-17T04:58:59Z

tailwind.config.js

+        gray: {
+          50: "#f7f7f8",
+          100: "#e8ebed",
+          200: "#e5e7eb",
+          400: "#9ea4a8",
+          500: "#72787f",
+          600: "#454c53",
+          700: "#374151",
+          800: "#26282b",
+          900: "#1b1d1f",
+        },


이렇게 정의할 수도 있었군요 🤔🤔

덕분에 하나 알아갑니다 ! 👍

kiJu2 · 2024-06-17T05:01:59Z

보미님 코드를 보면 항상 깔끔하고 읽기가 쉬운게 느껴져요 ㅎㅎㅎ
정말 수고 많으셨습니다 보미님.
리뷰 중 궁금하신거 있으시면 사전 질의를 통해서 남겨주시거나 멘토링 미팅 때 질문주세요 ㅎㅎㅎ

Kbomi16 added 23 commits June 12, 2024 15:46

📦 chore: env 파일 gitignore 추가

016f847

📦 chore: env파일 git에서 제거

bbb8b6d

♻️ refactor: axios URLSearchParams 추가

aa7c6a7

🔥 remove: 장식 이미지 빈 alt 로 설정

c4a9dfc

♻️ refactor: 테일윈드 공통 변수 재적용

358bb04

📝 docs: 미션11 README 업데이트

6198fb2

♻️ refactor: 페이지네이션 useMemo

399dc64

♻️ refactor: post api 분리

76c942f

📦 chore: react-hook-form 설치

37ac08b

♻️ refactor: react-hook-form 으로 변경

bcb1f56

✨ feat: 회원가입 시 로그인 페이지로 이동

0964c90

♻️ refactor: 새로고침 안 하고 바로 반영하기

02ebb7a

♻️ refactor: 댓글 등록시 바로 반영

429dbd0

📝 docs: 심화 요구사항 업데이트

a18ba75

♻️ refactor: axios interceptor 추가

d1022fe

♻️ refactor: 로그인시 refresh 토큰 받기

8ad9474

♻️ refactor: get instance 분리

ffe2c50

♻️ refactor: get instance 분리

a695419

♻️ refactor: 로그아웃시 refreshToken 제거

90f8377

✨ feat: 로그아웃시 메인으로 이동

c8a1e4b

♻️ refactor: axios 인터셉터 설정

aa189e9

🐛 fix: axios token 갱신

e42f9d7

💄 ui: 목록 버튼 호버 적용

690b18c

Kbomi16 self-assigned this Jun 14, 2024

Kbomi16 requested a review from kiJu2 June 14, 2024 03:11

Kbomi16 added the 순한맛🐑 마음이 많이 여립니다.. label Jun 14, 2024

Kbomi16 commented Jun 14, 2024

View reviewed changes

kiJu2 approved these changes Jun 17, 2024

View reviewed changes

kiJu2 merged commit f75ca7f into codeit-bootcamp-frontend:Next.js-김보미 Jun 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김보미] sprint11 #670

[김보미] sprint11 #670

Kbomi16 commented Jun 14, 2024 •

edited

Loading

Kbomi16 Jun 14, 2024

kiJu2 Jun 17, 2024

Kbomi16 Jun 17, 2024

Kbomi16 Jun 14, 2024

kiJu2 Jun 17, 2024

Kbomi16 Jun 14, 2024

kiJu2 Jun 17, 2024

kiJu2 commented Jun 17, 2024

kiJu2 commented Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 commented Jun 17, 2024

[김보미] sprint11 #670

[김보미] sprint11 #670

Conversation

Kbomi16 commented Jun 14, 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

kiJu2 commented Jun 17, 2024

kiJu2 commented Jun 17, 2024

저번 미션과 이어지는 미션(로그인 유무에 따라 게시글, 댓글 등록하기)이라 Next.js로 구현했습니다.

Choose a reason for hiding this comment

굳굳 ! 훨신 깔끔해졌네요 😊

Choose a reason for hiding this comment

여기만 Content-Type이 달라서 이렇게 처리하셨군요 👍👍

Choose a reason for hiding this comment

오잉? 이렇게 되면 함수 반환타입이 void이거나 any가 될 것으로 보입니다 !

Choose a reason for hiding this comment

반환 타입도 지정해보면 어떨까요?

Choose a reason for hiding this comment

이렇게 되면 리다이렉트 시 변경을 감지하고 리렌더링 시켜주는 걸까요?

Choose a reason for hiding this comment

Content-Type은 처음 createInstance 하실 때 넣어두셔도 됩니다 !

Choose a reason for hiding this comment

Choose a reason for hiding this comment

굳굳 ! react hook form을 사용하셨군요 !

Choose a reason for hiding this comment

굳굳 ! 테마를 이번 시간에 다 정의해두셨군요 !

Choose a reason for hiding this comment

이렇게 정의할 수도 있었군요 🤔🤔

kiJu2 commented Jun 17, 2024

Kbomi16 commented Jun 14, 2024 •

edited

Loading

여기만 `Content-Type`이 달라서 이렇게 처리하셨군요 👍👍

오잉? 이렇게 되면 함수 반환타입이 `void`이거나 `any`가 될 것으로 보입니다 !

`Content-Type`은 처음 `createInstance` 하실 때 넣어두셔도 됩니다 !