[항해99 22일차] 2022.03.28 TIL /업데이트 기능

<오늘 할 일 >

 

1. cs스터디 13챕터 발표

2. 코딩앙마님 자바스크립트 중급 강의 듣고 깃허브 TIL 에 개념 정리하기

3. 숙련 과제 업데이트 시도 !!

4. 리덕스 파이어베이스 강의 무한반복 머릿속에 들어올때까지.

5. 팀 과제 발표

 

 

아침에 무사히 cs스터디 발표를 끝마쳤다.  (모두에게 별거는 아니겠지만, 나한테는 별거다.)

후흑.. 나는 대학생 시절에도 발표대신 ppt만 주구장창 맡았었기 때문에 ..

모든 발표에 약간의 부담감을 가지고 있다.

대학생 시절에는 사시나무 떨듯 덜덜덜덜ㄷ러럳ㄹ더더럳ㄹ덜 떨었는데, 이젠 그 정도로 떨지는 않는다.

허나 아직까지 말을 조리있게 잘 하지 못한다. 

왜 일 까 ❗️

그래도 말 많은 수다쟁이 남편을 둔 덕분에 점점 말하는 스킬을 배워가는 중이다.

나중에 면접을 위해 꾸준히 책을 읽고, 블로그를 작성하면서 말을 조리있게 할 수 있는 능력을 키워야겠다.

 

무튼. 오늘은 숙련과제에 체크기능을 부여하고 싶다는 생각이 들었다.

무한 스크롤 구현 하고 싶었는데 ..

감이 잘 오지 않는다. 🤣

 

다시 리덕스 강의 듣기 !

도르마무 무한거래처럼 난..무한반복.. 😁

 

src폴더 안에 redux폴더를 만든다.  redux폴더에 modules폴더를 만든다. 안에 js파일을 만든다.

redux폴더에는 configstore.js파일을 만든다. 아래처럼 !!

액션 , 액션크리에이터, (실제로 값을 바꾸어주는)리듀서, 미들웨어

데이터를 외부에서 가지고 와야 할 때 , 시간이 걸린다. 즉 비동기 통신을 한다.

나 액션크리에이터로 뭐 수정했으니까 리듀서로 넘겨줘 ! 

하지만, 아직 데이터가 없어서 바로 넘겨주지는 못하고 중간다리인 미들웨어를 거쳐서 리듀서로 넘겨준다.

 

액션 생성함수 -> 초기값 설정(initialState)-> 액션크리에이터 -> 미들웨어 -> 리듀서

이 순서대로 작성한다. 

 

아 .. 오늘은 컨디션이 안 좋아서 잠시 자고오니 

로드맵시간이다.

 

개발을 좋아하고 올바른 습관(왜 ? 집중)으로 많이 공부하다보면 어느 회사던 다 갈 수 있다고 답변해주셨다 !!

 

여태까지 나는 왜 이게 이렇게 되는거지? 궁금증은 발생했지만, 찾아본 적은 없던 것 같다.

그냥 이렇게 하라니까 해야겠지. 이해는 안되지만 외워버리자 !

이런 식으로 .. 개발공부를 했던 것 같다.

나의 잘못된 습관을 올바른 습관으로 바꿔야겠다 !

 

그래서 리덕스를 더 자세히 알기 위해 ㅎㅎ..다시 강의를 마저 들어야겠당.

 

리덕스와 컴포넌트를 연결하기 위해서는 index.js파일로 가서

Provider를 임포트해오고 APP.js를  Provider 로 감싸준다. !!

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

이런 식으로 !

store에는 내가 만든 store를 넣어주면 연결이 끝난다.

.. 아 이거 몇일 전에..내가 블로그에 포스팅한 내용이랑 겹치는데 ?ㅋㅋㅋㅋㅋ

무튼 이전 포스팅에서도 말했듯이 

리덕스도 훅이있다 !

useSelector, useDispatch

데이터 가져오는 훅, 데이터 업데이트 하는훅

 

설명은 이 정도면 된 것 같아서 .. 

바로 update로 넘어왔다.

//1. 액션타입을 지정해준다.
const UPDATE='word/UPDATE';

//2. 액션 크리에이터를 만들어준다.
export function updateWord(id){
    return{type:UPDATE,id};
};

//3. 확인을 위해 리듀서에 state만 반환한다.
case "word/UPDATE":{
        console.log('이제 완료할거야')
        return state;
      }

 

Main.js에 updateWord을 임포트해주고, 해당 버튼에 디스패치를 일으킨다 !!!

 <button onClick={()=>
                                dispatch(updateWord(list.id))
                            }>

 

체크 버튼을 누르면 콘솔창에 '이제 완료를 할거야 !'

이렇게 잘 뜬다.

이제 리듀서를 수정해준다 !!

아래의 new_word_list를 클릭해보면, 내가 클릭 한 것의 completed값이 true로 바뀐 것을 확인 할 수 있었다.

      case "word/UPDATE":{
        const new_word_list = state.list.map((word) => 
        word.id === action.id ? { ...word, completed: !word.completed } : word
        );
      console.log(new_word_list)
      return {
        ...state,
        list: new_word_list,
      };
    
  };

0번째의 completed의 값이 true로 바뀐 것을 알 수 있다 !!

Main.js에..설정해주는걸 따라하고있는데

강의랑 똑같이..하고 실행하면 오류가 뜬다..

왲?왜지 ?..???

ㅋㅋㅋㅋ결국 해결하지 못했다.

ㅋㅋㅋ논불린....ㅋㅋㅋ

장난하나..ㅠㅠ

 

미들웨어

export const updateWordFB=(word)=>{
  return async function(dispatch,getState){
  
     const docRef = doc(db,"word",word.id); //어떤 것을 수정해 줄것인지
    await updateDoc(docRef,{completed: !word.completed});

    
    dispatch(updateWord(word.id));
   
  };
};

이렇게 수정해주고..

 <button 
                            
                                onClick={()=>
                                //dispatch(updateWord(list.id))
                                dispatch(updateWordFB(list))
                            }>

요렇게 수정해주면, 클릭했을때 true로 바뀌고...

다시클릭하면 false로 바뀌는데 

왜!!!!!적용을 하면...논불린같은 에러가 뜨는지...알 수가 없다.

 

...결국 다른 방법으로 성공시켰다.ㅠㅠ

 

단어추가해주는 상세페이지 js

 const addWord =(e)=>{ //추가해주는 함수
        e.preventDefault();
        const word_re=allWord();
        if (!word_re) return; //이거 안넣으면, 값입력안하고 추가 눌렀을 때 얼럿창만 뜨고 빈 박스가 추가됨..

        const new_word_re = { ...word_re, date: Date.now(), completed: false };
        console.log(new_word_re)
        
        dispatch(
            addWordFB({
                 word: new_word_re.word_v,
                desc: new_word_re.desc_v,
                example: new_word_re.example_v,
                completed:new_word_re.completed
            })
            
        )
        props.history.push("/");
    };

메인 js

{list.completed ? <Ok/>: <Check/>}

휴,,내일 다시 ..수정해봐야겠당 !!

오늘은 여기까지만 하고 자야지...🔥

 

 

코드는 나의 깃허브에 모아두었당.

깃허브숙련과제링크    👈 click 👀

 

 

<내일 할 일>

1. 리덕스 강의 반복

2. 파이어베이스 강의 반복

3. 단어 선택 해제 스타일 더 주기

4. 알고리즘 문제 2개 풀기

5. 자소서 슬슬 작성