6/7 TIL (News Feed Project 제출)

📖 진행한 공부 📖

• 오류 수정
• 기능 설명 및 팀 회고

홈페이지에서 이것저것 살펴보다가 2개의 오류가 발생했는데

무슨 오류인지?

1.로그인 하면 alert에 닉네임이 뜨지 않고undefined가 뜨는 문제

일단 1번의 alert에 undefined가 뜨는 오류부터 잡아봤다.

로그인 기능은 supabase.auth.signInWithPassword()를 사용해서 기능 구현을 하였는데, 해당 메서드는 사용자에 대한 기본 정보만 제공하고 nickname은 users 테이블에 저장되기 때문에 별도로 가져와야 하기에 발생하는 문제였다.

기존 코드

const signInWithEmailPassword = async (e) => {
    e.preventDefault();
    try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password
      });
      if (error) {
        throw error;
      }

      if (data) {
        dispatch(setSignIn(true));
        alert(`${data.user.user_metadata.nickname}님 환영합니다.`);
        navigate('/');
      } else {
        alert('등록된 정보가 아닙니다. 회원가입을 진행해주세요.');
      }
    } catch (error) {
      console.error('로그인 중 오류 발생:', error.message);
      alert('로그인 오류 발생');
    }
  };

기존의 코드를 살펴보면 위에서 말했듯이 사용자의 기본 정보만 제공받았지 닉네임은 따로 제공받지 못하였기에 별도로 users 테이블에서 닉네임을 가져오는 로직을 작성하여야 했다.

닉네임 가져오는 로직

const user = data.user;
const { data:userMetadata, error: userMetadataError }
= await.supabase
.from('users')
.select('nickname')
.eq('id', id)
.single();

if(userMetadataError) {
	throw UserMetadataError;
}

테이블에서 뭔가를 가져오고 싶을 땐 보통 아래의 메서드를 사용한다.

from() : 특정 테이블 선택 시 사용
select() : 지정한 테이블에서 가져올 컬럼을 선택
eq() : 특정 컬럼이 특정 값과 일치한지 확인하는 조건
single() : 쿼리 결과가 단일 행(single row)일 것이라고 예상할 때 사용

수정 후 코드

 const signInWithEmailPassword = async (e) => {
    e.preventDefault();
    try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password
      });
      if (error) {
        throw error;
      }

      const user = data.user;
      const { data: userMetadata, error: userMetadataError } = await supabase
        .from('users')
        .select('nickname')
        .eq('id', user.id)
        .single();

      if (userMetadataError) {
        throw userMetadataError;
      }

      dispatch(setSignIn(true));
      alert(`${userMetadata.nickname}님 환영합니다.`);
      navigate('/');
    } catch (error) {
      console.error('로그인 중 오류 발생:', error.message);
      alert('로그인 오류 발생');
    }
  };

기존의 코드에서 if문을 없애고 닉네임을 가져오는 로직을 추가한 후, alert에서 userMetadata.nickname으로 불러오니 잘 출력되는 걸 볼 수 있었다.

1번의 경우엔 로직 문제였어서 로직 수정을 해주니 잘 작동했다

2.깃허브로 로그인 했을 때만 마이페이지 클릭했을 때 처음 한번은 마이페이지로 이동하지 않고 새로고침 됨

Github로 로그인 할 때는 단계가 있는데 간략하게 적어보자면

OAuth 프로세스 시작할 때, 앱에서 GitHub로 리디렉션하여 로그인 => 로그인 후 GitHub에서 다시 앱으로 돌아오며 세션 정보를 전달

이와 같은 과정을 거치며 Github로 연동하여 로그인 할 수 있는 것이다.

기존 코드

async function signInWithGithub() {
    const { error, data } = await supabase.auth.signInWithOAuth({
      provider: 'github'
    });

    if (error) {
      console.error('깃허브 로그인 에러', error.message);
      alert('로그인 오류가 발생하였습니다, 다시 시도해주세요.');
      return
    }
    console.log('OAuth 데이터:', data);

    if (data) {
      dispatch(setSignIn(true));
      navigate('/');
    } else {
      alert('회원가입이 필요합니다.');
      navigate('/signup');
    }
  }

해당 부분에서의 뭔가 문제가 있다는 것인데.. 혹시나 해서
로직을 바꿔봤는데도 해당 문제는 고치지 못했다 ㅠㅠㅠㅠ 넘나 아쉬운 거..

