2022 12 17 ~ 18

👨‍💻 오늘 한 일

프로젝트 1st 스프린트

🌕  auth check

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const { cookie } = context.req.headers;

  const { data } = await axios.get(
    `${process.env.NEXT_PUBLIC_SERVER_URL}/user/auth`,
    { headers: { Cookie: cookie } }
  );

  if (!data) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  return {
    props: { auth: { ...data } },
  };
}

유저가 로그인을 하고 접근하는지에 대한 판단을 클라이언트에서 하는 것이 아닌 서버에서 실시하여 없을 경우 로그인으로 이동하도록 하였다. 클라이언트에서 useEffect를 사용하여 처리하였을 때 화면이 깜빡하는 문제를 해결할 수 있었다!

🌕  deploy

• Front deploy
  • 프론트는 next가 제공하는 vercel을 활용하여 진행하였다!
• server deploy
  • 서버 배포를 처음에는 netlify를 통해 진행했다가 정적 파일이 아닌 api들을 사용하기엔 어려움이 있었다
  • hiroku를 통해 배포를 해보려 했지만 과금 정책이 바뀌었다고 해서 새로운 플랫폼을 찾아보았다.
  • 최종 배포는 google cloud를 통해 진행하였다.

🤩 새로운 / 몰랐던 점

🌕  netlify

이슈 - 해당 플랫폼으로 배포를 하면 정상적으로 서버가 동작하지 않았다… 찾아보니 정적 페이지를 배포하기에는 적합하지만 서버 배포는 복잡한 설정을 통해서만 가능한 것 같고, netlify는 보통 정적 페이지 배포를 위해서 사용하는 것 같았다. 일단 heroku로 서버 배포를 해보아야 할 것 같다!

🌕  vercel

이슈 - 빌드 과정에서 dev 의존성 체크까지 진행되어 스토리북이나 이런 것들에 에러 때문에 빌드가 멈추었다. 이를 해결하기 위해 린트와 타입스크립트 체크를 스킵하는 내용을 추가하였다!

	typescript: {
    ignoreBuildErrors: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  }

🌕  cookie

이슈 - 서버 응답에 정상적으로 쿠키가 담겨서 오는데 브라우저가 저장하지를 않는 문제가 발생했다…배포 후 https로 통신하는 것 때문에 쿠키 설정을 추가해주는 등 다양한 방법으로 해결하려고 노력하였으나 정상적으로 작동하지 않아 일단 넘어가기로 했다…

🌙 하루를 마치며…

배포 문제로 인해 주말을 다 써버렸다…..일단 시간이 얼마 남지 않았으므로 남은 기능 구현을 먼저 진행하고 배포 문제를 해결해야 할 듯 하다 ㅠㅠ