김상현 포트폴리오

플래시카드란 무엇인가?

• 인덱스 카드라고 다른 이름도 있음
• 앞면에 문제 뒷면에 정답
• 정답은 내일 다시 틀리면 1시간 후 다시
• 정답을 맞출 때마다 다음에 풀이까지 간격 누적
  • 예: 1일, 2일 3일 1주일 ...

프론트엔드

• React(Vite)
• Axios
• React Router DOM
• React-Query
• Jotai
• Emotion
• React-Spinner

백엔드

• Deno
• Deno deploy
• Oak
• mongoDB

const signIn = async () => {
  setEmailError('');
  setPasswordError('');
  mutate(
    {
      email: emailValue,
      password: passwordValue,
    },
    {
      onSuccess(data) {
        const { access_token } = data;
        setTokens(access_token);
        navigate('/main');
      },
    }
  );
};

• 로그인 이벤트를 처리하는 함수

const Cards = lazy(() => import('../pages/Cards'));
const SignIn = lazy(() => import('../pages/SignIn'));

const routes = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: '/main',
        element: <Cards />,
        loader: cardLoader(),
      },
      {
        path: '/signin',
        element: <SignIn />,
      },
    ],
  },
]);

• 라우팅 전 실행

import queryClient from '@/libs/queryClient';

export const cardLoader = () => async () => {
  const query = () => ({
    queryKey: ['cards'],
    queryFn: getCardsAPI,
    staleTime: 5000,
  });

  return (
    queryClient.getQueryData<Card[]>(query().queryKey) ??
    (await queryClient.fetchQuery(query))
  );
};

• query cache가 없으면(undfined) fetchQuery 실행

function Main() {
  const loaderCards = useLoaderData() as Awaited<
    ReturnType<ReturnType<typeof cardLoader>>
  >;

  const query = cardsQuery();
  const {
    data: cards,
    isLoading,
    error,
  } = useQuery({ ...query, initialData: loaderCards });

  return <>{/* ... 생략 */}</>;
}

• cardLoader의 반환값을 활용해서 타입 지정
• 서버에서 받응 응답을 query cache로 caching
• 참고. 로그인 처리후 스피너는 전역 상태 flag로 처리

분석 1

• vercel, deno deploy, mongoDB Atlas 플랫폼 활용
• 3개 플랫폼 중 1개의 장애가 발생하면 서비스 이용이 불가능함

분석 2

const Cards = lazy(() => import('../pages/Cards'));

const routes = createBrowserRouter([
  {
    path: ROUTE_PATHS.WELCOME,
    element: <Layout />,
    children: [
      {
        path: ROUTE_PATHS.CARDS,
        element: <Cards />,
        loader: cardLoader(),
      },
    ],
    errorElement: <ServerError />,
  },
]);

import queryClient from '@/libs/queryClient';

export const cardLoader = () => async () => {
  const query = () => ({
    queryKey: ['cards'],
    queryFn: getCardsAPI,
    staleTime: 5000,
  });

  return (
    queryClient.getQueryData<Card[]>(query().queryKey) ??
    (await queryClient.fetchQuery(query))
  );
};

• loader에서 예외처리가 없음
• loader에서 에러가 발생할 경우 <ServerError/>페이지를 랜더링함
• 통신에러의 부분이 전체로 확산(action과 feedback의 불일치)

Error Boundary란?

• React의 컴포넌트 차원에서 catch하는 방법

• 리액트 라이프 사이클 중 컴포넌트 내부에 에러가 발생하면
• 컴포넌트의 상태를 바꿔 fallback을 대신 랜더링하도록 함
• getDerivedStateFromError에러 발생시 실행(hasError 갱신)
• componentDidCatch에러 logging

import { Component, ErrorInfo, ReactNode } from 'react';

interface Props {
  children?: ReactNode;
  fallback: ReactNode;
}

interface State {
  hasError: boolean;
}

export class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false,
  };

  public static getDerivedStateFromError(_: Error): State {
    return { hasError: true };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Uncaught error:', error, errorInfo);
  }

  public render() {
    if (this.state.hasError) return this.props.fallback
    return this.props.children;
  }
}

해결 1

