Toggle navigation
Toggle navigation
This project
Loading...
Sign in
박민정
/
We-Shop
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
박민정
2021-06-05 13:59:36 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
bf19b026e7e3a5c12cf1c07b47ba280d3676fda2
bf19b026
1 parent
bf438ef8
[update] Update login page
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
91 additions
and
4 deletions
boiler-plate/client/src/_actions/types.js
boiler-plate/client/src/_actions/user_action.js
boiler-plate/client/src/_reducers/user_reducer.js
boiler-plate/client/src/components/views/LoginPage/LoginPage.js
boiler-plate/client/src/setupProxy.js
boiler-plate/client/src/_actions/types.js
0 → 100644
View file @
bf19b02
// type들만 관리하는 곳
export
const
LOGIN_USER
=
"login_user"
;
\ No newline at end of file
boiler-plate/client/src/_actions/user_action.js
0 → 100644
View file @
bf19b02
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
boiler-plate/client/src/_reducers/user_reducer.js
View file @
bf19b02
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
...
...
boiler-plate/client/src/components/views/LoginPage/LoginPage.js
View file @
bf19b02
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
...
...
boiler-plate/client/src/setupProxy.js
0 → 100644
View file @
bf19b02
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
Please
register
or
login
to post a comment