리엑트 로그인 페이지 만들기
리엑트 로그인 페이지 만들기import React, { useState, useCallback } from "react";import styled from "styled-components";import axios from "axios";const LoginFragment = styled.div` display:flex; justify-content:center; align-items:center; width:400px; height:400px; position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */ background: white; border-radius: 16px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04); margin: 0 auto;`;const LoginInputs = () => { const [id, setId] = useState(""); const [password, setPassword] = useState(""); const onChangeId = useCallback((e) => { setId(e.target.value); }, []); const onChangePassword = useCallback((e) => { setPassword(e.target.value); }, []); const onSubmit = useCallback((e) => { e.preventDefault(); let data = { username: id, password: password, } console.log(data); axios.post("/api/users/login", data) .then((response => { console.log(response.data) })); }, [id, password]) return ( <LoginFragment> <form style= {{ display: "flex", flexDirection: "column", }} onSubmit={onSubmit} > <label htmlFor="user-id">아이디</label> <input name="user-id" value={id} onChange={onChangeId} /> <label htmlFor="user-password">비밀번호</label> <input name="user-password" type="password" value={password} onChange={onChangePassword} /> <br /> <button type="submit">로그인</button> </form> </LoginFragment > )}export default LoginInputs; import React from "react"import { styled, createGlobalStyle } from "styled-components";import LoginInputs from "./components/LoginInputs";const GlobalStyle = createGlobalStyle` body { background: #e9ecef; }`;function App() { return ( <div> <GlobalStyle /> <LoginInputs /> </div> )}export default App; CORS 해결하기const { createProxyMiddleware } = require("http-proxy-middleware");module.exports = (app) => { app.use( "/api", createProxyMiddleware({ target: "http://localhost:8080", changeOrigin: true, }) );};