ღ17일차 TIL, 과제 CRUD 완성+Spinner추가

 항해 17일차, 과제 제출일

오늘은 항해 17일차, 2주차 과제 제출일이다. 서버에 올리고 원래 과제였던 S3이용해서 올리기, 리덕스,파이어스토어를 이용해서 데이터 관리하기 중 추가하기 기능까지는 며칠 전에 완성하였지만 CRUD중 CR만 하기에는 너무 초라해 보여서 UD까지 구현해 보기로 했다.

  Update, Delete기능을 구현하려면 둘 다 map함수를 돌려 생성한 카드들 중 선택한 카드의 id값이 필요했다.

id값을 구하기 위해 파이어스토어와 연결하는 미들웨어에서 리덕스 데이터 값에 id를 보내주었고 리덕스내의 state중 해당 카드에 들어가는 데이터 배열을 가져오고 그 데이터중 해당 카드를 특정하기 위해 useParams를 이용해 각각의 업데이트 페이지를 따로 주었다.
첫 번째 카드의 수정 버튼을 클릭했을 때

두 번째 카드의 수정버튼을 클릭했을 때

위 사진들처럼 한 후 이 params.index값을 voca_index로 지정 후 아래처럼 수정 버튼을 눌렀을 때 dispatch를 통해 해당 순서에 해당하는 아이디와 현재 input에 입력한 값들을 보내주고 updateDoc을 이용하여 파이어스토어의 값을 업데이트하는 기능을 추가하였다(Delete과정도 해당 과정과 유사)

dispatch(updateVocaFB(
       my_voca[voca_index].id,{
       list: voca_text.current.value,
       desc: desc_text.current.value,   
       ex: ex_text.current.value

또한, 아래처럼 파이어스토어에서 데이터를 가져오는 동안 심심하지 않을 수 있도록 해서 제출완료하였다!

항해 17일차,

  조장역할을 맡게 된 주차를 무사히 끝내서 기분이 좋다. 하지만 또 내일이면 다른 팀이 되어야 한다는 사실도 다가와서 너무 아쉬웠다. 그래도 조원 모두가 과제 제출도 무리 없이 완성 하였고 오히려 더 다양한 기능들을 추가까지 모두 완성했다.

  부족한 조장이었지만 그래도 아예 모르는걸 물어보기만 하던 첫 주와는 많이 다르게 내가 알고 있는 것들을 알려줄 기회도 꽤나 있었어서 그런지 첫 주와는 느낌이 사뭇 달랐던 한 주였다.