[#68] 공통 헤더 만들기 #105

mahwin · 2023-11-23T09:29:05Z

한일

공통 헤더 생성
로그인 검증
AuthContext를 만들고 AuthProvider로 main.tsx에서 전체 컴포넌트를 감싸서 모두가 접근할 수 있게 했습니다. 로그인 정보는 어디서든 사용된다 생각했고, 잘 변경되지 않으니 리렌더링을 많이 일으킬 거라 생각이 안 듭니다.
최대한 주석 열심히 달았습니다.
리뷰 주시면 바로 반영하겠습니다.

유저 행동을 기준으로 스샷찍었습니다. 배포 환경에서 체크한 내용입니다.

유저가 처음으로 웹 페이지에 들어옴
로그인 버튼 누름
깃허브로 로그인을 누르고 로그인을 끝낸 뒤에 리다이렉트를 받고 메인페이지로 들어옴
로그아웃 버튼을 누름
잘못된 토큰으로 들어오려고 하는 경우
실패 상황

- 로고로 사용될 에셋 public에 저장

- 생성한 헤더 main 페이지 상단에 포함

- 로그인 정보 담고 있는 context 생성 - main을 감싸서 모든 컴포넌트에서 접근 가능하도록 함 - 커스텀 훅 만들어서 로그인 관련 작업 수행 - 현재는 header에 있지만 메인 페이지의 어느 영역에 있어도 괜찮음 - main 페이지 내에 header가 있기 때문에 현재는 header에 포함함

- console 삭제 - 주석 필요하면 추가

dmdmdkdkr · 2023-11-23T09:34:56Z

frontend/src/components/Common/Logo.tsx

이런 식으로 할 수 있었네요, 배워갑니다:D

dmdmdkdkr · 2023-11-23T09:48:42Z

frontend/src/components/Header/index.tsx

+      {isLogin ? (
+        <button onClick={handleLogout}> 로그아웃 </button>
+      ) : (
+        <button onClick={handleLogin}> 로그인 </button>
+      )}


useAuth의 리턴으로 isLogin을 받고, 이걸로 어디서든 로그인 여부를 확인할 수 있는 건가요?

넵, main.tsx에 보시면 Provider라고 하는 애가 감싸고 있는데 걔가 감싸고 있는 컴포넌트들은 다 접근할 수 있어요

isLogin이 그냥 값처럼 보이지만 구현은 useState를 활용해서 리턴했기 때문에 실제로 react에서는 변경사항을 추적하고 있어서 isLogin을 변경하면 isLogin을 사용하는 컴포넌트들도 다 변경됩니다,

dev2820 · 2023-11-23T09:38:15Z

frontend/src/components/Auth/AuthProvider.tsx

+};
+
+const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  AuthContext.Provider;


이 코드는 무슨 코드죠?

엇..? 지웠습니다.

dev2820 · 2023-11-23T09:38:54Z

frontend/src/components/Common/Logo.tsx

+    <section>
+      <img src="./algo.png" alt="logo" width={size} height={size} />
+    </section>


로고는 section 태그로 묶기 보단 span나 img 만 반환되는게 어울릴 것 같은데 어떤가요?

그렇네요. img만 리턴하게 하겠습니다.

dev2820 · 2023-11-23T09:41:18Z

frontend/src/components/Auth/AuthProvider.tsx

+  const setLogout = () => {
+    setState((prevState: AuthState) => ({
+      ...prevState,
+      isLogin: false,
+    }));
+  };
+
+  const setLogin = () => {
+    setState((prevState: AuthState) => ({
+      ...prevState,
+      isLogin: true,
+    }));
+  };
+
+  const initialState = {
+    isLogin: false,
+    setLogout,
+    setLogin,
+  };


메소드는 state로 설정하기보단 빼는게 좋아보여요. 메소드는 변하지 않기 때문에 상태라고 보기 어려워서 그렇습니다.

const [isLogined,setIsLogined] = useState<boolean>(false); function logout () { setIsLogined(false); } function login() { setIsLogined(true); }

dev2820 · 2023-11-23T09:44:39Z

frontend/src/hooks/login/useAuth.ts

+import axios from 'axios';
+
+const TOKEN_KEY = 'accessToken';
+const API_URL = 'http://101.101.208.240:3000';


