MBTI test(트러블 슈팅1🌟)

심화 주차에서는 json-server, axios, 인증인가, Tanstack query, Zustand, Tailwind 등 많은 것을 배워서 좀 어려웠던 것 같다. 최대한 배운 내용을 과제할 때 활용해봐야겠다고 생각했다. 배운 내용을 활용해 보기 위한 React 심화 주차 개인과제 주제는 무료 MBTI test 사이트를 만드는 것이였다. 흥미로운 주제였던 만큼 흥미로운 오류들도 많이 발생하였다 ㅜㅜ 그래서 오늘은 React 심화 주차 개인과제에 대해서 트러블 슈팅을 작성해보겠다!

 

 

 

 

 

 

1. 문제 발생❓

로그인 및 회원가입 기능 구현 중 API 호출 시 다음과 같은 오류가 발생했다

Error: Request failed with status code 400
Response data: { "error": "Invalid request. Password field not found." }

 

로그인과 회원가입 기능 구현 로직을 작성하고 실제로 인증 요청을 하였을 때, "유효한 요청이 아니다, 비밀번호 필드를 찾을 수 없다."라는 오류 메세지를 받게 되었다.

그래서 원래 내 코드를 다시 한 번 확인해보았다.

 

 

< 원래 코드 >

import React, { useState } from "react";
import { Link } from "react-router-dom";

const AuthForm = ({ mode, onSubmit }) => {
  const [formData, setFormData] = useState({
    id: "",
    pw: "",
    nickname: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const submitData =
      mode === "login" ? { id: formData.id, pw: formData.pw } : formData;
    onSubmit(submitData);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="id">아이디</label>
          <input
            type="text"
            id="id"
            name="id"
            value={formData.id}
            onChange={handleChange}
            placeholder="아이디"
            required
          />
        </div>
        <div>
          <label htmlFor="pw">비밀번호</label>
          <input
            type="password"
            id="pw"
            name="pw"
            value={formData.pw}
            onChange={handleChange}
            placeholder="비밀번호"
            required
          />
        </div>

        {mode === "signup" && (
          <div>
            <label htmlFor="nickname">닉네임</label>
            <input
              type="text"
              id="nickname"
              name="nickname"
              value={formData.nickname}
              onChange={handleChange}
              placeholder="닉네임"
              required
            />
          </div>
        )}
        <button type="submit">
          {mode === "login" ? "로그인" : "회원가입"}
        </button>
      </form>
      <div>
        {mode === "login" ? (
          <>
            <span>가입된 계정이 없으신가요? </span>
            <Link to="/signup">회원가입</Link>
          </>
        ) : (
          <>
            <span>이미 계정이 있으신가요? </span>
            <Link to="/login">로그인</Link>
          </>
        )}
      </div>
    </div>
  );
};

export default AuthForm;

 

 

 

 

 

2. 원인 추론 🔎

API 문서를 확인한 결과, 로그인 및 회원가입 요청의 body가 다음과 같이 정의되어 있었다.

json
{
  "id": "유저 아이디",
  "password": "유저 비밀번호",
  "nickname": "유저 닉네임" // 회원가입 시에만 필요
}

 

여기서 불일치를 발견했다.  코드와 API 문서를 비교한 결과, 비밀번호 필드의 이름이 일치하지 않았다.

• API 문서: 'password'
• 현재 내 코드: 'pw'

 

 

 

 

3. 해결 방안 📋

다음과 같이 코드를 수정했다.

• 'formData' 상태에서 'pw'를 'password'로 변경
• 비밀번호 입력 필드의 'name' 속성을 'password'로 변경
• 'handleSubmit' 함수에서 로그인 데이터 생성 시 'password' 사용

 

< 수정된 코드 >

import React, { useState } from "react";
import { Link } from "react-router-dom";

const AuthForm = ({ mode, onSubmit }) => {
  const [formData, setFormData] = useState({
    id: "",
    password: "",
    nickname: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const submitData =
      mode === "login" ? { id: formData.id, password: formData.password } : formData;
    onSubmit(submitData);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="id">아이디</label>
          <input
            type="text"
            id="id"
            name="id"
            value={formData.id}
            onChange={handleChange}
            placeholder="아이디"
            required
          />
        </div>
        <div>
          <label htmlFor="password">비밀번호</label>
          <input
            type="password"
            id="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            placeholder="비밀번호"
            required
          />
        </div>

        {mode === "signup" && (
          <div>
            <label htmlFor="nickname">닉네임</label>
            <input
              type="text"
              id="nickname"
              name="nickname"
              value={formData.nickname}
              onChange={handleChange}
              placeholder="닉네임"
              required
            />
          </div>
        )}
        <button type="submit">
          {mode === "login" ? "로그인" : "회원가입"}
        </button>
      </form>
      <div>
        {mode === "login" ? (
          <>
            <span>가입된 계정이 없으신가요? </span>
            <Link to="/signup">회원가입</Link>
          </>
        ) : (
          <>
            <span>이미 계정이 있으신가요? </span>
            <Link to="/login">로그인</Link>
          </>
        )}
      </div>
    </div>
  );
};

export default AuthForm;

 

 

 

 

 

4. 결과 ❤‍🔥

코드 수정 후, API 호출 시 더 이상 오류가 발생하지 않았다. 서버가 비밀번호 필드를 올바르게 인식하여 로그인 및 회원가입 기능이 정상적으로 작동하게 되었다! 

 

 

 

 

4-1. 교훈 🙏

• API 문서를 세심히 검토하는 것의 중요성을 깨달음! ⭐⭐⭐⭐⭐
• 프론트엔드와 백엔드 간의 데이터 구조 일관성 유지의 필요성!
• 변수명과 필드명의 정확성이 전체 시스템의 동작에 미치는 영향!
• 오류 메세지를 주의 깊게 일고 분석하는 것의 중요성! ⭐⭐⭐