EIF 2: First Project (2) - try, catch 에러

try, catch 구문

프론트엔드에서 도움 요청이 왔었습니다.

비동기 요청이 정상적으로 작동이 안 되어서 어떻게 고치면 될지에 관한 것이었는데요.

아래와 같은 코드로 되어있었습니다.

try {
      if (!(email !== "" && password !== "")) {
        setEmailErrorMessage("이메일을 입력하세요");
        setPasswordErrorMessage("비밀번호를 입력하세요");
      } else if (!EmailValidation(email)) {
        setEmailErrorMessage("이메일 형식이 올바르지 않습니다.");
      } else {
        // 유효성 검사 통과 후 로그인 요청
        axios
          .post("http://localhost:4000/auth/login", loginState, {
            withCredentials: true,
          }) //서버에 아이디와 비번 보내기
          .then((res) => {
            const accessToken = getToken(); //Local Storage에 저장된 토큰 accessToken에 할당
            dispatch(handleLogin(accessToken)); //store state에 accessToken 저장
            isAuthenticated();
          });
      }
    } catch (err) {
      setEmailErrorMessage("아이디 또는 비밀번호가 잘못 입력 되었습니다");
      setPasswordErrorMessage("아이디와 비밀번호를 정확히 입력해 주세요");
    }

try와 catch 블럭으로 나누고, try 부분에 axios를 사용해서 부분적으로 비동기 요청을 하고 있었습니다.

아이디와 비밀번호를 

이렇게 표현하니 아래와 같이 에러가 발생했습니다.

 

 

생각해보니 전체 실행에서 에러가 났을 때 "아이디 또는 비밀번호가 잘못 입력되었습니다"가 떠야 하는 게 아니라,

서버에 요청을 보낸 후 받아온 결과에서 에러가 있을 때 저 문구가 떠야했습니다.

따라서 아래와 같이 try catch block을 사용하지 않고, axios 안에 catch를 넣어주는 구조로 바꿔주었습니다.

if (!(email !== "" && password !== "")) {
      setEmailErrorMessage("이메일을 입력하세요");
      setPasswordErrorMessage("비밀번호를 입력하세요");
    } else if (!EmailValidation(email)) {
      setEmailErrorMessage("이메일 형식이 올바르지 않습니다.");
    } else {
      // 유효성 검사 통과 후 로그인 요청
      axios
        .post("http://localhost:4000/auth/login", loginState, {
          headers: {
            Authorization: getToken(),
          },
        })
        .then((response) => {
          console.log("response", response.data);
          const accessToken = getToken(); //Local Storage에 저장된 토큰 accessToken에 할당
          dispatch(handleLogin(accessToken)); //store state에 accessToken 저장
          isAuthenticated();
        })
        .catch((error) => {
          console.log("error", error.response);
          setEmailErrorMessage("아이디 또는 비밀번호가 잘못 입력 되었습니다");
          setPasswordErrorMessage("아이디와 비밀번호를 정확히 입력해 주세요");
        });
    }

 

그렇게 바꾸니 아래와 같이 어떤 에러인지가 잘 표시되었습니다.