Frontend 기본 라우팅 및 페이지 구성

 

처음 이 프로젝트 구조를 만들때 backend와 frontend 부분으로 나누어 작업했다.

지금까지 백엔드에서 회원가입, 로그인 기능을 만들었고 게시판 라우트까지 구성해 두었으니 프론트엔드에서 연결하는 작업을 해야한다. 

 

> 프로젝트 폴더 구성 살펴보기

 

 

| 디렉터리 구조 확인

 

더 많은 구조를 갖겠지만 지금은 회원가입, 로그인 페이지부터 하려한다. 아래 구조로 페이지 작업 시작이다.

frontend/
├── src/
│   ├── pages/
│   │   ├── RegisterPage.js
│   │   └── LoginPage.js
│   ├── App.js
│   └── index.js

 

 

 

| React Router 설치

 

라우터 설정을 위해서 react-router-dom 패키지가 필요하다. 

frontend 디렉터리에서 설치한다. 

cd frontend
npm install react-router-dom

 

 

 

| App.js에 라우팅 추가하기

 

react 설치시 생성된 기존의 코드를 아래와 같이 수정한다.

앞서 설치한 react-router-dom을 이용해 페이지들의 접근을 위한 라우팅 연결을 한다.

 

frontend/src/App.js

// frontend/src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import RegisterPage from './pages/RegisterPage';

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/register" element={<RegisterPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

 

- BrowserRouter : URL 주소를 감지하고 컴포넌트를 바꿔주는 라우터의 기본 구조 요소이다.

- Routes / Route : 여러 경로를 정의하며, Route의 path가 현재 URL과 일치하면 해당 element를 렌더링 한다.

- path="/register" : 회원가입 폼을 볼 수 있는 경로이다. 웹브라우저에서 http://localhost:3000/register로 접속하면 된다.

 

 

| 회원가입 폼 페이지 초기 작성

 

frontend/src/pages/RegisterPage.js

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

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

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch('http://localhost:5000/api/auth/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form)
    });

    const data = await res.json();
    alert(data.message || '등록 완료');
  };

  return (
    <div>
      <h2>회원가입</h2>
      <form onSubmit={handleSubmit}>
        <input name="username" placeholder="아이디" onChange={handleChange} />
        <input name="email" placeholder="이메일" onChange={handleChange} />
        <input name="password" type="password" placeholder="비밀번호" onChange={handleChange} />
        <button type="submit">가입하기</button>
      </form>
    </div>
  );
}

export default RegisterPage;

 

 

확인을 하기위해 npm stert 후 웹브라우저에서 http://localhost:3000/register로 접속한다.

 

 

 

 

이 화면이 뜨면 지금까지의 작업이 정상적으로 작동 한다는 것이다. 

하지만 이 폼은 백엔드로 보내는 기능이 아직은 없다.