[TIL] 22일차

1) 수정하기 버튼 눌렀을 때 UpdateWord.js로 이동

2) 수정하면 fireStore에 수정된 데이터 반영

3) 로딩 스피너 구현 하면서 state에 is_loaded 데이터가 필요해서 추가 후 전체 수정

4) 수정 페이지 갔을 때 기존에 입력한 값 defaultValue로 띄우기

5) 삭제하기 버튼 눌렀을 때 confirm으로 확인

6) 전체 CSS 수정 (머테리얼 UI 활용)

7) firebase로 배포하기

8) 전체 단어 보기 / 외운 단어 보기 / 못외운 단어 보기 (+완료하기 버튼)

 

+ 추가로 멘토님께 숙제를 받았다. (페이징 처리, 전체 보기 / 외운 단어 보기 / 못외운 단어 보기 (+완료하기 버튼))

 

오후 9시

지금 완료하기 버튼 만들고 컴포넌트 분리 해서 각 조건별로 출력 하도록 코드를 짜보고 있는 데

리액트 로딩이 너무 오래 걸린다 노이로제 걸릴 것 같다.

 

오후 10시

Card 부분 컴포넌트를 따로 빼서 List.js 컴포넌트를 만들고 App.js에서 전체 단어 보기 / 외운 단어 보기 / 못외운 단어 보기 각 버튼을 눌렀을 때 filter를 사용하면 될 것 같은 데 어떻게 데이터를 props로 전달 할까를 고민 하다가

 

시행착오 끝에 (App.js에서 filter를 돌려서 새로운 배열을 만들어서 전달하는 건 undefined 때문에 못썼다.)

각 버튼을 눌렀을 때 msg를 state에 담아서 props로 넘겨주고 조건문을 사용해서 각 조건에 따라 filter가 실행 되도록 했다.

 

1번부터 7번까지

8번

 

https://github.com/eundol0519/Week-4-Assignment

GitHub - eundol0519/Week-4-Assignment: 4주차 리액트 숙련 강의를 바탕으로 과제 수행

 

firebase로 프로젝트 호스팅한 사이트!!

https://dictionary-5e1c5.web.app/

React App