To do list 웹 사이트 구현_백엔드부분

백엔드

기초적인 로그인과 로그아웃은 학습했던 boiler plate를 기반
tokenexp는 추가

Schema에서 user의 todolist를 Array로 설정
todolist 안에 날짜와 해당 날짜에 맞는 todo를 업데이트

구조 : user > todolist > obj.. > date, todo > obj.. > id, text, checked

index.js

0. 선택한 일자의 user의 todolist 유무 확인

1. todolist 데이터 가져오기 (update x)
   1.1 선택한 일자에 todolist가 있다면 todolist 데이터 가져오기
   1.2 선택한 일자에 todolist가 없다면 날짜만 반환

2. todolist update
   2.1 선택한 일자에 todolist가 있다면
   2.1.1 delete가 false라면 찾아서 업데이트
   2.1.2 delete가 true라면 해당 날짜의 todolist 삭제
   2.2 선택한 일자의 todolist가 없다면 날짜와 todolist 같이 update
   
   => delete는 삭제 업데이트로 인해 todolist의 모든 todo가 삭제 된 상태면 true

memo : delete 변수를 사용안하고..더 좋은 방법이 있을 텐데!! 시간이 없어서 빨리 구현하다보니 body의 변수가 많아지고 index의 if문이 번잡해졌다. 추후에 프론트까지 업데이트하고 고민해볼 예정!

---

프론트 엔드

1. InputBox.js
   날짜 업데이트와 todo input의 업데이트를 구별하기 위해 useEffect()를 나눠서 두번 작성
   
   memo : 첫번째 userEffect의 props.date 넣지 않고 분리해서 warning 뜸 -> 이것도 고민해봐야 할듯?

  const mounted = useRef(false)

...

  useEffect(() => {
    if (!mounted.current) { //해당 useEffect는 마운트때 실행 x
      mounted.current = true
    }
    else {
      let body = {
        ...
      }
      
      dispatch(addtolist(body))
      .then(response => {
            ...
      })
    }

  }, [dispatch, props.todoList]); 
  
  useEffect(() => {
    let body = {
      ...
    }
    
    dispatch(addtolist(body))
    .then(response => {
          ...
    })

  }, [dispatch, props.date]);

2. user_action.js

export function addtolist(dataTosubmit) {
    const request = axios.post('/api/main', dataTosubmit)
    .then(response => response.data)

    return {
        type : ADD_TO_LIST,
        payload : request
    }
}

3. user_reducer.js

case ADD_TO_LIST:
    return {...state, userData : {
                        ...state.userData,
                        date : action.payload.date,
                        todolist : action.payload.todolist
                    }  
            }