• 옆 예시는 ErrorBoundary 설치하고 적용

• 내부 동작은 동일함
• 이유는 React Query와 연계하기 위해
  • 참고. React-Query 공식 문서에서 설치버전을 권장함
• 실패하면 error를 컴포넌트 차원에서 catch

import { ErrorBoundary } from 'react-error-boundary';
import { useQueryErrorResetBoundary } from '@tanstack/react-query';

function Cards() {
  const { reset } = useQueryErrorResetBoundary();

  return (
    <CardPageContainer>
      <PageHeading>Cards</PageHeading>
      <ErrorBoundary onReset={reset} fallbackRender={ErrorCards}>
        <NowDeck />
      </ErrorBoundary>
    </CardPageContainer>
  );
}

type ErrorCardsProps = {
  error: { success: boolean; msg: string };
  resetErrorBoundary: (...args: any[]) => void;
};

export function ErrorCards({ error, resetErrorBoundary }: ErrorCardsProps) {
  return (
    <CardContainer>
      <ErrorCardsContainer>
        <DisabledText>{error.msg}</DisabledText>
        <Button onClick={resetErrorBoundary}>Retry</Button>
      </ErrorCardsContainer>
    </CardContainer>
  );
}

• 옆은 유저가 보게될 fallback 컴포넌트

• 실제 error 메시지를 화면에 보여줌
• 백엔드작업 하면서 API 실패시 body는 { success: false, msg: "에러 내용" }으로 처리
• 요청 실패 후 재요청 버튼을 UI로 제공

function SignUp() {
  const { mutate } = useMutation({ mutationFn: signUpAPI });

  const handleSignUp = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    mutate(
      { email, password },
      {
        onSuccess: (data) => {
          if (data.status === 201) navigate(ROUTE_PATHS.SIGN_IN);
        },
        onError: (err) => {
          // ...
        },
      }
    );
  };

  return <div>생략</div>;
}

• 클라이언트는 비밀번호, 아이디를 서버에 보냄
• 참고. deno deploy 서버는 https가 기본

async function signUp({ request, response }: Context) {
  try {
    // ...
    const input = await request.body().value;

    const document = await mongoAPI.getUser(input.email);
    if (document === undefined) throw Error('document is undefined');

    if (document !== null)
      throw Error(`이미 가입한 아이디입니다. ${document.email}`);

    const passwordSalt = await genSalt(8);
    const passwordHash = await hash(input.password, passwordSalt);

    await mongoAPI.postUser({
      email: input.email,
      passwordHash,
      passwordSalt,
    });

    response.status = 201;
    response.body = null;
  } catch (error) {
    // ...
  }
}

• 요청을 받으면 처리하는 함수
• 이메일 중복을 확인
• 없으면 이메일, salt, hash를 저장

async function signIn({ request, response }: Context) {
  try {
    // ...
    const input = await request.body().value;

    const document = await mongoAPI.getUser(input.email);

    if (document === null) throw Error('이메일이 없습니다.');

    if (!(await compare(input.password, document.passwordHash)))
      throw Error('비밀번호가 일치하지 않습니다.');

    const { jwt: refresh_token } = await generateRefreshToken(document._id);
    const { jwt: access_token } = await generateAccessToken(document._id);

    response.status = 201;
    response.body = {
      success: true,
      access_token,
      refresh_token,
    };
  } catch (error) {
    // ...
  }
}

• 참고. setcookie를 못한 이유는 origin이 프론트엔드와 백엔드가 다름
• 임시방편으로 token 2개를 응답함

const authClient: AxiosInstance = axios.create({
  baseURL: BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

axiosClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem(STORAGE_KEY.ACCESS_TOKEN);

    const configCopy = { ...config };
    if (token) configCopy.headers.Authorization = `Bearer ${token}`;
    else throw new Error('token이 없습니다.');

    return configCopy;
  },
  (error) => Promise.reject(error)
);

• 본인만 접근 가능한 리소스는 토큰 확인

• interceptors로 요청 직전에 확인

