[김민재] Sprint11 #693

PixeIDark · 2024-06-14T13:08:05Z

요구사항

기본

회원가입

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

로그인

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

메인

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

심화

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

주요 변경사항

https://neview11.netlify.app/
interceptor에 401에러시 토큰을 업데이트하는 로직을 추가하고, AuthContext로 로그인과 유저를 관리했습니다.
스프린트 미션10에서는 댓글작성이 정상적으로 작동했는데, 미션11에서는 댓글이 10%의 확률로 작성성공 됩니다.. 원인을 모르겠지만 최대한 찾아보겠습니다.

스크린샷

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.

kiJu2 · 2024-06-17T07:58:43Z

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

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

스프린트 미션10에서는 댓글작성이 정상적으로 작동했는데, 미션11에서는 댓글이 10%의 확률로 작성성공 됩니다.. 원인을 모르겠지만 최대한 찾아보겠습니다.

...?! 메이플 주문서인가요..? 혹시 어떤 에러가 발생하나요 ..?

kiJu2 · 2024-06-17T07:59:16Z

interceptor에 401에러시 토큰을 업데이트하는 로직을 추가하고, AuthContext로 로그인과 유저를 관리했습니다.

크으 ~! 좋습니다. 확인해보져

kiJu2 · 2024-06-17T08:01:03Z

.env

@@ -0,0 +1 @@
+BASE_URL = https://panda-market-api.vercel.app


해당 파일은 프로젝트와 무관하므로 .gitignore에 다음과 같이 작성하시면 git의 추적을 무시할 수 있습니다.

.env

.gitignore에 env 파일을 추가해 주셨군요!

하지만 아직 github에서 확인되는 걸 보니 캐시를 지워줘야 할 것으로 보입니다 :)

git rm .env --chached

gitignore에 .env 파일을 추가해도 commit history에 env파일이 남아있게 됩니다!

git에 env파일을 완전히 지우려면 추가 작업이 필요해요 😂
아래 블로그를 참고해 보시면 좋을 것 같아요!

[Git] 실수로 올린 env 삭제하기 (commit history까지 완전 삭제)

kiJu2 · 2024-06-17T08:01:14Z

.gitignore

@@ -13,6 +13,8 @@
 /.next/
 /out/

+/.env


어라? .gitignore에 env 파일을 추가해 주셨군요!

하지만 아직 github에서 확인되는 걸 보니 캐시를 지워줘야 할 것으로 보입니다 :)

git rm .env --chached

gitignore에 .env 파일을 추가해도 commit history에 env파일이 남아있게 됩니다!

git에 env파일을 완전히 지우려면 추가 작업이 필요해요 😂
아래 블로그를 참고해 보시면 좋을 것 같아요!

[Git] 실수로 올린 env 삭제하기 (commit history까지 완전 삭제)

kiJu2 · 2024-06-17T08:02:15Z

src/apis/article/postArticles.ts

-      },
-    });
-    return data;
+    await axiosInstance.post<any>("/articles", payload);


우리 any를 하나하나 지워보도록 합시다 ~!

Suggested change

await axiosInstance.post<any>("/articles", payload);

await axiosInstance.post<PostArticleResponse>("/articles", payload);

혹은

Suggested change

await axiosInstance.post<any>("/articles", payload);

await axiosInstance.post<{success: boolean, id: string 등등..}>("/articles", payload);

/** * @todo 나중에 고쳐야됨 */

kiJu2 · 2024-06-17T08:03:48Z

src/apis/auth/PostRefreshToken.ts

