6/5 TIL

📖 진행한 공부 📖

• 프로그래머스 알고리즘 입문 문제 홀수vs짝수
• 헤더 컴포넌트 디테일 수정
• 회원가입 절차 중복확인 및 비밀번호 확인

프로그래머스 홀수 vs 짝수

문제 정의 : 정수 리스트 num_list가 주어집니다. 가장 첫 번째 원소를 1번 원소라고 할 때, 홀수 번째 원소들의 합과 짝수 번째 원소들의 합 중 큰 값을 return 하도록 solution 함수를 완성해주세요. 두 값이 같을 경우 그 값을 return합니다.

제한사항
5 ≤ num_list의 길이 ≤ 50
-9 ≤ num_list의 원소 ≤ 9

입출력 예시 및 설명

나의 풀이

function solution(num_list) {
    let evenNumber = 0;
    let oddNumber = 0;
    
    for(let i = 0; i < num_list.length; i++) {
        if((i + 1) % 2 === 0) {
            evenNumber += num_list[i]
        } else {
            oddNumber += num_list[i]
        };
    }
    return evenNumber > oddNumber ? evenNumber : oddNumber;
}

다른 사람의 풀이

function solution(num_list) {
    let even = 0;
    let odd = 0

    num_list.map((v, idx) => {
        !(idx % 2) ? even += v : odd += v; 
    })

    return odd > even ? odd : even; 
}

map 메서드를 사용해서 풀이할 수도 있구나 하고 배워갔다. 그러고 보니 나는 알고리즘을 풀면 거진 for문을 많이 애용하는 거 같은데 다른 방법으로 푸는 방법도 연습을 좀 해야겠다고 느꼈다.

헤더 컴포넌트 디테일 수정

헤더 부분에 디테일적인 결함이 있었는데, 해당 역할을 맡은 팀원 분이 다른 기능을 구현하시느라 나중에 하신다 하셨었는데
그렇게 어려운 부분도 아니고 해서 대신 수정을 진행했다.

모든 라우터들을 감싸주는 HomeHeader 부분인데 props로 signIn, signOut을 받아와서 현재 로그인이 돼있는 상태면 헤더 부분의 버튼을 로그아웃 버튼으로, 로그아웃 상태면 로그인 버튼으로 보이게끔 했다.

근데 문제가 있었는데, 이 헤더 부분이 홈페이지에선 로그인의 상태에 따라 잘 나타나는데 글쓰기 버튼을 눌러서 commitdetail로 페이지를 옮겨가면 헤더에서 로그아웃 상태일 때만 보여주는 로그인 버튼을 보여주는데 사실상 signIn 상태는 true이므로 헤더 부분의 문제였다.

이 문제는 HomeHeader 컴포넌트의 중복이 문제였다.
HomeFeed, HomeHeader 컴포넌트를 구성하고 있는 Home.jsx에서도 HomeHeader를 쓰고 있었기에 Home.jsx에서 HomeHeader를 없애주니깐 바로 정상 작동을 했다.

회원가입 절차 중복 확인 및 비밀번호 확인

일단 supabase에는 기본적으로 이미 등록된 이메일은 중복으로 회원가입이 안되게끔 돼있는데, 기본 탑재된 기능 외에 회원가입 버튼을 눌렀을 시에 이메일 인풋창 아래에 중복 에러 메세지를 띄워주고 싶었다.

회원가입 절차 중복 확인 코드