const authMiddleware: Middleware = async (
  { request, response, state },
  next
) => {
  try {
    const accessToken = request.headers.get('Authorization');
    if (!accessToken || !accessToken.startsWith('Bearer '))
      throw new BadRequestError('Bad Request');

    const userId = await convertTokenToUserId(accessToken.split(' ')[1]);
    if (!userId) throw new AuthorizationError('expired');

    state.userId = userId;
    await next();
  } catch (error) {
    if (error instanceof BadRequestError) {
      response.status = 400;
      // ...
    }
    if (error instanceof AuthorizationError) {
      response.status = 401;
      // ...
    }
    response.status = 406;
    // ...
  }
};

• JWT 토큰을 복호화하면 user 테이블의 id를 획득
• userId에 user테이블의 id를 할당
  • 다음에 실행할 함수에게 전달

async function getCards({ response, state }: Context) {
  try {
    const userId = state.userId ?? '';

    response.status = 200;
    response.body = await mongoAPI.getCards(userId);
  } catch (error) {
    response.status = 400;
    response.body = {
      success: false,
      msg: `${error}`,
    };
  }
}

• state에 저장된 userId 읽기
• userId로 DB에 필터 요청

• access는 만료 & refresh는 유효

• 1. access 만료 상태로 요청
• 2. 서버는 만료응답
• 3. 클라이언트는 access 만료 확인
• 4. 클라이언트는 access 갱신 요청
• 5. 서버는 refresh 확인
• 6. 새 access 토큰 응답
• 7. 클라이언트 동일 요청 재시도
• 8. 서버 정상 응답

토큰 갱신 서버측

const authMiddleware: Middleware = async (
  { request, response, state },
  next
) => {
  try {
    const accessToken = request.headers.get('Authorization');
    if (!accessToken || !accessToken.startsWith('Bearer '))
      throw new BadRequestError('Bad Request');

    const userId = await convertTokenToUserId(accessToken.split(' ')[1]);
    if (!userId) throw new AuthorizationError('expired');

    state.userId = userId;
    await next();
  } catch (error) {
    if (error instanceof BadRequestError) {
      response.status = 400;
      // ...
    }
    if (error instanceof AuthorizationError) {
      response.status = 401;
      // ...
    }
    response.status = 406;
    // ...
  }
};

• convertTokenToUserId는 만료하면 토큰 검증에서 null값을 반환
• 만료를 확인하고 클라이언트에게 401 status code와 메시지로 응답

토큰 검사

const PUBLIC_KEY = JSON.parse(
  Deno.env.get('PUBLIC_KEY') || config()['PUBLIC_KEY']
);

const privateKey = await crypto.subtle.importKey(
  'jwk',
  PUBLIC_KEY,
  { name: 'HMAC', hash: { name: 'SHA-512' } },
  true,
  ['sign', 'verify']
);

async function convertTokenToUserId(jwt: string, key = privateKey) {
  try {
    const { sub: userId } = await verify(jwt, key);
    return userId;
  } catch (_error) {
    return null;
  }
}

• PUBLIC_KEY를 .env에 저장
• 클라우드 서버의 재가동으로 토큰값 변경 방지
• 재가동해도 동일한 privateKey 생성

axiosClient.interceptors.response.use(
  (res) => res,
  async (err) => {
    const {
      config,
      response: { status },
    } = err;

    if (config.url === API_URLS.REFRESH || status !== 401 || config.sent)
      return Promise.reject(err);

    config.sent = true;
    const accessToken = await refreshAccessAPI();

    if (accessToken) config.headers.Authorization = `Bearer ${accessToken}`;
    return axiosClient(config);
  }
);

• interceptors로 응답 전에 로직 처리
• 요청 실패를 감청
• Promise.reject(err)이 반환값이면 호출자가 알아서 예외 처리
• 401 status code가 아닐 때, config.sent로 갱신 재요청 할 때, 갱신 요청이 실패할 때 중단
• 성공시에는 axiosClient(config)가 갱신된 토큰으로 재요청

type ResType = {
  success: boolean;
  access_token: string;
};

