[220806] Daily Study Note

 

  Today's Plan  

 

Book Review Web Program

 

1. 텍스트 에디터 내용 state로 저장해서 책에 업데이트 하기.

 

2. 그 텍스트에디터는 newPost 버튼 눌러서 나오느이쁘게 띄우기

 

3. 텍스트 에디터 내용 파이어베이스에 저장하기

 

4. 책 리뷰 상세페이지 만들기

 

 

Training Coding Test with Python 

1. 구현

2. DP

3. BFS

4. DFS

 

 

---

 

1. 텍스트 에디터 내용 state로 저장해서 책에 업데이트 하기.

계획 타임라인 : 3:36 - 1시간 !

오전, 지금 모르는 것:

 

state, ref, firebase 동작. Component간 정보 공유 관계 & 계층 구조

 

---

아.. 4분 남았는데 거의 실패임.. 대애충 이해는 늘었는데 하여간 못 구현해냄. 일단, 2번으로 넘어가기. 물론 이게 핵심이지만, 3이랑 겹치는 내용이라 그 때 해도 괜찮기는 하다.

대신 2에서 컴포넌트 간 계층 구조 다시 정리하고 해당 부분 리액트에서 이론 따와서 어떻게 쓸 지 다시 생각해보기.

 

(3:36 - 4:36)

---

헉. 드디어 Draft.js 의 ref가 왜 저렇게 생겼는지 알았다. 저건 우선 이름은 '콜백 ref'.

 

아 2번째 시도도 실패.. 하.. 심지어 졸려서 잠깐 엎드려서 자기까지 했다. 진짜 이해 안 되어서. ref 에 대해서 공부하기는 했다.

ref는 알게 되었다. 그런데 이번에 내가 하고자 하는건 ref를 사용하는 것보다 우선 아래에 있는 state를 좀 올려줘야하는 것 같다. state끌어올리기를 봤는데, 그것도 아닌 듯.

 

해당 문제와 비슷한 문제를 해결한 블로그글을 거의 마지막에 발견했다. 지금 2시간동안 원하는 결과 못 얻고 들여다보고, 헛발 짚고 있는데 이 글에서 실마리를 얻을 수 있길.

 

일단 제목은 내가 질문하고자 하는 질문과 같다. 제발.

 

https://www.tuomokankaanpaa.com/blog/how-to-store-draft-js-content

How to store Draft.js content | Tuomo Kankaanpää

 

(4:36 - 5:36)

위의 링크에서 딱 해답을 얻은 건 아니고, 대신 현재 문제의 실마리를 얻어서 몇 키워드로 검색했습니다.

https://stackoverflow.com/questions/51665544/how-retrieve-text-from-draftjs

How retrieve text from draftjs

음 이 링크가 제가 원하는 내용을 곧이 곧대로 담고 있었습니다. 

 

지금 문제 해결 과정의 문제가 뭐였냐면, 해당 api에서 제공하는 메서드를 이용해 원하는 작업을 하면 되는데,

스스로가 React의 구조를 이해하지 못했기에 이게 안 풀린다고 생각하고 그걸 단단히 하려고 노력하고 있었습니다.

결과적으로 React에 대한 개념이 확장되기는 했는데, 사실 원하는대로 텍스트 밸류를 뽑아내려면 해당 라이브러리의 작동 문법을 위주로 검색하고 찾아나갔어야지 이 문제를 빨리 풀 수 있었을 것입니다. 저는 돌고 돌아 이제야 그걸 했습니다.

 

마지막에 구글에 "How can i get text value from draft.js"라고 쳤을 때, 관련 글이 되게 많이 나오는 걸 보고 '아.. 나 삽질하고 있었군' 이라고 생각했습니다. 원하는 건 딱 그 질문인데, 제가 3-4시간 검색해온 건, 'what is ref?', 'how to get value from children component?' 등이었기 때문입니다. 물론 기초적인 기반이 안 다져졌기에 그런 불안 때문에 직접적으로 더 상위 개념인 api를 건드리기 무서웠기 때문이기에 그게 해소된 후에야 이런 질문을 구글에 던질 수 있었던 것 같습니다.

 

하여간 돌고 돌아 겨~~~우 콘솔에 찍기만 했습니다. 이제 이 데이터를 오늘 계획에 맞게 더 잘 조작해보겠습니다.

신기한 건 업데이트 단위가 블록입니다. 그러니까 띄어쓰기 단위로 렌더링 합니다. 

 

(5:36 - 6:15)

2. 그 텍스트에디터는 newPost 버튼 눌러서 나오느이쁘게 띄우기

계획 타임라인 : 4:36 - 1시강!

오전, 지금 자신 없는 것:

 

팝업, 컴포넌트간 정보 공유, 이미지 커버, 디자인적미적감각

 

 

텍스트에디터 포함한 기본 책 정보를 입력할 수 있게 하는건 우선, 새 컴포넌트에서 수행하고자 합니다.

 

버튼을 누르면 팝업으로 그 컴포넌트를 렌더링하려 합니다.

 

 

https://dev.to/g10dra/create-custom-popup-component-in-react-1o18

Create Custom PopUp Component in React

3. 텍스트 에디터 내용 파이어베이스에 저장하기

계획 타임라인 :  5:36 - 1시간!

지금 못하는것:

 

firebase 통신, 실시간 저장

 

4. 책 리뷰 상세페이지 만들기

6:36 - 1시간!

 

지금 못하는것:

 

반응형 CSS디자인, 레이아웃 잡기, API들여와서 정보 깔기.

 

 

7시까지 플젝 마감 끝냅시다 우윤.


거의 1/5 수준으로 끝냈에요.. 기초가 부실하니까 뭐 하나 시도하려 할 때마다 개념 읽을 게 많아서..
오늘은 일단 시간 맞춰 마무리하고 코테 공부하러 떠납니다.

 

 

---

 

5. 그리고 7:30 - 11:00 알고리즘 4문제 풀기. + 각각 남의 풀이 하나씩 보고 이해한거 정리하기

 

1. 구현

 

https://proprotrainee.tistory.com/112

[BOJ / 파이썬] 15683 감시

 

2. DP

 

https://proprotrainee.tistory.com/144

[ BOJ / 파이썬 ] 1912 연속합

 

3. BFS

 

https://proprotrainee.tistory.com/145

[ BOJ / 파이썬 ] 1012 유기농 배추

 

 

4. DFS

 

개념만 확인

---

 

.