const SignUpPage = () => {
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [mismatchPassword, setMismatchPassword] = useState(false);
  const [confirmPassword, setConfirmPassword] = useState('');
  const [nickname, setNickname] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [emailError, setEmailError] = useState(false);
  const [nicknameError, setNicknameError] = useState(false);

  const signUpWithEmail = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setEmailError(false);
    setNicknameError(false);
    setMismatchPassword(false);

    if(password !== confirmPassword) {
      setMismatchPassword(true);
      setIsSubmitting(false);
      return;
    }
    try {
      const { data: existEmail, error: existEmailError } = await supabase
        .from('users')
        .select('email')
        .eq('email', email)
        .single();

      if (existEmailError) {
        throw existEmailError;
      }

      if (existEmail) {
        setEmailError(true);
        setIsSubmitting(false);
        return;
      }

      const {data: existNickname, error: existNicknameError } = await supabase
      .from('users')
      .select('nickname')
      .eq('nickname', nickname)
      .single();

      if(existNicknameError) {
        throw existNicknameError;
      }

      if(existNickname) {
        setNicknameError(true);
        setIsSubmitting(false);
        return;
      }

      const { error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          data: {
            nickname
          }
        }
      });

      if (error) {
        throw error;
      }

      const { error: insertError } = await supabase
      .from('users')
      .insert({nickname, email})

      if(insertError) {
        throw insertError;
      }
      
      navigate('/login');
    } catch (error) {
      console.error('회원가입 오류 발생', error);
    } finally {
      setIsSubmitting(false);
    }
  };


  const handleSignUp = async () => {
    try {
      setIsSubmitting(true);
      const { error } = await supabase.auth.signInWithOAuth({
        provider: 'github'
      });

      if (error) {
        throw error;
      }

      navigate('/');
    } catch (error) {
      console.error('GitHub 로그인 중 오류 발생:', error.message);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Container>
      <Title>회원가입 페이지</Title>
      <Form onSubmit={signUpWithEmail}>
        <Input
          type="email"
          name="email"
          placeholder="이메일"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        {emailError && <DoubleCheck>이미 사용 중인 이메일입니다 다른 이메일을 입력해주세요.</DoubleCheck>}
        <Input
          type="password"
          name="password"
          placeholder="비밀번호"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <Input
          type="password"
          name="confirmPassword"
          placeholder="비밀번호 확인"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
          required
        />
        {mismatchPassword && <DoubleCheck>비밀번호가 일치하지 않습니다 다시 입력해주세요.</DoubleCheck>}
        <Input
          type="text"
          name="nickname"
          placeholder="닉네임"
          value={nickname}
          onChange={(e) => setNickname(e.target.value)}
          required
        />
        {nicknameError && <DoubleCheck>이미 사용 중인 닉네임입니다 다른 닉네임을 사용해주세요.</DoubleCheck>}
        <Button type="submit" disabled={isSubmitting}>
          {isSubmitting ? '가입 중...' : '회원가입'}
        </Button>
      </Form>
      <Button onClick={handleSignUp} disabled={isSubmitting}>
        {isSubmitting ? '로딩 중...' : 'GitHub로 회원가입'}
      </Button>
      <Button onClick={() => navigate('/login')}>로그인</Button>
    </Container>
  );
};

export default SignUpPage;

이렇게 코드를 작성하니 오류가 발생했다. 그래서 문제의 근원지를 찾아보니 single() 메서드의 문제인 거 같았다.

single() 메서드는 정확히 하나의 데이터 행을 받고 싶을 때 사용된다. 이 메서드는 데이터베이스에서 하나의 행만 반환되어야 하며, 그렇지 않을 경우 오류를 발생시킨다.

생각해 보면 오류가 없고 결과값이 존재하지 않는다면 그 이메일은 사용 가능하다고 처리를 하고 싶은 게 내 의도인데
single() 메서드의 특성상 데이터베이스에 존재하지 않으면 오류를 내보내서 문제가 된 것이다.

또한 아래 코드를 보면 이미 signUp을 통해 닉네임을 받고 있는데, 아래에 insert를 통해 닉네임을 또 넣어주고 있기에 로직의 문제가 있는 거 같았다.

const { error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          data: {
            nickname
          }
        }
      });

      if (error) {
        throw error;
      }

      const { error: insertError } = await supabase
      .from('users')
      .insert({nickname, email})

      if(insertError) {
        throw insertError;
      }

해당 문제를 고치기 위해서 중복된 부분을 제거하고, 쓸모없는 변수명을 제거해줬다.

수정 후 코드