그리고 vercel로 배포를 하면 가끔 가다가

이런 오류를 접할 수 있는데 팀원 분이 오류를 고쳐주셨다! 이런 방법이 있다는 걸 팀원 분 덕에 좋은 정보를 얻었다.

해결 방법

SPA 프로젝트를 배포한 뒤 동적으로 라우팅 접근시, (즉 라우트 이동 후 중간에 새로고침하거나, 하위 url(ex. moonshot/dashboard)로 접근했을 경우 vercel에서는 다음과 같은 404 Not_Found 에러를 뱉습니다.

SPA의 라우팅 처리가 아닌 방식으로 해당 리소스를 찾으려고 하기 때문에 404 에러가 발생하게 됩니다.
이는 vercel 문서의 rewrites 부분을 참고하여 해결할수 있습니다.
(1) 최상위 디렉토리 아래에 vercel.json이라는 배포 설정 파일을 만듭니다.
(2) 다음과 같은 라우팅 rewrites 설정을 명시해줍니다.
{
"routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

이번 팀 프로젝트를 진행하면서 맡았던 기능, 겪었던 기술적 어려움, 느낀점에 대해 적어보겠다.

로그인

회원가입을 진행한 아이디, 비밀번호로 로그인을 하면 계속 else일 때 뜨는 alert창이 계속 뜨는데, 또 로그인은 되는 이상한 현상을 겪었었는데 위에서 받아온 변수명을 아래에서 잘못 입력해서 사소한 오류가 있었습니다. 역시 코드가 길어질 수록 오타를 잘 봐야 하는 거 같습니다. 기본적으로 이메일을 통한 로그인은 supabase에서 제공하는 auth 메서드인 signInWitnPassword(), 깃허브를 통한 로그인은 signInWithOAuth()를 사용해서 구현했습니다.

회원가입

회원가입 절차에서 중복된 이메일, 중복된 닉네임을 사용해도 중복된 이메일에 대한 경고 문구만 출력되고 중복된 닉네임에 대한 경고 문구는 출력이 안되는 오류가 있었는데, 이는 중복된 이메일에 대한 경고 문구를 출력하는 과정에서 경고 문구를 출력하면 return을 시켜버려서 그 아래에 짜여진 닉네임 중복 확인 경고 문구 출력 기능에 대한 코드는 작동을 안했던 거라서 논리연산자를 사용해 중복 확인 절차를 동시에 수행할 수 있도록 수정을 함으로써 오류를 해결했습니다. 회원가입 기능을 구현할 땐 가장 먼저 auth의 메서드인 signUp() 메서드를 통해 기본적인 정보들을 supabase에 등록했고 그 외 다른 곳에서 꺼내쓰기 위해 필요한 닉네임, 이메일은 유저 정보를 담아놓은 테이블 안에 넣어주기 위해 from(), insert(), select(), eq(), single() 등 다양한 supabase 메서드를 사용했습니다.

프로젝트 결과물에 대한 점수 및 느낀 점

프로젝트 결과물에 대한 점수는 10점 만점에 10점, 저에 대한 점수는 6.5점 정도 되는 거 같습니다.

프로젝트 결과물에 대한 점수가 10점을 준 이유는 팀원과의 협업 과정에서 원할한 소통 및 회의를 통해 필수 구현 사항은 물론 추가적인 댓글, 코드 하이라이트 기능, 프로필 사진 등록, 닉네임 변경 등 추가적인 도전 과제 항목을 잘 챙긴 거 같아서 만점입니다!
개인적으로 스스로에 대한 점수가 왜 6.5점인지 아쉬운 점을 말씀드리자면, 로그인, 회원가입 기능을 구현하면서 디테일적인 부분을 좀 더 살리지 못한 점과 supabase에 대한 이해도가 조금 떨어지는 바람에 코드가 살짝 지저분해 보인다는 것이 많이 아쉽습니다.
그리고 과제를 시작하기에 앞서 처음부터 "redux로 전역 상태 관리 초기 셋업을 해뒀다면 어땠을까? 조금은 더 수월하지 않았을까?" 하는 생각은 들었으나, props drilling으로 시작한 거 치고 만족스러운 결과물이 나온 거 같아서 좋습니다.