mic1021 / allroundeditor Goto Github PK

현재 firebase deploy를 하였을 때,
i functions: updating Node.js 12 function api(asia-northeast3)...
! functions[api(asia-northeast3)]: Deployment error.
위 부분에서 오류가 있으며

Functions deploy had errors with the following functions:
api
위와 같은 오류 메세지가 뜸.

디버깅을 해보았을 때,
[2020-11-21T13:58:43.416Z] <<< HTTP RESPONSE 200 {"content-type":"application/json; charset=UTF-8","vary":"X-Origin, Referer, Origin,Accept-Encoding","date":"Sat, 21 Nov 2020 13:58:43 GMT","server":"E
SF","cache-control":"private","x-xss-protection":"0","x-frame-options":"SAMEORIGIN","x-content-type-options":"nosniff","alt-svc":"h3-29=":443"; ma=2592000,h3-T051=":443"; ma=2592000,h3-Q050=":443
"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"","accept-ranges":"none","transfer-encoding":"chunked"}
! functions[api(asia-northeast3)]: Deployment error.
Function failed on loading user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additiona
l troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging

위와 같이 나옴.

You're directly mutating the state by calling push on the array instance.
Array연산을 할때 직접 array를 mutate를 하면 내용이 바뀌어도 array reference가 같기 때문에 React가 값이 바뀐것을 인지를 못합니다. 그러면 아무리 값이 잘 바뀌어도 re-render이 안되서 멘붕이오죠...

redux의 useSelector(stateSelector)에서 이런문제가 발생하면 shallowEqual을 같이 넘겨주면 react가 내부값도 비교를 해주기 때문에 문제 해결이 됩니다!

예전에는 State를 manage하려면 class component를 사용해야됬는데
React에서 React Hooks를 발표하면서 functional component에서도 State를 관리하게 될수 있게끔 되었습니다.
또 useEffect로 lifecycle도 manage 할 수 있게끔 되었습니다!

**정확히 어디서 봤는지 못찾겠지만 Document를 읽다가 Functional component를 optimization한다고 react팀에서 발표한적도 있고요
performance optimizations in functional components by avoiding unnecessary checks and memory allocations
라고요...

또 확실하지 않지만 state를 사용할 수 있다 말고는 거의 모든 면에서 functional component가 뛰어나다고 봤습니다.
특히 bind 밑 this 같은것도 쓸 필요도 없고요.
그래서 functional component를 안쓸 이유가 없어서 플젝을 재구조 할려고 합니다!!

다음 경우에만 class component를 사용하겠습니다!!

WHEN TO USE CLASS COMPONENT
WHEN YOU NEED A CONSTRUCTOR
Constructor runs once and only exactly once, before first render
WHEN YOU NEED TO EXTEND A COMPONENT
WHEN YOU NEED TO MAKE A HIGH ORDER COMPONENT

전체적으로 테마를 적용할 수 있는 라이브러리는 못 찾음

material-ui styles로 개별적으로 버튼이나 색을 넣어서 꾸미거나
figma 툴을 사용해서 직접 디자인하는 방법이 있음

<EquationListRow
equation={equation}
toggleChecked={this.toggleChecked(equation.id, equation.checked)}
changeMode={this.changeMode}
key={equation.id}

여기서 보시면 this.changeMode처럼 함수이름만 넘겨주는거랑 toggleChecked()로 넘겨주는 것이있습니다.

여기서 중요한게 공부하셨으면 아시겠지만 React 기본 문법이 props로 함수자체를 넘겨주는 것이죠?
예를 들어서
onClick={() => {
// do something
}}
이런식으로 function자체를 넘겨주는 거에요 하지만 다른 언어에서도 마찬가지로 함수명 끝에 '()' 이게 붙으면 함수를 실행시켜주죠? C언어 예를 들자면
int myFunc(param) {
return 1;
}
이런식으로 myFunc() 함수를 실행시킨 결과값인 1이 return되자나요.

그래서 this.changeMode()보내면 함수대신에 함수 실행 결과가 들어가게됩니다... 그래서 this.changeMode가 맞아요...
가능한 이유는 JS가 함수를 변수에 저장할 수 있도록 해주어서입니다!

이 부분은 확실하진 않지만 유일하게 허락되는 기본 parameter는 event변수에요! 그래서 this.changeMode(e)는 허용이 됩니다
(확실하진 않아요!!)

근데 여기서 프로그램을 작성하게되면 Parameter값을 event말고 다른 값을 넘겨야 되는 경우가 있는데... 여기서 이제 익숙하지 않은 SYNTAX가 소개됩니다.

일단 간략하게 설명...
함수를 리턴하는 함수에다 PARAMETER를 넘겨준다!!! 입니다

handleEnterPress = (clicked) => (event) => {
if(event.key==="enter" || clicked === "onClick") {
store.dispatch(this.submit());
}
console.log(store.getState());
} //----- 이게 향빈님이 궁굼해하신 코드인데

handleEnterPress는 event parameter를 갖는 함수를 RETURN해주는 clicked parameter를 갖는 함수에요!!
JS가 내부 함수에 clicked라는 변수가 없을때 Scope를 wrap하고 있는 함수까지 확인을 하거든요!!
그래서 가능합니다

다양한 라이브러리를 찾아보면서 Ant Design, React Bootstrap, 그리고 Material UI를 가장 많이 사용됩니다. 3개다 Document를 살펴보았습면서 제공해주는 Component들과 Component API를 공부해봤는데 Ant Design, 그리고 Material UI가 좀 더 많은 기능 등을 제공 해주었는데 인터넷에서 Material UI가 사용자가 더 많다고 해서 Material UI로 결정하였습니다.