-const PostRefreshToken = async (
-  refreshToken: string | null
-): Promise<string> => {
+const PostRefreshToken = async (refreshToken?: string): Promise<Token> => {


컴포넌트가 아닌 ts혹은 js 함수는 일반적으로 카멜케이스로 작성합니다:

Suggested change

const PostRefreshToken = async (refreshToken?: string): Promise<Token> => {

const postRefreshToken = async (refreshToken?: string): Promise<Token> => {

kiJu2 · 2024-06-17T08:04:23Z

src/apis/axiosInstance.ts

 const axiosConfig: AxiosRequestConfig = {
-  baseURL: "https://panda-market-api.vercel.app/",
+  baseURL: `${process.env.BASE_URL}`,


굳굳굳 ~! 환경 변수를 적용하셨군요 😊

kiJu2 · 2024-06-17T08:20:29Z

src/components/addBoardComponents/ArticleForm.tsx

+        <label className={labelBasicStyle}>
+          *제목
+          <input
+            name="title"
+            type="text"
+            value={postData.title}
+            onChange={onChangeInput}
+            className={inputRecipe()}
+            placeholder="제목을 입력해주세요"
+          />
+        </label>


굳굳 ~! label과 input을 연결했군요 ! 👍

kiJu2 · 2024-06-17T08:21:45Z

src/components/shared/Header/Header.tsx


 function Header() {
  const router = useRouter();
+  const [isToken, setIsToken] = useState<string | undefined>("");


다음과 같이 처리하면 string | undefined가 됩니다 !

Suggested change

const [isToken, setIsToken] = useState<string | undefined>("");

const [isToken, setIsToken] = useState<string>();

그리고 토큰이 빈 값인 경우는 "없음"이란 의미로 보기 어려울 것 같아요 ! 차라리 undefined로 들어가있으면 어떨까요?

kiJu2 · 2024-06-17T08:40:13Z

src/context/AuthProvider.tsx

+      const response = await postSignin(userData);
+      saveTokenToLocalStorage(response);
+      setUser(response.user as User);


API 함수에User 반환타입을 지정하는게 어떨까요?

Suggested change

const response = await postSignin(userData);

saveTokenToLocalStorage(response);

setUser(response.user as User);

const response = await postSignin(userData); // 여기서 User 타입을 반환

saveTokenToLocalStorage(response);

setUser(response.user);

흔히 타입스크립트에는 두 가지 금기사항이 있습니다 🤣:

any를 사용하지 말 것.

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

kiJu2 · 2024-06-17T08:43:09Z

src/context/AuthProvider.tsx

+  createAccount: async () => {},
+});
+
+function AuthProvider({ children }: AuthProviderProps) {


굳굳 ! Context로 유저 정보를 관리하고 있군요 👍👍👍

이렇게 하면 드릴링 없이, 어디서든 상태를 참조할 수 있겠어요 😊

혹시나.. 도움되실 수도 있을 것 같아서요.. ☺️

다음 코드는 이 전에 강의를 진행하며 작성했던 AuthContext 예시 코드입니다 😊:

import React, { createContext, useState } from "react"; type User = { accessToken: string; }; export const AuthContext = createContext<{ user: User | null; login: (accessToken: string) => void; logout: () => void; }>({ user: null, login: (accessToken: string) => {}, logout: () => {}, }); export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState<User | null>(null); const login = (accessToken: string) => { localStorage.setItem("accessToken", "123456"); document.cookie = `accessToken=${localStorage.getItem("accessToken")}`; setUser({ accessToken }); }; const logout = () => setUser(null); return ( <AuthContext.Provider value={{ user, login, logout }}> {children} </AuthContext.Provider> ); } export const useAuth = () => React.useContext(AuthContext);

참고만 해주세요 =)

감사합니다! 참고해봤더니 코드가 더 깔끔해졌습니다.

kiJu2 · 2024-06-17T08:46:25Z

src/context/AuthProvider.tsx

+    if (
+      (router.pathname === "/signin" || router.pathname === "/signup") &&
+      accessToken
+    ) {
+      router.push("/");
+    }


이렇게 되면 잠깐의 깜빡임이 있겠군요 🤔

리액트 앱이 띄워지고 로컬 스토리지에서 확인하고 pathname을 확인한 후에 리다이렉트를 시키면 깜빡임이 있겠군요.
추 후 쿠키로 관리하고 서버사이드에서 클라이언트가 요청했을 때 redirect처리를 해준다면 많은 비용을 아낄 수 있을거예요.

const notAllowed = (router.pathname === "/signin" || router.pathname === "/signup") && accessToken;
if (notAllowed) {

kiJu2 · 2024-06-17T08:48:04Z

정말 수고 많으셨습니다 민재님 ~!!
훌륭합니다. 모든 요구사항을 멋지게 해내셨군요 !! 👏👏👏

항상 꾸준히 스프린트 미션 제출하고, 멋지게 해내는 모습. 멋있습니다.
리뷰 중 궁금하신거 있으시면 사전 질의를 통해서 남겨주시거나 멘토링 미팅 때 질문주세요 ㅎㅎㅎ

PixeIDark added 7 commits June 11, 2024 14:57

fix(token, Link)

3b48c15

feat(interceptors)

91ed5aa

feat(interceptors)

19d5df6

refactor: 모든 피드백 반영

b65432b

refactor(gitignore)

74f3e7d

fix(refreshToken)

904058a

feat: AuthProvider

38e9a4b

PixeIDark requested a review from kiJu2 June 14, 2024 13:09

PixeIDark self-assigned this Jun 14, 2024

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

feat: complete!

8d728c0

PixeIDark changed the base branch from main to Next.js-김민재 June 14, 2024 15:26

kiJu2 approved these changes Jun 17, 2024

View reviewed changes

kiJu2 merged commit 31b8e54 into codeit-bootcamp-frontend:Next.js-김민재 Jun 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김민재] Sprint11 #693

[김민재] Sprint11 #693

PixeIDark commented Jun 14, 2024 •

edited

Loading

kiJu2 commented Jun 17, 2024 •

edited

Loading

kiJu2 commented Jun 17, 2024

kiJu2 commented Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 18, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 18, 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

PixeIDark Jun 21, 2024

kiJu2 Jun 17, 2024

kiJu2 Jun 18, 2024

kiJu2 commented Jun 17, 2024

@@ @@ -13,6 +13,8 @@ @@
               /.next/
               /out/
+              /.env

	await axiosInstance.post<any>("/articles", payload);
	await axiosInstance.post<PostArticleResponse>("/articles", payload);

	await axiosInstance.post<any>("/articles", payload);
	await axiosInstance.post<{success: boolean, id: string 등등..}>("/articles", payload);

	const PostRefreshToken = async (refreshToken?: string): Promise<Token> => {
	const postRefreshToken = async (refreshToken?: string): Promise<Token> => {

	const [isToken, setIsToken] = useState<string \| undefined>("");
	const [isToken, setIsToken] = useState<string>();

[김민재] Sprint11 #693

[김민재] Sprint11 #693

Conversation

PixeIDark commented Jun 14, 2024 • edited Loading

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

kiJu2 commented Jun 17, 2024 • edited Loading

kiJu2 commented Jun 17, 2024

스프린트 미션10에서는 댓글작성이 정상적으로 작동했는데, 미션11에서는 댓글이 10%의 확률로 작성성공 됩니다.. 원인을 모르겠지만 최대한 찾아보겠습니다.

kiJu2 commented Jun 17, 2024

interceptor에 401에러시 토큰을 업데이트하는 로직을 추가하고, AuthContext로 로그인과 유저를 관리했습니다.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

.gitignore에 env 파일을 추가해 주셨군요!

gitignore에 .env 파일을 추가해도 commit history에 env파일이 남아있게 됩니다!

Choose a reason for hiding this comment

어라? .gitignore에 env 파일을 추가해 주셨군요!

gitignore에 .env 파일을 추가해도 commit history에 env파일이 남아있게 됩니다!

Choose a reason for hiding this comment

우리 any를 하나하나 지워보도록 합시다 ~!

혹은

Choose a reason for hiding this comment

Choose a reason for hiding this comment

컴포넌트가 아닌 ts혹은 js 함수는 일반적으로 카멜케이스로 작성합니다:

Choose a reason for hiding this comment

굳굳굳 ~! 환경 변수를 적용하셨군요 😊

Choose a reason for hiding this comment

굳굳 ~! label과 input을 연결했군요 ! 👍

Choose a reason for hiding this comment

다음과 같이 처리하면 string | undefined가 됩니다 !

Choose a reason for hiding this comment

Choose a reason for hiding this comment

API 함수에User 반환타입을 지정하는게 어떨까요?

Choose a reason for hiding this comment

굳굳 ! Context로 유저 정보를 관리하고 있군요 👍👍👍

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

PixeIDark commented Jun 14, 2024 •

edited

Loading

kiJu2 commented Jun 17, 2024 •

edited

Loading

`.gitignore`에 env 파일을 추가해 주셨군요!

어라? `.gitignore`에 env 파일을 추가해 주셨군요!

우리 `any`를 하나하나 지워보도록 합시다 ~!

컴포넌트가 아닌 `ts`혹은 `js` 함수는 일반적으로 카멜케이스로 작성합니다:

굳굳 ~! `label`과 `input`을 연결했군요 ! 👍

다음과 같이 처리하면 `string | undefined`가 됩니다 !

API 함수에`User` 반환타입을 지정하는게 어떨까요?

굳굳 ! `Context`로 유저 정보를 관리하고 있군요 👍👍👍