4주차는 인스타그램 클론 프로젝트와 이제까지 만들었던 프로젝트들을 배포하는 과정을 배웠다.

가장 먼저 만든 페이지는 회원가입/로그인을 위한 페이지이다. Input 태그 두 개를 사용해서 이메일과 비밀번호를 입력받을 수 있게 만들었고, 로그인 화면에서도 비슷한 UI를 사용했다.

otp 발급과 인증을 위한 코드는 이렇게 작성되었다.

  const verifyOtpMutation = useMutation({
    mutationFn: async () => {
      const { data, error } = await supabase.auth.verifyOtp({
        type: "signup",
        email,
        token: otp,
      });

      if (data) {
        console.log(data);
      }

      if (error) {
        alert(error.message);
      }
    },
  });

        <Button
          onClick={() => {
            if (confirmationRequired) {
              verifyOtpMutation.mutate();
            } else {
              signupMutation.mutate();
            }
          }}
          loading={
            confirmationRequired
              ? verifyOtpMutation.isPending
              : signupMutation.isPending
          }
          disabled={
            confirmationRequired
              ? verifyOtpMutation.isPending
              : signupMutation.isPending
          }
          color="light-blue"
          className="w-full text-md py-1"
        >
          {confirmationRequired ? "인증하기" : "가입하기"}
        </Button>

이메일을 입력하고 회원가입을 누르면 supabase와 연동되어 가입 확인 메일을 보낼 수 있다. 링크를 클릭하면 리다이렉트 되어 회원가입을 계속 진행하는 방법과, 이메일에 쓰여진 OTP를 입력하여 인증을 받는 두 가지 방법을 모두 배울 수 있었다.

이메일에 쓰여진 코드로 인증하면 회원가입이 완료되고 바로 메인 페이지로 이동한다.

사이드 메뉴의 가장 아래 chat 메뉴를 클릭하면 대화방이 나타난다. 유저를 선택해서 메시지를 보낼 수 있다. 개인 대화방만 구현되어 있다.

내가 보낸 메세지는 파란색으로, 상대방이 보낸 메세지는 회색으로 나타난다. 파라미터 값 하나로 구현할 수 있는 단순한 기능이라는 게 신기했다.

나와 상대방이 보낸 메세지를 구분하는 코드는 이렇게 작성되었다.

"use client";

export default function Message({ isFromMe, message }) {
  return (
    <div
      className={`w-fit p-3 rounded-md ${
        isFromMe
          ? "ml-auto bg-light-blue-600 text-white"
          : "bg-gray-100 text-black"
      }`}
    >
      <p>{message}</p>
    </div>
  );
}

4주차 + 최종 후기

실시간 대화라는 기능이 생각한 것보다 더 간단하게 만들 수 있다는 것에 놀랐다. 프로젝트를 시작하기 전에는 복잡하고 어렵게 구현해야 할 거 같았던 기능들을 쉽게 구현할 수 있다는 것이 신기했다.

이번 인프런 워밍업클럽을 통해 supabase를 처음 알게 되었다. 데이터베이스, 스토리지부터 인증 시스템까지 많은 것들이 구현되어 있어서 간단한 개인 프로젝트를 만들 때 유용하게 쓰일 거 같다.

다음 주에는 supabase를 활용한 간단한 기능들을 혼자 만들면서 시스템에 익숙해지려고 한다. 이번 워밍업클럽은 next.js, typescript 같은 기술 스택과 함께 유용한 기능들을 많이 알아갈 수 있어서 좋은 시간이었다.