[React, Express] 회원가입 페이지 제작(POST 요청)

[EZ_Scheduler] - [React, Express] 서버 구현 및 데이터베이스 연결하기(REST API)

[React, Express] 서버 구현 및 데이터베이스 연결하기(REST API)

이전 개발 일지 읽어보기!

📌회원가입 페이지 제작

안녕하세요, 대학생 개발자 주이어입니다!

오늘은 회원가입 페이지를 제작한 후 저번에 만든 서버와 데이터베이스를 이용해
데이터 추가까지 구현해보려고 합니다. 재미있게 구경해주세요!

---

✅프로젝트 목표

1. 회원가입 페이지 스타일링
2. POST API를 이용한 데이터 추가 구현
3. 회원가입 후 로그인 진행(데이터 실시간 연동)

ℹ️기술 스택

• 프론트엔드 : Html, Css
• 백엔드 : Node.js
• 프레임워크 : React.js, Express.js
• 데이터베이스 : MySQL
• 빌드도구 : Vite

---

1. Account(회원가입) 페이지 제작

회원가입 페이지는 따로 UI/UX를 진행하지 않았다. 왜냐하면 로그인 페이지와 디자인을 거의 비슷하게 해줄 생각이기 때문이다.

return (
    <div className="Account">
      <div className="AccountHeader">
        <h1>회원가입</h1>
        <h5>일정을 관리할 준비가 되었나요?</h5>
      </div>
      <div className="AccountBody">
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            placeholder="UserName"
            onChange={(e) => setUserId(e.target.value)}
          />
          <input
            type="password"
            placeholder="Password"
            onChange={(e) => setUserPw(e.target.value)}
          />
          <input
            type="password"
            placeholder="Re-enter Password"
            onChange={(e) => setConfirmPw(e.target.value)}
          />
        </form>
      </div>
      <div className="AccountBottom">
        <Button onClick={handleSubmit} text={"회원가입"}></Button>
      </div>
    </div>
  );

먼저 Account.jsx의 랜더링 코드이다. Header, Body, Bottom 세 부분으로 나누어 작성해주었다. 이후 서버에 데이터를 보내기 위해 form태그를 사용해주었다. 

.Account {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  height: 100vh;
  justify-content: space-around;
}
 
.AccountHeader {
  text-align: center;
  flex: 1;
}
 
.AccountHeader > h1 {
  margin: 30px 0 10px 0;
  font-size: 40px;
}
 
.AccountHeader > h5 {
  margin: 0;
  color: rgb(150, 150, 150);
}
 
.AccountBody {
  text-align: center;
  flex: 2;
}
 
.AccountBottom {
  flex: 1;
}
 

Account 페이지 스타일링 코드이다. 로그인 페이지 만들때 사용했던 css를 가져와 사용하기도 했고 복잡한 디자인이 아니라 간단하게 작성해주었다.

회원가입 페이지

위 사진은 회원가입 페이지 화면이다. 디자인은 로그인 페이지와 거의 비슷하고 입력 칸만 3개로 늘었다. 사용자가 간단하게 이용할 수 있는 사이트이기 때문에 닉네임과 비밀번호만 입력하면 로그인할 수 있도록 해주었다. 

---

2. POST API를 이용한 데이터 추가

app.post("/adduser", (req, res) => {
  const { userId, userPw } = req.body;
 
  const query = "INSERT INTO userdata (userId, userPw) VALUES (?,?)";
  db.query(query, [userId, userPw], (err, result) => {
    if (err) {
      return res.status(500).json({ error: "DB 삽입 실패" });
    }
    res.json({ message: "유저 데이터 추가 성공!", id: result.insertId });
  });
});

저번에 작성했던 백엔드 파일에 위와 같이 데이터를 추가할 수 있는 POST 요청 기능을 만들어주었다. 
userId와 userPw를 받아와 userdata 데이터베이스에 추가해주었다.

const handleSubmit = async (e) => {
    e.preventDefault();
    const temp = userdata.filter((item) => item.userId === userId);
    if (temp.length >= 1) {
      alert("중복되는 아이디 입니다.");
      return;
    }
    if (userPw.length < 4) {
      alert("비밀번호는 4글자 이상이어야 합니다.");
      return;
    }
    if (userPw === confirmPw) {
      const response = await fetch("http://localhost:5000/adduser", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ userId, userPw }),
      });
      const data = await response.json();
      if (response.ok) {
        alert("유저 추가 성공!");
        setUserId("");
        setUserPw("");
        nav("/login", { replace: true });
        window.location.reload();
      } else {
        alert("에러: " + data.error);
      }
    } else {
      alert("비밀번호가 일치하지 않습니다.");
    }
  };

위의 코드는 Account.jsx(프론트엔드)에서 POST 요청으로 데이터를 전달하는 코드이다.

