알고리즘 코드카타

알고리즘 풀이1

아웃소싱 프로젝트

오늘 진행한 것

닉네임 추가

// Signup.jsx
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';

    const defaultPhotoUrl = '이미지 url';
    try {
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        inputs.email,
        inputs.password
      );
      await updateProfile(userCredential.user, {
        displayName: inputs.nickname,
        photoURL: defaultPhotoUrl
      });
      toast.success('회원가입이 되었습니다!');
      navigate('/login');
    } catch (error) {
      toast.error(errorMsg(error.code));
    }

// 회원가입 후 인풋창 비우기
    setInputs({
      email: '',
      nickname: '',
      password: ''
    });
  };

구글 로그인 추가, 새로고침 시에도 로그인 상태 유지하기

// Sign.jsx
import { signInWithEmailAndPassword, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

  const loginGoogle = async (e) => {
    e.preventDefault();
    const provider = new GoogleAuthProvider();
    try {
      const userCredential = await signInWithPopup(auth, provider);
      toast.success('로그인 되었습니다!');
      localStorage.setItem('accessToken', userCredential.user.accessToken);
      navigate('/');
      dispatch(login(userCredential.user));
    } catch (error) {
      console.log(error.message);
      toast.error('로그인에 실패했습니다. 다시 시도해주세요.');
    }
  };

React-Toastify로 유효성 검사 추가하기

1. yarn add react-toastify 설치

yarn add react-toastify

2. react-toastify 사용법

// index.js
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

// 필요한 파일에서 모듈 불러오기
// Signup.jsx
import { toast } from "react-toastify"

// toastify 알람 실행 함수 만들기
export default function Signup () {
  const checkInputs = () => {
    if (
      inputs.email.trim().length === 0 ||
      inputs.password.trim().length === 0 ||
      inputs.nickname.trim().length === 0
    ) {
      toast.error('정보를 모두 입력해주세요');
      resetInputs();
      return;
    }
    if (inputs.nickname.length < 2) {
      toast.error('닉네임은 2자 이상이어야 합니다');
      resetInputs();
      return;
    }
    return true;
  };

3. 다양한 알람 사용하기

// 성공 알람 (초록색 창)
const success = () => toast.success("Success!");

// 실패 알람 (빨간색 창)
const error = () => toast.error("Error!");

// 경고 알람 (노란색 창)
const warning = () => toast.warning("Warning!");

// 정보 알람
const info = () => toast.info("Info...");

https://fkhadra.github.io/react-toastify/introduction/
위 사이트에서 다양한 옵션들로 데모가 가능하니 참고!

UI 뼈대 만들기

실전 적용

Link 태그와 navigate

// 이전 코드
const moveLoginPage = (e) => {
  e.preventDefault();
  navigate('/login');
};

<span onClick={moveRegisterPage}>가입 하러가기</span>

  span {
   cursor: pointer;
   font-weight: bold;
   color: #f1cc13;
   margin-top: 10px;
  }

// 바꾼 코드
<Stlink to="/register">가입 하러가기</Stlink>

const Stlink = styled(Link)`
  cursor: pointer;
  font-weight: bold;
  color: #f1cc13;
  margin-top: 10px;
`;

Link

• <a> 태그를 만들어줌
• 마우스 커서를 갖다대면 어느 페이지로 이동할지 명시적으로 보여줌

useNavigate

• <a> 태그를 만들지 않고, 코드로 페이지를 이동함
• 페이지 이동 시 추가적인 코드를 작성할 수 있음
• 내가 작성한 코드에서의 <span> 태그는 개발자 도구로 어느 페이지로 가는지 확인은 불가함

---

오늘 정말 오류의 늪에서 벗어나질 못해서 매우 힘들었다ㅎ 그치만 오류를 해결할 때의 그 쾌감이란....! 여기까지 진행한 것만으로도 감격스럽지만 아직도 구현할 게 많다^^ 어제만 해도 거의 다 한 줄 알았는데 생각보다 오래 걸리는 거 같다. 내일 마저 마무리하는 게 목표! 새벽에 남아서 코딩하다가 같은 팀원분께서 개발자 도구를 열어서 속성을 보는 법도 알려주시고 좀 더 시멘틱하게 코드를 짜는 법을 알려주셨다. 수준별 수업 때 배웠던 개념을 프로젝트에서 직접 적용해보니 확 체감이 됐다. 항상 느끼는 거지만 좋은 동기를 많이 만나게 되는 건 참 큰 복인 거 같음!