6/3 TIL

📖 진행한 공부 📖

• 알고리즘 입문 문제 2문제
• 뉴스 피드 프로젝트 로그인 기능 구현

알고리즘 문제

1. 꼬리 문자열

문자열들이 담긴 리스트가 주어졌을 때, 모든 문자열들을 순서대로 합친 문자열을 꼬리 문자열이라고 합니다. 꼬리 문자열을 만들 때 특정 문자열을 포함한 문자열은 제외시키려고 합니다. 예를 들어 문자열 리스트 ["abc", "def", "ghi"]가 있고 문자열 "ef"를 포함한 문자열은 제외하고 꼬리 문자열을 만들면 "abcghi"가 됩니다.

문자열 리스트 str_list와 제외하려는 문자열 ex가 주어질 때, str_list에서 ex를 포함한 문자열을 제외하고 만든 꼬리 문자열을 return하도록 solution 함수를 완성해주세요.

제한사항

2 ≤ str_list의 길이 ≤ 10
1 ≤ str_list의 원소의 길이 ≤ 10
1 ≤ ex의 길이 ≤ 5

입출력 예시

나의 풀이

function solution(str_list, ex) {
    var answer = '';
    answer = str_list.filter((value) => {
        if(value.includes(ex)) {
            return false;
        }
        return true;
    })
    return answer.join("");
}

2. 문자 리스트 문자열로 반환

문자들이 담겨있는 배열 arr가 주어집니다. arr의 원소들을 순서대로 이어 붙인 문자열을 return 하는 solution함수를 작성해 주세요.

제한사항

1 ≤ arr의 길이 ≤ 200
arr의 원소는 전부 알파벳 소문자로 이루어진 길이가 1인 문자열입니다.

입출력 예시

나의 풀이

function solution(arr) {
return arr.reduce((acc,cur) => acc + cur, '');
}

알고리즘은 기초 수준이라 굉장히 쉽게 풀이한 느낌이 있다!

그리고 팀 프로젝트인 뉴스 피드 프로젝트의 로그인, 회원가입 기능을 구현해봤다. 공식 문서, 과제 발제하면서 제공된 supabase 가이드를 보고 구현을 해봤는데 코드가 되게 복잡해 보이고 지저분해 보인다 ㅠㅠ
API Key, url 같은 정보는 빼놓은 코드를 적어보겠다

Login Page

로그인 기능을 구현할 때 현재 로그인 상태, {닉네임}님 환영합니다! 같은 문구 등등 디테일을 챙기지 못한 점이 아쉽지만 당장은 필수 구현 사항을 구현하는 게 목적이기 때문에 후에 디테일을 추가해줄 예정이다.

코드

const LoginPage = ({ signIn, setSignIn, signOut }) => {
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const signInWithEmailPassword = async (e) => {
    e.preventDefault();
    try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password
      });
      if (error) {
        throw error;
      }
      if (data.user) {
        setSignIn(true);
        navigate('/');
      } else {
        alert('등록된 정보가 아닙니다. 회원가입을 진행해주세요.');
      }
    } catch (error) {
      console.error('로그인 중 오류 발생:', error.message);
      alert('존재하지 않는 아이디, 비밀번호입니다.');
    }
  };

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

    if (error) {
      console.error('깃허브 로그인 에러', error.message);
      alert('로그인 오류가 발생하였습니다, 다시 시도해주세요.');
    } else {
      const { user } = data;
      if (user) {
        navigate('/');
      } else {
        alert('회원가입이 필요합니다.');
        navigate('/signup');
      }
    }
  }

  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
      if (session) {
        setSignIn(true);
      } else {
        setSignIn(false);
      }
    });

    return () => {
      authListener?.subscription?.unsubscribe();
    };
  }, [setSignIn]);

  return (
    <Container>
      <Title>로그인 페이지</Title>
      {signIn ? (
        <>
        <p>`${data.nickname}님 환영합니다!`</p>
        <Button onClick={signOut}>로그아웃</Button>
        </>
      ) : (
        <Form onSubmit={signInWithEmailPassword}>
          <Label htmlFor="email">아이디:</Label>
          <Input type="text" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
          <Label htmlFor="password">비밀번호:</Label>
          <Input
            type="password"
            id="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <Button type="submit">로그인</Button>
          <Button type="button" onClick={signInWithGithub}>
            GitHub로 로그인
          </Button>
          <Button type="button" onClick={() => navigate('/signup')}>
            회원가입
          </Button>
        </Form>
      )}
    </Container>
  );
};

export default LoginPage;

작동 확인

정상적으로 작동되는 걸 볼 수 있다. 로그인을 한 상태일 시에 헤더 부분의 로그인 버튼이 로그아웃 버튼으로 바뀌게끔 하는 건 메인페이지, 헤더 부분을 맡으신 팀원 분의 몫이지만 같이 해보고 싶은 마음

어렵긴 어려운데 뭔가 기능이 착착 구현되는 걸 보면 뿌듯해서 힘든 것도 잊어버리는 거 같다(?)