Showing
5 changed files
with
91 additions
and
4 deletions
boiler-plate/client/src/_actions/types.js
0 → 100644
1 | +import axios from 'axios'; | ||
2 | +import { | ||
3 | + LOGIN_USER | ||
4 | +} from './types'; | ||
5 | +export function loginUser(logInfo) { | ||
6 | + const request = axios.post('/api/users/login', logInfo) // logInfo를 post로 전달 | ||
7 | + .then(response => response.data); // 서버에서 받은 데이터를 request에 저장 | ||
8 | + | ||
9 | + return { // return을 통해 Reducer로 보냄 | ||
10 | + // Reducer에서 previousState, action을 이용해 nextState로 만들기 때문 :: (previousState, action) => nextState | ||
11 | + // request를 reducer로 보내는 작업 | ||
12 | + | ||
13 | + // action은 type과 response을 넣어줘야 함 | ||
14 | + type: "LOGIN_USER", | ||
15 | + payload: request // payroad == response | ||
16 | + } | ||
17 | +} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | +import { | ||
2 | + LOGIN_USER | ||
3 | +} from '../_actions/types'; | ||
4 | + | ||
5 | + | ||
6 | +// reducer은 (previousState, action) => (nextState)로 | ||
7 | +export default function (prevState = {}, action) { | ||
8 | + switch (action.type) { | ||
9 | + case LOGIN_USER: | ||
10 | + return {...prevState, loginSuccess:action.payload} // 위의 prevState를 그대로 가져오고, | ||
11 | + // user_action.js에 있는 payload를 그대로 가져와서 return. | ||
12 | + break; | ||
13 | + | ||
14 | + default: | ||
15 | + break; | ||
16 | + } | ||
17 | +} | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | +import axios from 'axios'; | ||
2 | +import { response } from 'express'; | ||
1 | import React from 'react' | 3 | import React from 'react' |
4 | +import {useState} from 'react' | ||
5 | +import {useDispatch} from 'react-redux'; | ||
6 | +import {loginUser} from '../../../_actions/user_action' | ||
2 | 7 | ||
3 | function LoginPage() { | 8 | function LoginPage() { |
9 | + | ||
10 | + | ||
11 | + // 이 로그인페이지 안에서 input에 타이핑을 함으로써 데이터를 변화시켜주므로 state 사용. | ||
12 | + // 1-1. state을 사용하기 위해 state 만들어줌. | ||
13 | + const initialState = ""; | ||
14 | + const [Email, setEmail] = useState(initialState); // 1-2. email을 위한 state | ||
15 | + const [Password, setPassword] = useState(initialState); // 1-2. password를 위한 state | ||
16 | + //1-3. 아래 input value에 넣어줌 | ||
17 | + | ||
18 | + // 2-1. 타이핑할 때 타이핑 하는 거 보이게 하도록 핸들러를 만들어줌 | ||
19 | + const emailEvent = (event) => { | ||
20 | + setEmail(event.currentTarget.value) | ||
21 | + } | ||
22 | + const passwordEvent = (event) => { | ||
23 | + setPassword(event.currentTarget.value) | ||
24 | + | ||
25 | + } | ||
26 | + | ||
27 | + const dispatch = useDispatch(); | ||
28 | + const submitEvent = (event) => { | ||
29 | + event.preventDefault(); // 이걸 하지 않으면 버튼을 누를 때마다 refresh돼서 데이터 처리를 할 수 없음 | ||
30 | + | ||
31 | + //console.log('Email', Email); // 잘 나오는지 확인 | ||
32 | + //console.log('Password', Password); // 잘 나오는지 확인 | ||
33 | + | ||
34 | + let logInfo = { // 보내주기 위해 저장 | ||
35 | + email: Email, | ||
36 | + password: Password | ||
37 | + } | ||
38 | + | ||
39 | + dispatch(loginUser(logInfo)) // _actions폴더 user_action.js에 있음 | ||
40 | + | ||
41 | + } | ||
4 | return ( | 42 | return ( |
5 | <div style={{ | 43 | <div style={{ |
6 | - justifyContent:'center', alignItems: 'center', display:'flex', width:'100%' | 44 | + justifyContent:'center', alignItems: 'center', display:'flex', width:'100%', height:'50vh' |
7 | }}> | 45 | }}> |
8 | - <form> | 46 | + <form onSubmit={submitEvent}> |
9 | <label>Email</label> | 47 | <label>Email</label> |
10 | - <input type="email" value onChange /> | 48 | + <input type="email" value={Email} onChange={emailEvent} /> |
49 | + {/* input type="email"이라서 '이메일 주소에 '@'를 포함해주세요'라는 경고문 뜸. */} | ||
11 | <label>Password</label> | 50 | <label>Password</label> |
12 | - <input type="password" value onChange /> | 51 | + <input type="password" value={Password} onChange={passwordEvent} /> |
13 | <br/> | 52 | <br/> |
14 | <button> | 53 | <button> |
15 | Login | 54 | Login | ... | ... |
boiler-plate/client/src/setupProxy.js
0 → 100644
1 | +const { createProxyMiddleware } = require('http-proxy-middleware'); | ||
2 | + | ||
3 | +module.exports = function(app) { | ||
4 | + app.use( | ||
5 | + '/api', | ||
6 | + createProxyMiddleware({ | ||
7 | + target: 'http://localhost:5000', | ||
8 | + changeOrigin: true, | ||
9 | + }) | ||
10 | + ); | ||
11 | +}; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment