항해 99 - 2022.02.20.SUN ( 로그인 회원가입 기능)/이번주의 나는

 

이번 챕터 일정

• 02/18 (금) 19:00 까지 : 클론 코딩 주차 S.A. 제출 ✅
• 02/21 (월) 저녁 : 클론 코딩 주차 중간 멘토링
• 02/22 (화) ~ 02/23 (수): 담당 매니저와 1:1 선택 면담
• 02/23 (수) 10:00 ~ 21:00 : 리더/부리더 신청 & 다면평가 진행
• 02/24 (목) 10:00 ~ 21:00 : 알고리즘 스터디 신청
• 02/24 (목) 오후 : 리더/부리더 선별 면담
• 02/24 (목) 19:00 까지 : 클론 코딩 완성본 제출
• 02/24 (목) 저녁 : 클론 코딩 주차 회고 멘토링
• 02/25 (금) 09:00 : 실전 프로젝트 주차 발제

오늘 내가 할 일 

• 로그인 회원가입 기능 ✅

그냥 문든 뷰를 그리고 있으니 내가 퍼블리셔가 된 건지 웹 개발자가 된 건지에 대한 의문이 들기 시작했다
아니 뷰를 잘 그리는 것도 좋지만,, 기능에 대해 더 공부해보고싶은데 ㅠㅠㅠㅠ
그래서 문득 에어비엔비를 전부 하는게 아니라 
좀 기능적인 측면을 늘리면 어떨까 라는 생각이 들었다. 
프런트 백 둘 다 한테 그게 더 좋은 측면인 거 같아서 
내일 대대적인 회의 한번 해야 할듯 싶다. 

//로그인 회원가입 리덕스 부분

import {createAction, handleActions } from "redux-actions";
import{produce} from "immer";
import axios from "axios";


//액션 함수 
const SET_USER ="SET_USER";
const LOG_OUT ="LOG_OUT";


//액션생성함수 
const logout = createAction(LOG_OUT,(user)=>({user}))
const setUser = createAction(SET_USER, () => ({}));

const initialState ={
    user:null,
    is_login:false,
}

//미들웨어
//로그인 미들웨어 
const logInDB = (id, pwd)=>{
    return async function(dispatch,getState, {history}){
        await axios.post('/api/login',{
            user_id: id,
            user_pwd : pwd
        })
        .then((response)=>{
            console.log(response)
            window.alert("로그인이 완료 되었습니다")
            localStorage.setItem("is_login", response.data.token)
            dispatch(setUser())
            window.location.reload()
        })
        .catch((error)=>{
            console.log(error);
        })
    }
}
//회원가입 미들웨어 
const signUpDB = (id,nick,pwd,confirmpwd) =>{
    return function(dispatch,getState, {history}){
        console.log(id,nick,pwd,confirmpwd)
        axios.post('/api/signup',{
            user_id:id,
            user_nick:nick,
            user_pwd: pwd,
            confirmPassword: confirmpwd
        })
        .then((response)=>{
            console.log(response)
            window.alert(response.data.success)
            history.push('/')
        })
        .catch((error)=>{
            window.alert(error)
        }) 
    }
}

//로그아웃 미들웨어
const logOutDB =()=>{
    return function(dispatch, getState, {history}){
        dispatch(logout())
        history.push('/')
    }
}

export default handleActions(
    {
        [SET_USER]:(state, action) => produce(state, (draft)=>{
            draft.is_login = true
        }),
        [LOG_OUT]:(state, action) => produce (state,(draft)=>{
            localStorage.clear();
            draft.is_login =false;
        }),
    },
    initialState
)

const actionCreators ={
    signUpDB,
    logInDB,
    logOutDB,
    setUser,
    logout
}
export {actionCreators}

이번주의 나는?

- 02.11 ~02.17 미니 프로젝트 2

처음으로 백앤드와 프런트 앤드가 만나게 된 날!!!!

조에 나 빼고 다 남자분들이라서 처음에는 걱정했는데, 막상 지내보니까 다들 너무 웃기고 착했다 ㅋㅋㅋㅋ

 

백앤드도 프런트 앤드도 다 같이 처음인 프로젝트라서 

걱정도 많이 한 만큼이나 어렵고 힘든 길이였다. 

axios 쓰는 것도 정말 정말 너무너무 어려웠고 (막상 해보니 또 괜찮긴 했는데)

댓글이며, 상세페이지며,, 그냥 하나같이 다 모르고 어렵던 것들이라서

눈앞이 핑핑,,

 

그래도 다 같이하는 과제이다 보니까 

뭐하나 포기하고 싶지 않았고 더 욕심내서 했던 거 같다. 

 

처음 페이지는 구멍 뚫린 치즈 같았는데 

나중에는 조금은 덜 구멍뚫린 치즈였다 ㅋㅋㅋㅋㅋㅋㅋ

뭐 여하튼 해냈다는 그게 젤 잘한 게 아닐까? 

 

이제 곧 클론 코딩하고 실전만 하면 이 항해 99도 끝나는데 기분이 묘하다