React로 프론트 구현하기

이전글이 선행되어야 합니다.

2023.08.08 - [내배캠 주요 학습/TIL : Today I Learned] - react로 프론트 구현 시도 중 에러 해결

react로 프론트 구현 시도 중 에러 해결

 

 

 

1. 개발 서버 시작

 

1) 먼저, cmd창에서  [프로젝트 디렉터리] 경로로 이동합니다.

2) 개발 서버를 시작합니다. ( 개발 모드에서 React 애플리케이션을 실행하기 위함.)

  이렇게 하면 로컬 개발 서버가 시작되고 React 앱은 http://localhost:3000에서 액세스할 수 있습니다.

  코드를 변경하면 애플리케이션이 자동으로 다시 로드됩니다.

[ C:\Users\ChaeYoung\task-rail-app ]
cd C:\Users\ChaeYoung\task-rail-app
npm start

npm start 입력 후에 cmd 창

npm start 입력 후에 cmd 창

 

 

 

 

인텔리제이 (or WebStorm) 에서도 가능하다!

 

cmd 창을 통해 생성한 프로젝트를 인텔리제이에서 열고, (인텔리제이를 통해서도 생성 가능)

회원가입, 로그 컴포넌트를 생성 → [src] - [components] - MemberSignup.js , Login.js

( components 디렉터리도 직접 생성하여야 한다. )

// src/components/MemberSignUp.js

import React, { useState } from 'react';

const MemberSignUp = () => {
  const [formData, setFormData] = useState({
    //firstName: '',
    //lastName: '',
    name: '',
    email: '',
    password: '',
  });

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

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Replace 'YOUR_API_ENDPOINT' with the actual API endpoint for member registration
    const response = await fetch('http://localhost:8082/api/users/signup', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });

    if (response.ok) {
      // Handle successful registration, e.g., show success message or redirect to a login page
      console.log('Member registered successfully!');
    } else {
      // Handle registration failure, e.g., show error message
      console.error('Member registration failed!');
    }
  };

  return (
      <div>
        <h2>Member Sign Up</h2>
        <form onSubmit={handleSubmit}>
          {/*<label>
            First Name:
            <input
                type="text"
                name="firstName"
                value={formData.firstName}
                onChange={handleChange}
            />
          </label>
          <label>
            Last Name:
            <input
                type="text"
                name="lastName"
                value={formData.lastName}
                onChange={handleChange}
            />
          </label>*/}
          <label>
            Name:
            <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleChange}
            />
          </label>
          <label>
            Email:
            <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
            />
          </label>
          <label>
            Password:
            <input
                type="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
            />
          </label>
          <button type="submit">Sign Up</button>
        </form>
      </div>
  );
};

export default MemberSignUp;

Login.js

// src/components/Login.js

import React, { useState } from 'react';

const Login = () => {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      // Call your API here to perform the login
      const response = await fetch('http://localhost:8082/api/users/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name, password }),
      });

      if (response.ok) {
        // Handle successful login (e.g., set user state, redirect, etc.)
      } else {
        // Handle failed login (e.g., show error message)
      }
    } catch (error) {
      console.error('Error logging in:', error);
      // Handle error (e.g., show error message)
    }
  };

  return (
      <div>
        <h2>Login</h2>
        <input
            type="text"
            placeholder="Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
        />
        <input
            type="password"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
        />
        <button onClick={handleLogin}>Login</button>
      </div>
  );
};

export default Login;

 

 

 

App.js 파일도 수정하여야 한다.

// src/App.js

import React from 'react';
import MemberSignUp from './components/MemberSignUp';
import Login from './components/Login';

function App() {
  return (
      <div>
        <MemberSignUp />
        <Login />
      </div>
  );
}

export default App;