Toastyfy and createAccount

노마드 코더는 원하는 것들을 Hooks에 넣어서 코딩을 하는 것을 좋아합니다. 또한 개발하다가 하나의 Container가 커지면 폴더를 만들어서 스타일과 컴포넌트를 분리하여 진행합니다. 이전에 작성하였던 Auth.js파일이 커짐에 따라 Routes 폴더 아래에 Auth 디렉토리를 새롭게 만들어 사용하였고 분리하였습니다. 해당 폴더 구조는 다음과 같습니다.

Apollo-React Query 사용법

아무리 똑똑한 개발자라고 하더라도 백엔드에서 만들어두었던 모든 쿼리를 기억하기는 어렵습니다. 하물며, 백엔드와의 협업을 통해 개발을 진행하는 동안에는 실시간으로 업데이트 되고 있는 쿼리가 무엇인지 알 수가 없습니다. 물론 미팅을 통해 많은 내용을 정의한 노트를 가지고 있으면 이 방법을 사용하지 않을 수도 있습니다. 다만 백엔드가 어느정도 개발이 되어 있는 동안, Apollo를 사용한다고 하면 아래와 같은 방법을 통해 쿼리를 확인 할 수 있습니다.

바로, Chrome의 확장 프로그램인 Apollo Dev Tools입니다. 이것은 이전 강의 복습편에서도 설명을 드린 적이 있습니다. 구글 크롬에서 확장 툴로 Apollo Dev Tools을 이용하게 되면 아래의 사진과 같이 쿼리를 찾을 수 있습니다.

toastify 설정

toastify는 위 그림과 같이 원하는 사용을 유도하기 위해 띄우는 모달과도 같은 장치라고 생각하시면 됩니다. 노마드 코더는 여기서 회원가입이 되어 있지 않은 이메일을 기입하였을 때 이메일을 유도하는 toastify 창을 설정하였습니다.

노마드 코더는 여기서 React-apollo-hooks의 useMutation안에 넣어 사용하였습니다. useMutation에서는 많은 것들을 할 수 있는데 useMutation의 Option에서 기본적으로 update가 발생하면 result를 얻는 결과를 보여줍니다. 하지만 지금은 toastify를 다루는 이야기이니 useMutation에 관한 내용은 나중에 자세히 다루겠습니다. 또한 Toastify의 세부적인 내용은 Toastify 깃허브 페이지에 가시면 나와 있습니다. 일반적인 사용법입니다. src/Routes/Auth/AuthContainer.js

const [requestSecret] = useMutation(LOG_IN, {
    update: (_, { data }) => {
      const { requestSecret } = data;
      if (!requestSecret) {
        toast.error("You dont have an account yet, create one");
        setTimeout(() => setAction("signUp"), 3000);
      }
    },
    variables: { email: email.value }
  });

인디매이커로 가시면 어떻게 실행하는지 볼 수 있으며 위에서 보시다 시피 사용법은 임포트하여 쓰기만 하면 되는 대단히 간단한 사용법을 가지고 있습니다. 아래의 사진과 같이 Position과 Type을 지정할 수 있습니다. 즉, View에서 어디 위치에서 모달이 나올지 정할 수 있으며 position 값이 내장되어 있습니다.

AuthContatiner

src/Routes/Auth/AuthContainer.js의 코드를 한번 상세히 살펴보겠습니다.

import React, { useState } from "react";
import AuthPresenter from "./AuthPresenter";
import useInput from "../../Hooks/useInput";
import { useMutation } from "react-apollo-hooks";
import { LOG_IN, CREATE_ACCOUNT } from "./AuthQueries";
import { toast } from "react-toastify";

export default () => {
  const [action, setAction] = useState("logIn"); // useState의 사용법입니다.
  const username = useInput("");                 // 사용하기 위해서 하나의 변수당 하나의 useState를 사용하여야 합니다.
  const firstName = useInput("");        // useInput은 Hooks로 const [value, setValue] = useState(defaultValue);
  const lastName = useInput("");         // 위 내용과 같습니다.
  const email = useInput("");
  const [requestSecret] = useMutation(LOG_IN, {
    update: (_, { data }) => {        // useMutation의 update는 result 값을 가지고 옵니다.
      const { requestSecret } = data;
      if (!requestSecret) {
        toast.error("You dont have an account yet, create one");  // toast로 requestSecret 값이 없으면 모달을 띄우고
        setTimeout(() => setAction("signUp"), 3000);              // 3초 뒤에 라우터 설정으로 sighUp 페이지로 이동하게 됩니다.
      }
    },
    variables: { email: email.value }
  });

  const createAccount = useMutation(CREATE_ACCOUNT, {  // 값이 들어있도록 설정하는 코드입니다.
    variables: {
      email: email.value,
      username: username.value,
      firstName: firstName.value,
      lastName: lastName.value
    }
  });

  const onSubmit = e => {  // submit 버튼을 눌렀을 때 처리하는 부분입니다.
    e.preventDefault();
    if (action === "logIn") {
      if (email.value !== "") {
        requestSecret();
      } else {
        toast.error("Email is required");
      }
    } else if (action === "signUp") {  
      if (   // 모든 값이 다 들어 있을 때에 createAccount 함수를 호출하도록 설정하였습니다.
        email.value !== "" &&
        username.value !== "" &&
        firstName.value !== "" &&
        lastName.value !== ""
      ) {
        createAccount();
      } else {
        toast.error("All field are required");
      }
    }
  };

  return (
    <AuthPresenter
      setAction={setAction}
      action={action}
      username={username}
      firstName={firstName}
      lastName={lastName}
      email={email}
      onSubmit={onSubmit}
    />
  );
};

참고자료

• academy.nomadcoders.InstagramClonCoding