이거 .env 로 뺄 수 있을까요? 이런 도메인 or ip 정보는 환경 변수로 관리하는게 좋아요. 네트워크 변경 상의 로직을 소스단위에서 신경쓰지 않아도 되기 때문입니다. 그리고 이곳 저곳에서 API_URL 상수를 만들면 나중에 IP가 바뀔 때 수정이 어렵겠죠?

// .env VITE_API_URL=http://101.101.208.240:3000

이렇게 쓰면 import.meta.env.VITE_API_URL로 참조해서 쓸 수 있습니다.
참고로 제가 저렇게 쓰고 있어서, 이름은 같게 해주시면 좋을 것 같아요

넵, 좋습니다.

하나 궁금한 점은 왜 BASE_API_URL도 아니고 빌드 도구인 VITE를 쓰신건가요? 빌드 도구에 따라서 URL이 변경될 상황도 있다는 의미일까요?

dev2820 · 2023-11-23T09:46:14Z

frontend/src/hooks/login/useAuth.ts

+        removeAuthInfo();
+      }
+    });
+  }, []);


isLogin에 의해 결정되는 sideeffect 같은데, 의존성에 isLogin이 있는게 좋지 않을까요?

isLoggedin이 false에서 true가 됐을 경우
로그인 검증을 금방해서 true가 됐으니 검증할 필요 x

isLoggedin이 �true에서 false가 됐을 경우 => logout을 눌렀을 때임.

url에 accessToken이 있는데,
logout을 눌러 isLoggedin으로 바꾸면 의존성 배열에 있는 isLoggedin 때문에 다시 useEffect함수가 돌아서 다시 검증해서 로그인으로 만들어버리지 않을까요

api 서버가 꺼져있네요. 서버 켜지는 대로 직접 돌려보겠습니다.

reload가 아니라서 의존성 배열에 추가하니 위 쿼리를 읽고 tokenValid 검증을 다시 해서 로그인 버튼이 서버에서 토큰 검증 후 다시 로그아웃되네요!

2023-11-23.11.49.21.mov

의존성 배열 뺏을 때는 정상작동합니다.

2023-11-23.11.53.29.mov

dev2820 · 2023-11-23T09:46:34Z

frontend/src/hooks/login/useAuth.ts

+    const tokenValidPromise = fetchTokenValid(token);
+    tokenValidPromise.then((isValid) => {
+      if (isValid) {
+        saveAuthInfo(token);
+      } else {
+        removeAuthInfo();
+      }


async/await으로 작성해주실 수 있나요?

수정했습니다. 👍🏻

dev2820 · 2023-11-23T09:48:27Z

frontend/src/hooks/login/useAuth.ts

useAuth로 Provider를 참조하는 것 아주 좋습니다. 👍

dmdmdkdkr · 2023-11-23T10:20:40Z

frontend/src/components/Auth/AuthContext.ts

AuthContext를 이렇게 나눈 이유가 궁금해요!

지금은 사실 없어보여요. 그치만 나중에 전역에서 관리할 데이터가 많다면 나누는 의미가 있지 않을까요

dmdmdkdkr · 2023-11-23T11:48:27Z

frontend/src/hooks/login/useAuth.ts

+
+    const queryParams = new URLSearchParams(location.search);
+    // 당연히 쿼리에 token 값이 있으면 token 값을 먼저 사용하도록 함.
+    const token = queryParams.get(TOKEN_KEY) || localStorage.getItem(TOKEN_KEY);


이 부분이 로그인 토큰을 가져오는 코드인가요?

넵 맞습니다. queryParams.get(TOKEN_KEY)이 /?accessToke="여기꺼가져오는코드" 이고 이게 없다면 로컬스토리지에서 찾아라 입니다.

제가 로그인 여부를 확인하는 로직이 필요한데, 그러면 이 코드를 사용하면 될까요?

네네넵!
로그인 여부는 저걸로 체크하면 되고, 인증 관련 문제가 만약에 생긴다면 저한테 물어보시면 바로 알려드릴게요

정확히 이렇게 보내야하는데, 저도 처음엔 모르겠더라구요 나중에 말씀하면 바로 알려드릴게요

넵, 감사합니다!

- isLogin => isLoggedin로 확정 (gpt 의견) - state로 관리하던 함수들 외부로 빼냄 - 필요없는 코드 삭제 - .env 파일로 api 관리

dev2820

:)

dmdmdkdkr

GOOD:D

mahwin · 2023-11-23T15:06:46Z

frontend/src/router.tsx

-        element: <CreateCompetitionPage />,
-      },
-    ],
+    basename: process.env.NODE_ENV === 'production' ? '/web12-Algo-With-Me' : '',