const SignUpPage = () => {
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [mismatchPassword, setMismatchPassword] = useState(false);
  const [confirmPassword, setConfirmPassword] = useState('');
  const [nickname, setNickname] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [emailError, setEmailError] = useState(false);
  const [nicknameError, setNicknameError] = useState(false);

  const signUpWithEmail = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setEmailError(false);
    setNicknameError(false);
    setMismatchPassword(false);

    if(password !== confirmPassword) {
      setMismatchPassword(true);
      setIsSubmitting(false);
      return;
    }
    try {
      const { data: existEmail } = await supabase
        .from('users')
        .select('email')
        .eq('email', email)
        .single();

      if (existEmail) {
        setEmailError(true);
        setIsSubmitting(false);
        return;
      }

      const {data: existNickname } = await supabase
      .from('users')
      .select('nickname')
      .eq('nickname', nickname)
      .single();

      if(existNickname) {
        setNicknameError(true);
        setIsSubmitting(false);
        return;
      }

      const { error } = await supabase.auth.signUp({
        email,
        password,
      });

      if (error) {
        throw error;
      }

      const { error: insertError } = await supabase
      .from('users')
      .insert({nickname, email})

      if(insertError) {
        throw insertError;
      }
      
      navigate('/');
      alert(`회원가입이 완료되었습니다. ${nickname}님 환영합니다!`);
    } catch (error) {
      console.error('회원가입 오류 발생', error.message);
    } finally {
      setIsSubmitting(false);
    }
  };


  const handleSignUp = async () => {
    try {
      setIsSubmitting(true);
      const { error } = await supabase.auth.signInWithOAuth({
        provider: 'github'
      });

      if (error) {
        throw error;
      }

      navigate('/');
    } catch (error) {
      console.error('GitHub 로그인 중 오류 발생:', error.message);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Container>
      <Title>회원가입 페이지</Title>
      <Form onSubmit={signUpWithEmail}>
        <Input
          type="email"
          name="email"
          placeholder="이메일"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        {emailError && <DoubleCheck>이미 사용 중인 이메일입니다 다른 이메일을 입력해주세요.</DoubleCheck>}
        <Input
          type="password"
          name="password"
          placeholder="비밀번호"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <Input
          type="password"
          name="confirmPassword"
          placeholder="비밀번호 확인"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
          required
        />
        {mismatchPassword && <DoubleCheck>비밀번호가 일치하지 않습니다 다시 입력해주세요.</DoubleCheck>}
        <Input
          type="text"
          name="nickname"
          placeholder="닉네임"
          value={nickname}
          onChange={(e) => setNickname(e.target.value)}
          required
        />
        {nicknameError && <DoubleCheck>이미 사용 중인 닉네임입니다 다른 닉네임을 사용해주세요.</DoubleCheck>}
        <Button type="submit" disabled={isSubmitting}>
          {isSubmitting ? '가입 중...' : '회원가입'}
        </Button>
      </Form>
      <Button onClick={handleSignUp} disabled={isSubmitting}>
        {isSubmitting ? '로딩 중...' : 'GitHub로 회원가입'}
      </Button>
      <Button onClick={() => navigate('/login')}>로그인</Button>
    </Container>
  );
};

export default SignUpPage;

중복 확인 부분 오류를 찾고 고치느라 머리가 실시간으로 빠지는 게 느껴지는 거 같다.. 지끈지끈

데이터베이스에 있는 1개의 정보를 가지고 테스트를 해봄

중복된 이메일의 경고 문구에 대해선 잘 출력이 되는데 이미 khj5 라는 닉네임이 있음에도 닉네임에 대한 중복 경고 문구는 출력이 안 되는 상황이 일어났다.

문제를 일으키는 코드를 살펴봤다.

수정 전 코드

      const { data: existEmail } = await supabase
        .from('users')
        .select('email')
        .eq('email', email)
        .single();

      if (existEmail) {
        setEmailError(true);
        setIsSubmitting(false);
        return;
      }

      const {data: existNickname } = await supabase
      .from('users')
      .select('nickname')
      .eq('nickname', nickname)
      .single();

      if(existNickname) {
        setNicknameError(true);
        setIsSubmitting(false);
        return;
      }

해당 코드를 보면 이미 존재하는 이메일이 있을 경우에 이메일 중복 경고 문구를 출력함과 동시에 return을 해버리기 때문에 그 아래에 있는 닉네임 중복 문구 출력 코드가 작동이 안 하는 걸수도 있겠다 싶어서 코드의 로직을 살짝 수정했다.

수정한 코드

const { data: existEmail } = await supabase
        .from('users')
        .select('email')
        .eq('email', email)
        .single();

      const {data: existNickname } = await supabase
      .from('users')
      .select('nickname')
      .eq('nickname', nickname)
      .single();

      if(existEmail || existNickname) {
        if(existEmail) {
          setEmailError(true);
        }
        if(existNickname) {
          setNicknameError(true);
        }
        setIsSubmitting(false);
        return;
      }

논리연산자를 사용해서 중복 확인 절차를 동시에 수행할 수 있도록 수정을 진행했다.

코드를 수정하고 난 후 작동 결과물을 살펴보겠음

이메일과 닉네임의 중복 확인 문구, 비밀번호 불일치 문구까지 다 뜨는 걸 볼 수 있다!!

이메일만 중복되지 않게 바꿔봤는데 경고 문구 출력이 이제서야 올바르게 잘 작동되는 거 같다.

모두 다 올바르게 입력하고 회원가입을 누르면 이렇게 성공적으로 회원가입 성공 문구가 뜨는 것도 볼 수가 있다.

supabase에 대한 이해도가 조금만 더 깊었다면 디테일적인 부분을 더 잘 살릴 수 있었을 텐데 하는 아쉬움이 있다.

오늘 redux로 전역 상태 관리까지 끝내보려 했는데 redux가 너무 골치아프네?