회원가입 폼 백엔드로 데이터 전송 - axios설치, RegisterPage작성

 

앞서 준비 작업을 마쳤다면 회원가입 폼의 입력값을 백엔드 API로 전송해서 실제 회원가입 처리를 해야한다.

 

 

| Axios 설치하기

 

React에서 백엔드 API 호출을 위해 가장 많이 사용되는 라이브러리중 하나인 axios가 필요하다.

frontend 디렉터리에서 아래 명령어로 설치한다.

npm install axios

 

axios 더 자세히 알기>

 

 

| RegisterPage.js 수정

 

axios를 사용해 POST /api/auth/register 요청을 보내는 로직을 추가한다.

 

// frontend/src/pages/RegisterPage.js
import React, { useState } from 'react';
import axios from 'axios';

function RegisterPage() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
  });

  const [message, setMessage] = useState('');

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:5000/api/auth/register', formData);
      setMessage('회원가입 성공! 🎉');
      console.log(res.data); // 받은 응답 출력
    } catch (err) {
      console.error(err);
      setMessage(err.response?.data?.message || '회원가입 실패 😢');
    }
  };

  return (
    <div>
      <h2>회원가입</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="username"
          placeholder="사용자명"
          value={formData.username}
          onChange={handleChange}
        /><br />
        <input
          type="email"
          name="email"
          placeholder="이메일"
          value={formData.email}
          onChange={handleChange}
        /><br />
        <input
          type="password"
          name="password"
          placeholder="비밀번호"
          value={formData.password}
          onChange={handleChange}
        /><br />
        <button type="submit">회원가입</button>
      </form>
      {message && <p>{message}</p>}
    </div>
  );
}

export default RegisterPage;

 

/ useState : 사용자 입력값과 메시지 상태 관리

컴포넌트 상태로 저장하면 이후 조건부 렌더링, 유효성 검사, 제출 처리 등 다양한 UI 상태 제어가 가능해진다.

 

/ handleChange : 입력 필드 상태를 실시간으로 업데이트

setFormData(prev => ({ ... })) : 이전 상태(prev)를 복사하고, 새로 입력된 값을 덮어씌워서 상태를 최신화한다.

 

/ handleSubmit : aixos를 통해 백엔드로 POST 요청을 보낸다.

- e.preventDefault() : 폼 제출시 기본동작(페이지 새로고침)을 막는다. 꼭 필요.

- http://localhost:5000/api/auth/register : 백엔드 서버주소이고 포트는 서버의 실제 포트와 일치해야 한다.

e

- axios.post(...) : formData를 JSON 형태로 백엔드의 /api/auth/register 엔드포인트에 POST 방식으로 전송한다. 이 요청은 비동기이므로 await를 사용해 응답을 기다린다.

 

 

| 테스트

브라우저에서 http://localhost:3000/register 접속하고 회원가입 정보를 입력한다.

백엔드 서버 콘솔 또는 MongoDB에 실제 데이터가 저장되는지 확인한다.

 

 

 

보기좋게 회원가입 실패를 했다.

 

브라우저 Console을 확인해보니 AxiosError라고 뜬다.

 

 

이는 프론트엔드에서 백엔드 서버로의 요청 자체가 실패 했을 때 발생한다. 즉, React앱 (포트 3000번)에서 Express서버(포트 5000)로 요청을 보내려다 실패한 상황이다.

 

1) 백엔드 서버가 꺼져있을 때

localhost:5000에 접근할 수 없기 때문에 Network Error.

 

2) 백엔드 서버 주소가 잘못 되었을 때

오타, 포트번호 틀림 등.

 

3) CORS 설정이 빠졌거나 잘못 되었을 때

express 백엔드에 cors 미들웨어가 없거나 제대로 설정되지 않으면 막힌다.

 

등등 있는데 지금의 경우는 단순히 백엔드 서버를 켜지 않아서였다. 

 

backend에서 npm run dev로 서버를 켜고 다시 회원가입을 입력하니 성공!!

브라우저 콘솔에도 입력한 정보를 확인할 수 있다.

 

 

 

 

 

지금까지 작업을 완료했는데 매우 불편함을 느꼈다.

조금전처럼 백엔드서버와 프론트엔드 서버를 따로 켜야하는 번거로움을 해결해야 한다.

 

 

| 백엔드와 프론트엔드 서버 켜기

 

방법은 cuncurrently 모듈을 사용하는 것이다.

지금 프로젝트에서는 루트 경로에 설치해 사용하는 방법으로 한다.

cuncurrently 모듈 알아보기>

 

 

 

| CORS 허용

 

한가지 빼먹은 것이 있다. 

이미 백엔드 설정할때 설치는 했지만 필요한 현 시점에서 CORS에 대한 설명도 필요할 것 같다. 

CORS 알아보기>