[항해99 20일차] 2022.03.26 TIL /삭제기능

<오늘 할 일>

1. 다음주 월요일에 있을 cs스터디 13챕터 읽고 블로그에 정리하기

2. 무한스크롤 연구해보기

3. 삭제버튼 만들기 & 삭제 기능 구현

4. 과제 디자인 좀 더 다듬기

5. 팀과제 노션 발표 준비하기 😭😭

 

아침에 일어나는 게 이제 슬슬 적응되기 시작했다. 하루전까지만 해도 너무 고통스러웠는데,

삼주정도 지나고 나니 참을만하다 !!! (이전에 회사다닐때보다 훨씬 안졸립다.)

 

아침에 정신이 가장 말똥해서 code책을 읽었다. 

책을 저녁에 읽으면 잠이오기 때문에 아침에 읽어야 된다. 

정리하고 나니 벌써 점심 먹을 시간이다. 😭

책 내용이 너무 이해가 안되다 보니 조금 깊게 읽고 또 읽고했더니 이해가 가기 시작했다. 🤩 (완전한 이해는 아니지만 ...)

 

삭제버튼을 만들어뒀다 !

이제 기능을 구현할 차례 

나이가 들어갈수록 금방 잊어버리는 것 같다.

그래서 반복해서 다시 강의 들어보자 !!!!

 

뭐 강의들으면서 하니까 삭제기능도 구현완료다 !

1. 액션 타입을 정하기

const DELETE='word/DELETE';

 

2. 액션 크리에이터 생성

export function deleteWord(word_index){
    return{type: DELETE, word_index}
}

3. 미들웨어에 삭제 함수 생성

export const deleteWordFB=(word_id) =>{// 삭제하기
    return async function(dispatch,getState){
      if(!word_id){ //만약 워드 아이디가 없다면, 아래구문이 들어가지 못하게 해준다. 또 경고창도 띄워준다.
        window.alert('아이디가 없네요 ? 😜')
        return;
      }
      const docRef=doc(db,"word",word_id); //db word콜렉션 가져오고, Id도 가져온다.
      await deleteDoc(docRef); //어떤 도큐먼트 지워줄것인지.

      const _word_list = getState().word.list; //getstate사용해서 word에 있는 리스트 정도 긁어오고,
      const word_index = _word_list.findIndex((b)=>{
        return b.id === word_id; //리스트 안에 id가 파라미터 id와 일치하다면 그친구의 idex 가져와
      });
      dispatch(deleteWord(word_index)); //일치한 id는 삭제해 !
    }
}

4. 리듀서 

case "word/DELETE":{
        const new_word_list = state.list.filter((l,idx)=>{
          return parseInt(action.word_index) !== idx;
        });
        return {list :new_word_list}
      }

5. 버튼에 만든 함수 추가하러 Main.js로 이동

import {useSelector,useDispatch} from "react-redux";
import { deleteWordFB } from "../redux/modules/word";

const dispatch =useDispatch();
const history =useHistory();

디스패치 FB함수 임포트 !

6. 삭제 버튼에 기능 부여해주기 !!!

<button
                            onClick={()=>{
                                dispatch(deleteWordFB(list.id));
                                history.push("/");
                            }}
                        ><Trash/></button>

빠밤 !

 

이렇게 성공했다. 물론 나 스스로 짠 건 아니고,

강의보고 구글링하고 그랬다 !

 

 

이제..마지막에 추가한 단어를 맨위에 붙이고 싶다.. 심히..

 

😭 음 내가 배운걸로는 못하겠다는 생각이 들어서..

일단 단어추가 상자에서 빈값을 입력하면 값을 입력해달라는 alert창을 띄운 상태이다..

 

이제 무한 스크롤 하고 싶은데 ...🧐 click 👉공식문서 링크

아직 .. 공식문서와 친해지지 않아서 어렵다. 뚜둥. !!!!

그리고 ..너무 안 배운게 많아서 무한스크롤 구현하려고 하다가..큰코 다칠 것 같은 느낌이다.

 

이제 과제는 다했으니까..

자바스크립트 기본문법 부터 공부해야겠다.ㅠㅠ

 

<월요일에 할 일>

1. cs 스터디 발표

2. 팀 과제 발표

3. 코딩앙마 유튭보고 자바스크립트 공부

4. 리액트 강의 다시 듣기 (무한반복중..)