[220808] Daily Study Note

 

 

  Today's Plan  

 

GoodGeul Project (5시간)

1) 책 정보 기입 팝업 만들기

2) 책 정보 기입 팝업의 내용 받아서 state에 저장하고, 책으로 만들어내는 기능 구현

3) state를 firebase에 저장하게 연동시키기. 실시간 firebse 하나 새로 파야한다.

4) 만들어진 책 눌렀을 때, 해당 책에 대한 상세 내용 + 내 리뷰 나오게 하는 페이지 만들기

5) 4)로 전환하도록 라우팅하던가 뭐하던가 하여간 렌더링하기.

 

Training Coding Test with Python (3시간)

 

1) 프로그래머스 4문제 ( 3시간 동안) 

2) 문제들 풀이 ( 집 와서 +a)

 

---

from 4:34 

책 정보 기입 팝업 만들기

 

to 5:34

후. 비트버저. 33분에 팝업 제작 완료,

오른쪽에 new book이라는 버튼을 누르면 나오는 화면입니다.

해당 팝업은 컴포넌트를 따로 만들었습니다. 

그리고 그 안에 draft-js에서 가져온 Editor를 자식 컴포넌트로 넣어서 텍스트 에디터가 보이게 했습니다.

스타일링 등이 마음에 안 들지만 일단 타임아웃이므로 다음 단계로 넘어갔습니다.

 

https://www.cluemediator.com/create-simple-popup-in-reactjs#htp

Create simple Popup in ReactJS - Clue Mediator

 

---

 

2) 책 정보 기입 팝업의 내용 받아서 state에 저장하고, 책으로 만들어내는 기능 구현

 

from 5:50

to 6:17 집중 흐려져서 개념 읽다가 정신 뭉개져 버림.

 

다시 

from 6:20

 

7:20 또 집중 흐려짐.. 미쳤나..

 

30분간 잘 보자.

 

으아.. 다행히도 요가원에 대한 불안감을 가라앉히고 평정을 찾았다. 근데 문제가 안 풀린다.

왜 state의 한 요소가 계속 undefined로 선언이 될까? 나머지 하나는 잘 작동하는데.. 처음에는 props에서 잘 못 받아와서 그런 줄 알았는데 그냥 초기에도 값이 저장이 안 되는 문제가 있다. 어떻게 하면 찾을 수 있을까!

 

아.. 아니다. 화장실 다녀오고 머리 식히고 나니까 문제가 보인다. 

책이 업데이트가 안되며 이터러블 안 된다고 안내 문구가 뜬 이후부터 해당 부분을 찾아 거슬러 올라갔다.

1. 처음에  state의 bookList가 props의 books정보를 못 받아온다고 착각했다. 근데, 생각해보면 초기값으로 책을 렌더링은 할 수 있었는데, 왜 state만 이걸 못 받지? 싶었다. ( 사실 이 부분도 구조적 미스이다. single sourse of the truth'를 지키지 못한 부분이다. 나중에 고쳐야한다. )

2. 아, state.bookList업데이트하면서 값을 잘 못 넣는구나 싶어서, 이 방법 저 방법으로 해당 시점에서 array를 바꾸려고 시도했다. 그런데도 계속 undefined값이 출력된다.

3. 혹시나 싶어서 팝업 오픈 함수 전 state를 출력했는데 헉, state초기 선언에는 잘 들어가더라. 팝업 열리는건 기계적으로 오픈 중이었어서 설마 이 시점에서 undefined값으로 잘 못 들어갔다고 생각을 못 한 것이었다.

팝업 오픈 이벤트에서 showPopUp 바꾸면서 bookList값이 undefined로 바뀐 것. 이유를 찾고 해결을 해보자.