2주차 스프린트 계획 · boostcampwm-2022/web21-devrank Wiki

백엔드

• 벡엔드 2주차 목표 - 인증 구현

• Access Token 탈취 시 만료될 때 까지의 보안 상 trade off… 결국 요청마다 deep하게 검사하는 방식은 JWT의 장점을 많이 뺏어간다.
• RTR(Refresh Token Rotation) : Refresh Token을 한번만 이용하여, 같은 토큰을 여러 번 사용 시 이상을 감지 가능하다.
  • 사용되지 않은 Refresh Token을 훔쳐 사용하거나, 그냥 지속적으로 Access Token만을 탈취한다면 막을 수 없다. 결국 보안과 성능의 trade off…

만났던 문제

API 요청 횟수 제한 문제 발생

• Github Enterpise가 아니라면 1시간에 5000번으로 요청을 제한

• 전체 유저의 랭킹을 업데이트해야하는 경우 5000번의 요청이 너무 제한적이다

  Github API

프론트엔드

고민한 부분들

1. 재사용 가능한 컴포넌트 만들기

   • 재사용이 가능하기 위해서는 우선 UI와 비즈니스 로직이 분리되어야 한다고 생각했습니다.
   • 이러한 부분을 고려하여 드롭다운을 구현할 때 드롭다운 트리거를 드롭다운 컴포넌트의 props로 jsx로 넘기는 방식을 적용하였다.
   • jsx로 props를 넘기게 되면 드롭다운의 디자인을 커스텀하게 만들 수 있는 장점이 있다.

   function Dropdown({ trigger, children }: DropdownProps) {
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef<HTMLDivElement | null>(null);
   
     const onClickBackground = (e: MouseEvent) => {
       if (e.target instanceof HTMLElement) {
         if (!containerRef.current) return;
         if (!containerRef.current.contains(e.target)) {
           setIsOpen(false);
         }
       }
     };
   
     useEffect(() => {
       window.addEventListener('click', onClickBackground);
       return () => window.removeEventListener('click', onClickBackground);
     }, []);
   
     return (
       <Container ref={containerRef} onClick={() => setIsOpen((prev) => !prev)}>
         {trigger}
         {isOpen && <Options>{children}</Options>}
       </Container>
     );
   }
   

2. Tanstack-query

   • 로그인 구현하는데 처음에는 로그인 성공시 로그인 여부와 유저 정보를 전역으로 관리할려 했다. 그래서 많은 클라이언트 state를 관리할 필요가 없어보여서 context로 관리할려 했는데, context 사용법이 복잡하기도 하고 성능 이슈도 존재하였다.
   • 생각해보니 Tanstack-query를 사용하면 서버에서 데이터를 fetch해와서 caching해주고 전역적으로 접근해 사용할 수 있어서 context를 굳이 도입안해도 tanstack-query에서 caching하는 데이터를 전역으로 접근하는 방법으로 로직을 수정하니깐 코드양도 줄고 성능적으로도 이득이었다. 개이득!

컨텍스트 쓴 거

function App({ Component, pageProps }: AppProps) {
const queryClient = new QueryClient();

interface AuthProviderProps {
  children: React.ReactNode;
}

function AuthProvider({ children }: AuthProviderProps) {
  const [auth, setAuth] = useState<AuthType>({
    isLoggedIn: false,
    user: {
      id: '',
      username: '',
      avatarUrl: '',
    },
  });
  return <AuthContext.Provider value={{ auth, setAuth }}>{children}</AuthContext.Provider>;
}

function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider theme={theme}>
          <AuthProvider>
	           <GlobalStyles />
            <div className={notoSansKR.className}>
              <Layout>
                <Component {...pageProps} />
              </Layout>
            </div>
          </AuthProvider>
        </ThemeProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </>
  );
}

function Callback() {
  const router = useRouter();
  const { setAuth } = useContext(AuthContext);

  useEffect(() => {
    if (!router.isReady) return;
    const code = router.query.code as string;

    (async function () {
      try {
        await requestGithubLogin(code);
        router.push('/');
        setAuth({
          isLoggedIn: true,
        });
      } catch (err) {
        console.error(err);
      }
    })();
  }, [router.isReady]);

  return (
    <Container>
      <Spinner width={60} height={60} />
    </Container>
  );
}

export default Callback;

Tanstack-query