데이터를 전달하기 전에 먼저 중복되는 아이디인지 확인하고, 그 다음으로는 비밀번호가 4글자 이상인지 마지막으로 비밀번호와 비밀번호 확인에 입력한 비밀번호가 같은지 확인한 후 데이터를 전달하도록 해주었다. 
Content-Type으로 전달하는 데이터가 json형태라는 것을 알리고, body에 담아서 보내주었다.

마지막으로 제대로 데이터가 추가되었다면 알림을 보낸 후 로그인 페이지로 이동되도록 useNavigate를 사용하여 설정해주었다.

데이터 추가 확인

위의 사진은 console.log로 유저 정보가 데이터베이스에 잘 추가되었는지 출력해본 것이다. 사진을 보면 잘 추가된 것을 알 수 있다. 

---

3. 추가된 데이터로 로그인하기

3-1. 첫 번째 방법

사실 처음에는 그냥 회원가입 페이지에서 데이터를 추가한 후 navigate로 로그인 페이지에 가면 자동으로 다시 렌더링 되면서 추가된 데이터가 바로 반영될거라고 생각했다. 하지만 navigate의 동작 방식은 서버에서 페이지를 새로 불러오는 것이 아니라 처음 실행할 때 가져온 데이터에서 컴포넌트만 변경되는 것이었다. 즉, 회원가입 페이지에서 데이터를 추가하더라도 로그인 페이지에서는 아직 추가된 데이터를 불러오지 않았기 때문에 바로 적용되지 않는 것이었다. 이번에도 역시 동기 비동기에서 문제가 생긴 것이다. 처음에는 useEffect를 사용하여 다시 렌더링 되도록 해주었다. 실행은 예상한대로 잘 작동되었지만 useEffect 함수가 계속해서 실행되는 무한 루프에 빠지는 문제가 생겼다. 사실 큰 데이터는 아니라 상관은 없었지만 최적화가 마음에 걸려 다른 방법을 사용하기로 했다.

3-2. 두 번째 방법

두 번째로 사용한 방법은 데이터를 불러오는 부분을 함수로 만들어 context로 전달하는 것이었다. 이렇게 하면 로그인 페이지에서 입력 정보를 확인하기 전에 함수를 실행하여 항상 최신 데이터를 유지할 수 있을거라고 생각했다. 하지만 함수를 실행한다고 하더라도 데이터를 가져오는 함수가 fetch 함수이기 때문에 데이터를 가져오기 전에 로그인 함수가 실행되어 로그인이 되지 않았다. 그래서 로그인 버튼 함수를 async를 사용하여 비동기 함수로 바꿔주고 await를 사용하여 데이터를 가져오는 함수가 실행된 후에 로그인을 확인하도록 해주었지만 이것 또한 생각한대로 잘 되지 않아 실패했다.

3-3. 세 번째 방법

마지막으로 가장 편한 방법인 그냥 새로고침을 하기로 했다. 사실 React의 장점이 페이지가 새로고침 되지 않고 앱처럼 부드럽게 움직인다는 점인데 새로고침을 할 경우 이런 장점을 없애는 방법이기 때문에 이 방법을 사용하고 싶지 않았다. 하지만 이번 프로젝트 목표는 React를 사용하여 프로젝트를 만들어보는 것이었기 때문에 일단 작동이 되는 것이 첫번째 목표였다. 결과적으로는 회원가입에서 데이터를 추가한 후 바로 로그인을 했을 때 잘 로그인이 되었다.

테스트 화면

사진에서도 회원가입한 정보로 잘 로그인이 되는 것을 알 수 있다.

---

실습 마무리

오늘은 React를 사용하여 회원가입 페이지를 만들고, POST 요청으로 데이터를 추가하는 기능까지 만들어 보았습니다. 매번 동기 비동기 부분에서 막혀 조금씩 고생을 하긴 했지만, 그래도 풀스택 개발자로써 성장하는 것 같아 기분이 좋습니다. 

프론트엔드, 백엔드, 데이터베이스를 모두 혼자 개발하는 것은 힘들지만 그만큼 성취도도 높은 것 같습니다.

지금 생각 중인 프로젝트 아이디어가 있는데 이번 프로젝트를 통해 React 실력을 충분히 쌓는다면 바로 만들어보고 싶습니다.

다음에는 스케줄 데이터를 담을 데이터베이스를 만들어 유저 마다 각각의 일정을 관리할 수 있도록 해줄 예정입니다. 다음 일지도 기대해주세요!

[EZ_Scheduler] - [React, Express] 일정 추가 페이지 제작(GET, POST 구현)

[React, Express] 일정 추가 페이지 제작(GET, POST 구현)

다음 개발 일지 읽어보기!