[WIL] 2023.02.27 ~ 2023.03.05. 18주 차

유진·2023년 3월 5일

WIL

WIL Weekly I Learned

목록 보기

17/21

2023.03.05.(주일)

WIL Weekly I Learned

* The four Fs

▶ FACTS(사실, 객관) : 이번 일주일 동안 있었던 일, 내가 한 일
보다 나은 성능을 위해 '리코일'을 사용했다. 내가 만든 모든 모달창을 전역으로 사용했다. 로그인, 회원가입, 비밀번호 찾기, 회원정보 수정 모달 창을 말이다.
useState보다 'useForm'을 더 적극적으로 사용하려고 했다.
모바일에서도 사용할 수 있도록 '반응형'을 구현 중이다.
'설문지'를 통해 실제 고객 피드백을 받기 위해 작성하였다.

▶ FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
항상 프로젝트할 때마다 짧으면 일주일, 길면 이주일로 너무나도 시간이 부족하게 만들었다. Picspot 프로젝트는 이제 4주 차가 끝나고 5주 차로 시작이 된다. 한 달 정도 이것에 몰입하다 보니까 부족한 면이 보여 더 좋게 바꾸려고 노력하였다. 그러다 보니 더 정이가고, 더 잘 해보고 싶었다. 그 전에는 코드 짜고 제출하기 바빴다면 이번에는 어떤 코드들이 더 이득인지 찾아보게 되었다. 그래서 리코일과 useForm을 사용할 수 있었다.

▶ FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
'리코일'로 모든 모달 창을 전역에서 사용하니까 편리함이 컸다. 예를 들어 로그인을 하지 않고 글 작성, 댓글 작성, 팔로우 등을 하면 로그인 창을 바로 띄어주는 것이다. const [closeLoginModal, setCloseLoginModal] = useRecoilState(loginModalAtom); 이것만 있으면 어디든 로그인 모달 창을 손쉽게 사용할 수 있다.

'useForm'은 로그인 할 때, 회원정보 수정 완료 할 때 사용하였다. 여러 개의 input element를 다루거나, 다양한 옵션과 기능을 활용하고자 할 때, useForm을 사용하는 것이 더욱 편리하고 효율적이었다.

const onClickLoginHandler = async (data: AuthForm) => {
    // if (error !== '') setError('');

    setAuthenticating(true);
    await signInWithEmailAndPassword(authService, data.email, data.password)
      .then((res) => {
        customAlert('로그인에 성공하였습니다!');
        props.closeLoginModal();
      })
      .catch(() => {
        setError('password', {
          type: 'invalid',
          message: '비밀번호를 잘못 입력하셨어요',
        });
        setAuthenticating(false);
        // setError('Failed Login');
      });
  };

'반응형'은 Native만 배워 보았는데, 이런 식으로 바로 styled component에 사용할 수 있어서 편리했다.

const LoginEmailPwContainer = styled.div`
  display: flex;
  flex-direction: column;
  width: 90%;
  @media ${(props) => props.theme.mobile} {
    gap: 8px;
  }
`;

역시 딱 한 번 해보았던 반응형이라 이번이 두 번째 사용해 보는 것인데 익숙하지 않다. 그래도 재밌게 구현하는 중이다.

▶ FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할지
picspot 홈페이지
picspot 설문지
설문지는 마감이 되면 보이지 않을 것 같아서 사진과 함께 남겨두겠다.