박민정

[update] Update login page

// type들만 관리하는 곳
export const LOGIN_USER = "login_user";
\ No newline at end of file
import axios from 'axios';
import {
LOGIN_USER
} from './types';
export function loginUser(logInfo) {
const request = axios.post('/api/users/login', logInfo) // logInfo를 post로 전달
.then(response => response.data); // 서버에서 받은 데이터를 request에 저장
return { // return을 통해 Reducer로 보냄
// Reducer에서 previousState, action을 이용해 nextState로 만들기 때문 :: (previousState, action) => nextState
// request를 reducer로 보내는 작업
// action은 type과 response을 넣어줘야 함
type: "LOGIN_USER",
payload: request // payroad == response
}
}
\ No newline at end of file
import {
LOGIN_USER
} from '../_actions/types';
// reducer은 (previousState, action) => (nextState)로
export default function (prevState = {}, action) {
switch (action.type) {
case LOGIN_USER:
return {...prevState, loginSuccess:action.payload} // 위의 prevState를 그대로 가져오고,
// user_action.js에 있는 payload를 그대로 가져와서 return.
break;
default:
break;
}
}
\ No newline at end of file
......
import axios from 'axios';
import { response } from 'express';
import React from 'react'
import {useState} from 'react'
import {useDispatch} from 'react-redux';
import {loginUser} from '../../../_actions/user_action'
function LoginPage() {
// 이 로그인페이지 안에서 input에 타이핑을 함으로써 데이터를 변화시켜주므로 state 사용.
// 1-1. state을 사용하기 위해 state 만들어줌.
const initialState = "";
const [Email, setEmail] = useState(initialState); // 1-2. email을 위한 state
const [Password, setPassword] = useState(initialState); // 1-2. password를 위한 state
//1-3. 아래 input value에 넣어줌
// 2-1. 타이핑할 때 타이핑 하는 거 보이게 하도록 핸들러를 만들어줌
const emailEvent = (event) => {
setEmail(event.currentTarget.value)
}
const passwordEvent = (event) => {
setPassword(event.currentTarget.value)
}
const dispatch = useDispatch();
const submitEvent = (event) => {
event.preventDefault(); // 이걸 하지 않으면 버튼을 누를 때마다 refresh돼서 데이터 처리를 할 수 없음
//console.log('Email', Email); // 잘 나오는지 확인
//console.log('Password', Password); // 잘 나오는지 확인
let logInfo = { // 보내주기 위해 저장
email: Email,
password: Password
}
dispatch(loginUser(logInfo)) // _actions폴더 user_action.js에 있음
}
return (
<div style={{
justifyContent:'center', alignItems: 'center', display:'flex', width:'100%'
justifyContent:'center', alignItems: 'center', display:'flex', width:'100%', height:'50vh'
}}>
<form>
<form onSubmit={submitEvent}>
<label>Email</label>
<input type="email" value onChange />
<input type="email" value={Email} onChange={emailEvent} />
{/* input type="email"이라서 '이메일 주소에 '@'를 포함해주세요'라는 경고문 뜸. */}
<label>Password</label>
<input type="password" value onChange />
<input type="password" value={Password} onChange={passwordEvent} />
<br/>
<button>
Login
......
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};
\ No newline at end of file