WEB 만들기 28, 29 - 로그인 페이지

원래는 유효성 체크도 매번 해야하고 틀렸을때 그런 애니메이션 같은경우를 하는데 

Formik과 Yup를 사용한다. 하지만 기본 이기 때문에 그냥 만들예정

 

client/ src/ compoents/ view/ LoginPage/ LoginPage.js 부분으로 들어갑니다. 

 

 

 

 style={{

            display: 'flex', justifyContent : 'center', alignItems : 'center'

            ,width: '100%', height : '100vh'

        }}>

 

이스타일을 복붙해서 쓰면되고 

import React from 'react'

function LoginPage(){
    return(
        <div style={{
          display: 'flex', justifyContent : 'center', alignItems : 'center'
          ,width: '100%', height : '100vh'
      }}>
        <form style ={{display:'flex', flexDirection:'column'}}>
          <label>Email</label>
          <input type="email" value onChange/>
          <label>Password</label>
          <input type="password" value onChange/>
          <br/>
          <button>
            Login
          </button>
        </form>

        </div>
    )
}

export default  LoginPage

 const [Email, setEmail]= useState("")

  const [Password, setPassword] =useState("")

 

전체적으로 이렇게 일단은 구현하게되면 

이렇게 구현이 되고 

 

 

타이핑을 할때 onChange 이벤트를 발생 시켜서 Email이라는 state 바꿔주면은 value 가 바뀐다.

 

즉,

          <input type="email" value={Email} onChange={onEmailHandler}/>

  const onEmailHandler = (event)=>{

      setEmail(event.currentTarget.value)

  }

이부분을 

 

이렇게 타이핑을 할 수 있게 됩니다. 

import React, {useState} from 'react'

function LoginPage(){

  const [Email, setEmail]= useState("")
  const [Password, setPassword] =useState("")

  const onEmailHandler = (event)=>{
      setEmail(event.currentTarget.value)
  }
  const onPasswordHandler =(event)=>{
    setPassword(event.currentTarget.value)
  }
    return(
        <div style={{
          display: 'flex', justifyContent : 'center', alignItems : 'center'
          ,width: '100%', height : '100vh'
      }}>
        <form style ={{display:'flex', flexDirection:'column'}}>
          <label>Email</label>
          <input type="email" value={Email} onChange={onEmailHandler}/>
          <label>Password</label>
          <input type="password" value={Password} onChange={onPasswordHandler}/>
          <br/>
          <button>
            Login
          </button>
        </form>

        </div>
    )
}

export default  LoginPage

전체적인 소스 입니다. 

그리고 일단Login 버튼을 누르게 되면 넘겨지는것이 안되는데 이것은 submit 해서 해줘야합니다. 즉,

이것 사이에 

 

          onSubmit = {onSubmitHandler}

 

  const onSubmitHandler =(event)=>{

    event.preventDefault();

  }

 

 

    event.preventDefault();을 안쓰면 매번 새로고침이 되기 때문에 

 

 const onSubmitHandler =(event)=>{

    event.preventDefault();

    console.log('Email',Email);

    console.log('Password',Password);

  }

이것을 써서 막아줘야한다. 

이렇게 써보면 내가 입력한것이 무엇인지 나오게 된다. 무튼 우리는 이것을 서버로 보내야합니다. 

그렇기 위해서는 Axios를 이용해야 합니다. 

 

일단은 

import Axios from 'axios'

import {useDispatch } from 'react-redux';

해주고 

    dispatch(LoginUser(body))

 

여기가 액션 부분인데 이것을 먼저 구현을 해야합니다. 그래서 

src/ _actions 부분으로가서 

user_action.js 파일을 만들어주고

 

import Axios from 'axios'

 

export function loginUser(dataTosubmit){

   

const request = axios.post('api/user/login',body)//서버로 전송하는것

    .then(response=>{response.data})

}

//이렇게 하면 서버에서 가지고온 데이터를request에 저장을 하게 된다.

 

즉 여기서 body의 데이터를 받아오게 되고 

 

리턴으로 리듀서에 넘기는 작업을 해야합니다. 

일전에 저렇게 두개를 이용하여 nextState를 리턴해야한다고 했는데 그 과정 입니다. 

 

그리고 

액션의 경우 이렇게 보내야 하니까

import Axios from 'axios'

 