여기 부분이 있어야 pnpm run deploy했을 떄 제대로 경로 찾아집니다

mahwin added 5 commits November 23, 2023 18:11

feat: 공통으로 사용될 로고 컴포넌트 생성

df57b41

- 로고로 사용될 에셋 public에 저장

chore: 로그인 페이지 라우팅 추가

1c6c091

feat: 공통 헤더 생성

b69c9bd

- 생성한 헤더 main 페이지 상단에 포함

chore: 필요없는 코드 삭제

6225164

- console 삭제 - 주석 필요하면 추가

mahwin self-assigned this Nov 23, 2023

mahwin requested review from dev2820 and dmdmdkdkr November 23, 2023 09:29

mahwin added the FE fe 개발 label Nov 23, 2023

dmdmdkdkr reviewed Nov 23, 2023

View reviewed changes

frontend/src/components/Common/Logo.tsx

Copy link

Collaborator

dmdmdkdkr Nov 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 식으로 할 수 있었네요, 배워갑니다:D

dmdmdkdkr reviewed Nov 23, 2023

View reviewed changes

dev2820 reviewed Nov 23, 2023

View reviewed changes

dmdmdkdkr reviewed Nov 23, 2023

View reviewed changes

refactor: 변수명 변경, 필요 없는 코드 삭제

6cf3886

- isLogin => isLoggedin로 확정 (gpt 의견) - state로 관리하던 함수들 외부로 빼냄 - 필요없는 코드 삭제 - .env 파일로 api 관리

dev2820 approved these changes Nov 23, 2023

View reviewed changes

dmdmdkdkr approved these changes Nov 23, 2023

View reviewed changes

mahwin commented Nov 23, 2023

View reviewed changes

mahwin requested review from dev2820 and dmdmdkdkr November 23, 2023 15:07

mahwin merged commit 8069ad2 into fe-dev Nov 23, 2023

mahwin deleted the 68-68-공통-헤더-만들기 branch November 23, 2023 15:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#68] 공통 헤더 만들기 #105

[#68] 공통 헤더 만들기 #105

mahwin commented Nov 23, 2023 •

edited

Loading

dmdmdkdkr Nov 23, 2023

dmdmdkdkr Nov 23, 2023

mahwin Nov 23, 2023

mahwin Nov 23, 2023

dev2820 Nov 23, 2023

mahwin Nov 23, 2023

dev2820 Nov 23, 2023

mahwin Nov 23, 2023

dev2820 Nov 23, 2023

dev2820 Nov 23, 2023

mahwin Nov 23, 2023

mahwin Nov 23, 2023

dev2820 Nov 23, 2023

mahwin Nov 23, 2023 •

edited

Loading

mahwin Nov 23, 2023

mahwin Nov 23, 2023

mahwin Nov 23, 2023 •

edited

Loading

dev2820 Nov 23, 2023

mahwin Nov 23, 2023 •

edited

Loading

dev2820 Nov 23, 2023

dmdmdkdkr Nov 23, 2023

mahwin Nov 23, 2023

dmdmdkdkr Nov 23, 2023

mahwin Nov 23, 2023

dmdmdkdkr Nov 23, 2023

mahwin Nov 23, 2023

mahwin Nov 23, 2023

dmdmdkdkr Nov 23, 2023

dev2820 left a comment

dmdmdkdkr left a comment

mahwin Nov 23, 2023

[#68] 공통 헤더 만들기 #105

[#68] 공통 헤더 만들기 #105

Conversation

mahwin commented Nov 23, 2023 • 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

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

mahwin Nov 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mahwin Nov 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mahwin Nov 23, 2023 • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dev2820 left a comment

Choose a reason for hiding this comment

dmdmdkdkr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mahwin commented Nov 23, 2023 •

edited

Loading

mahwin Nov 23, 2023 •

edited

Loading

mahwin Nov 23, 2023 •

edited

Loading

mahwin Nov 23, 2023 •

edited

Loading