09.28 항해 16일차 TIL

3주차 개인 프로젝트 나만의 사전 만들기
"My Dictionary"

필수기능 구현을 끝내고 최대한 다른 많은 것을 건드려 보고 싶어서 게시글 수정, 삭제 기능과 디자인을 조금 더 다듬어 보았다.
디자인을 만질수록 더 조잡해 보이는 느낌이 나긴 했지만.. 하나라도 더 건드려 보는 것에 의의를 두고자 최대한 많은 디자인을 수정 해보았다.

추가 항목

• 게시글 수정, 삭제 기능
• 전체적인 레이아웃 수정

• 게시글 삭제 기능 구현
  삭제기능은 예상보다 어렵지 않게 구현이 가능 했다.

//미들웨어 REMOVE
//지우고자 하는 data의 id값을 파라미터로 받는다.
export const removeCardFB = (card_id) => {
  return async function (dispatch, getState) {
    // card_id가 없으면 alert을 띄운다.
    if(!card_id){
      window.alert('지울게 없네용')
      return;
    }

    // 파라미터로 받은 card_id와 같은 id를 가지고 있는 doc의 data를 가져와서
    const docRef = await doc(db, 'mydictionary', card_id)

    // 해당 data를 삭제 한다
    await deleteDoc(docRef)
    // console.log(docRef)

    //card_list의 state값을 가져와서
    const _card_list = getState().cardlist.card_list

    //id값이 같은 data만 반환 한다.
    const card_index = _card_list.findIndex((b) => {
      return b.id === card_id;
    })
    
    //removeCard 액션을 dispatch 한다.
    dispatch(removeCard(card_index));
  }
};


// 리듀서
case 'card/REMOVE': {
      console.log('delete 연결 댐', state.card_list)
      const new_card_list = state.card_list.filter((l, idx) => {
        // action으로 받아온 list중 Index값이 같지 않은 data로만 이루어진 배열을 반환한다.
        return parseInt(action.cardIndex) !== idx
      })
      
      return { ...state, card_list: new_card_list }
    }

• 게시글 수정 기능 구현

이번 프로젝트에서 가장 고민이 많이 되었고 시간도 많이 잡아먹은 게시글 수정 기능이다.
삭제와 별 다를 것 없이 쉽게 구현 될 것이라고 생각 했었는데 card_id만 파라미터로 받아오려니 수정하려는 input 값을 못받아서 한참을 헤메고 있었다.

가장 큰 문제는 내가 코드의 흐름을 이해하는게 아닌 코드의 생김새를 보고 작성을 하고 있었다는 점이다.
이해가 덜 되어있는 코드를 복사 해서 쓰려니 "파라미터는 하나만 받아 와야 한다"라는 편협적인 생각을 하며 원하는 대로 변형이 될리가 없었고 이대로는 계속 해결이 안될 것 같아서 코드의 흐름을 생각 하고 이해하려 노력 하니 점점 답이 보였다.

결국 파라미터를 두가지 다 받아와서 update를 하니 문제가 해결 되었다.

//미들웨어 UPDATE
//수정 하고자 하는 내용과 data의 id값을 파라미터로 받는다.
export const updateCardFB = (card, card_id) => {
  return async function (dispatch, getState) {
    // 파라미터로 받은 card_id와 같은 id를 가지고 있는 doc의 data를 가져와서
    const docRef = await doc(db, 'mydictionary', card_id)

    // 해당 data를 업데이트 한다
    await updateDoc(docRef, {word : card.word, desc : card.desc, example : card.example})

    //card_list의 state값을 가져와서
    const _card_list = getState().cardlist.card_list

    //id값이 같은 data만 반환 한다.
    const card_index = _card_list.findIndex((b) => {
      return b.id === card_id;
    })

     //updateCard 액션을 dispatch 한다.
    dispatch(updateCard({word : card.word, desc : card.desc, example : card.example},card_index))
  }
};


//리듀서
case 'card/UPDATE': {
      const new_card_list = state.card_list.map((l, idx) => {
        
        //action으로 받아온 list중 index값이 같은 data를 찾아
        if (parseInt(action.cardIndex) === idx) {
          
          //수정된 data로 반환 하고
          return {...l, ...action.card}
        } else {
          //index값이 다르면 기존 data를 반환한다.
          return l;
        }
      })
      console.log({...state, card_list : new_card_list})        

      return {...state, card_list : new_card_list}

    }

• 레이아웃 수정

코르크 보드에 붙인 메모지 형식으로 컨셉을 잡고 디자인을 했다.
처음엔 사전이라서 책장에 꽃혀있는 책 형태로 만들고 싶었는데 필수 조건인 각각 뷰는 카드뷰로 만들기 를 충족하지 못할 것 같아 노선을 변경 했다.