export function loginUser(dataTosubmit){

 

    const request = axios.post('api/user/login',dataTosubmit)//서버로 전송하는것

 

    .then(response=>response.dat})

 

        return{

            type:"LOGIN_USER",

            payload:requset

       }

}

 

이렇게 쓰고 

 

_reducers 의 user_reducer.js 부분으로 가서 

 

export default function(state,action){

    switch (action.type) {

        case value:

            

            break;

    

        default:

            break;

    }

}

 

이렇게 해서 저렇게 구분해서 할 것입니다. 

        case LOGIN_USER:

 

이렇게 해야하는데 

_action 폴더에다가 types.js 파일을 만들어 명칭 관리 할것인데 

 

우선 

user_action.js 부분으로가서 

 

import{

    LOGIN_USER

}from './types';

이렇게 해서 types 부분에서 가져올수 있도록 하고 

 다시 types.js 로 가서 

 

export const LOGIN_USER = "login_user";

 

해서 타입을 쓸수있게 하는것  ...스레드 오퍼레이터라고 하는것인데 똑같이 가져오는것 

payload가 

여기서 들어가는것 

 

일단 하기전에 

LoginPage.js 에서

import {loginUser} from '../../../_actions/user_action'  이것 추가 

 

 

 

 

 

 

 

 

이렇게 유저가 들어간것이 확인된다. 

 

그전에 오타가있어서 다시 올립니다. 

 

user_action.js

import axios from 'axios'
import{
    LOGIN_USER
}from './types';
export function loginUser(dataTosubmit){

    const request = axios.post('/api/users/login',dataTosubmit)//서버로 전송하는것

    .then(response=>response.data)

        return{
            type:LOGIN_USER,
            payload:request
       }
}

_reducers/ index.js

import { combineReducers } from 'redux';
import user from './user_reducer';

const rootReducer = combineReducers({
    user
})

export default rootReducer;

_reducers/user_reducer.js

import{
    LOGIN_USER
} from '../_actions/types';
export default function(state ={},action){
    switch (action.type) {
        case LOGIN_USER:
            return {...state,loginSuccess: action.payload}
            break;
    
        default:
            return state;
    }
}

LoginPage.js

import React, {useState} from 'react'
import { useDispatch } from 'react-redux';
import {loginUser} from '../../../_actions/user_action';
function LoginPage(){
  const dispatch = useDispatch();

  const [Email, setEmail]= useState("")
  const [Password, setPassword] =useState("")

  const onEmailHandler = (event)=>{
      setEmail(event.currentTarget.value)
  }
  const onPasswordHandler =(event)=>{
    setPassword(event.currentTarget.value)
  }
  const onSubmitHandler =(event)=>{
    event.preventDefault();
   // console.log('Email',Email);
    //console.log('Password',Password);

    let body = {
      email : Email,
      password : Password
    }
    dispatch(loginUser(body))
  }
    return(
        <div style={{
          display: 'flex', justifyContent : 'center', alignItems : 'center'
          ,width: '100%', height : '100vh'
      }}>
        <form style ={{display:'flex', flexDirection:'column'}}
          onSubmit = {onSubmitHandler}
        >
          <label>Email</label>
          <input type="email" value={Email} onChange={onEmailHandler}/>
          <label>Password</label>
          <input type="password" value={Password} onChange={onPasswordHandler}/>
          <br/>
          <button>
            Login
          </button>
        </form>

        </div>
    )
}

export default  LoginPage

 최종적으로 가입된 아이디 비번넣고 확인하면 

 

 

 

이렇게 나오게되고 

저렇게 나오는것이 

 

 

동그라미 부분에 백엔드의 데이터가 들어오게 되는것인데 

 

server의 index.js 부분을 보게 되면 

 

로그인이 성공하게 되면

 

 

이렇게 나오게 했기때문에 저렇게 나오게 되는것이다. 

 

 

여기까지 하고 랜딩 페이지로 넘어가게하는법은 

LoginPage.js 부분으로가서 

 

dispatch 부분을

    dispatch(loginUser(body))

    .then(response =>{

      if(response.payload.loginSuccess){

        pros.history.push('/')

      }else{

        alert('Error')

      }

    })

  }

 

pros는 

function LoginPage(pros){

상단에 () 사이에 넣으면됩니다. 로그인이 성공하면 랜딩 페이지로 넘어가게됩니다. 

이전의 데이터베이스에 등록했던 아디와 비번 입력하게되면 성공한것을 볼 수있습니다. 오늘은 여기까지