async function refreshAccessAPI() {
  try {
    const sessionToken = sessionStorage.getItem(STORAGE_KEY.SESSION_TOKEN);
    if (!sessionToken) throw Error('sessionToken');

    const {
      data: { access_token },
    } = await authClient.post<ResType>(API_URLS.REFRESH, null, {
      headers: {
        Authorization: `Bearer ${sessionToken}`,
      },
    });

    localStorage.setItem(STORAGE_KEY.ACCESS_TOKEN, `${access_token}`);

    return access_token;
  } catch (error) {
    localStorage.removeItem(STORAGE_KEY.ACCESS_TOKEN);
    sessionStorage.removeItem(STORAGE_KEY.SESSION_TOKEN);
    redirect(ROUTE_PATHS.SIGN_IN);
    if (error instanceof AxiosError) return error.response?.data;
  }
}

갱신 클라이언트

• sessionStorage를 확인하고 토큰을 교체
• 갱신할 토큰을 받아 access_token을 localStorage에 저장

async function refreshUserAccessToken({ request, response }: Context) {
  try {
    const refreshToken = request.headers.get('Authorization');
    if (!refreshToken || !refreshToken.startsWith('Bearer '))
      throw new Error('Bad Request');

    const { accessToken, success } = await refreshAccessToken(
      refreshToken.split(' ')[1]
    );
    if (!accessToken || !success) throw new Error('expired');

    response.status = 200;
    response.body = {
      success: true,
      access_token: accessToken,
    };
  } catch (error) {
    response.status = 400;
    response.body = {
      success: false,
      msg: `${error}`,
    };
  }
}

갱신 서버

• refresh 토큰을 검증하고 만료되면 Error
• 유효하면 갱신된 token을 응답

async function refreshAccessAPI() {
  try {
    const sessionToken = sessionStorage.getItem(STORAGE_KEY.SESSION_TOKEN);
    if (!sessionToken) throw Error('sessionToken');

    const {
      data: { access_token },
    } = await authClient.post<ResType>(API_URLS.REFRESH, null, {
      headers: {
        Authorization: `Bearer ${sessionToken}`,
      },
    });

    localStorage.setItem(STORAGE_KEY.ACCESS_TOKEN, `${access_token}`);

    return access_token;
  } catch (error) {
    localStorage.removeItem(STORAGE_KEY.ACCESS_TOKEN);
    sessionStorage.removeItem(STORAGE_KEY.SESSION_TOKEN);
    redirect(ROUTE_PATHS.SIGN_IN);
    if (error instanceof AxiosError) return error.response?.data;
  }
}

• 토큰을 모두 비우고 리다이렉팅으로 로그아웃 처리

import queryClient from '@/libs/queryClient';

export const cardLoader = () => async () => {
  const query = () => ({
    queryKey: ['cards'],
    queryFn: getCardsAPI,
    staleTime: 5000,
  });

  try {
    return (
      queryClient.getQueryData<Card[]>(query.queryKey) ??
      (await queryClient.fetchQuery(query))
    );
  } catch (error) {
    queryClient.invalidateQueries({ queryKey: query.queryKey });
    return [];
  }
};

• 사실 catch하고 빈 배열을 캐싱함

• loader에서 예외처리가 됨
  • loader의 통신은 catch가 된 것
• React Query는 통신 실패를 어떻게 알 수 있는가?

• React Query는 통신의 성공/실패를 대입한 함수로 파악

• API를 호출하는 catch하고 다시 throw하면
• React Query의 return 의 error 속성으로 접근 가능

type CardResType = { documents: Card[] };

async function getCardsAPI() {
  try {
    const res = await axiosClient.get<CardResType>(API_URLS.CARDS);
    return res.data.documents;
  } catch (error) {
    if (axios.isAxiosError<ErrorResponse>(error)) throw error.response?.data;
  }
  return [];
}

Webp 적용할 때 크로스 브라우징 이슈

• picture 태그에 img태그 fallback을 설정

function Landing() {
  return (
    <picture>
      <source
        type="image/webp"
        media="all and (min-width: 1320px)"
        src={flashCardWEBP}
        srcSet={flashCardWEBP}
      />
      <source
        type="image/jpeg"
        media="all and (min-width: 1320px)"
        src={flashCardJPG}
        srcSet={flashCardJPG}
      />
      <img srcSet={flashCardJPG} alt="flash card picture" loading="lazy" />
    </picture>
  );
}