회고
-
오늘의 도전과 배움
클린코드 pr을 오늘 처음 해봤는데 하낫도 어렵지 않았다..! 그냥 내가 pr이란 용어를 어렵게 느껴서 시도조차 안 하고 미뤄왔었는데 토끼님이랑 레오님이랑 2분 만에 끝냈....
호호호😂 -
궁금하거나 어려웠던 점
typescript generic, 테스트 테스트러너?? vite vitest jest jestdom 토낀미이 알려주시긴 했지만 더 찾아봐야 할 듯 기타 등등 -
내일 해보고 싶은 것들
게시판 완성! 클린코드 수정, 스토리북 적용, next & redux 찍먹
팀프로젝트
text editor 적용해보기
react-draft-wysiwyg
참고
공식문서 https://jpuri.github.io/react-draft-wysiwyg/#/
https://github.com/jpuri/react-draft-wysiwyg
https://haranglog.tistory.com/12
- 설치
npm install --save react-draft-wysiwyg draft-js
자료가 별로 없고... 별로 내 스타일이 아니라서 패스~는 핑계
ckeditor
https://ckeditor.com/ckeditor-5/
ㅇㅇㄴㅇ
간단한 리액트 게시판 만들기:WISIWYG cheditor
toast ui
참고
TOAST UI
TOAST UI Viewer 적용 (+ Editor)
toast-ui editor 마크다운 에디터 사용하기
toast ui를 react에 적용한 예시 블로그를 이것저것 찾아보다 createRef를 발견했는데 내가 이걸 전에 class component에서 본 것 같은데 functional component에서 사용하고 있었담... 그래서 createRef, useRef의 차이를 검색하다 발견한 블로긍
https://kyounghwan01.github.io/blog/React/useRef-createRef/
드림코딩 리액트
4.7 State 이해하기
브라우저 Event, MDN: https://developer.mozilla.org/en-US/docs/Web/API/Event
리액트 Handling Events: https://reactjs.org/docs/handling-events.html
4.7.1 보충 설명 (Props에 대해서)
- state
컴포넌트 안에서 우리가 정의. 데이터에 업데이트가 발생하면 리액트가 자동적으로 render 함수를 호출 - props
컴포넌트 밖에서 주어지는 데이터. 근본적인 이유는 컴포넌트의 재사용성을 높이기 위함. 오브젝트로 묶여서 전달됨
4.8 Habits 컴포넌트 만들기 (State up, list key)
- 의미있는 태그 사용!
https://kutar37.tistory.com/entry/%EC%8B%9C%EB%A9%98%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag - props는 properties의 약자로 부모나 다른 컴포넌트로부터 데이터를 받음
- 리액트가 불필요한 렌더링을 다시 하지 않는다던지의 성능을 고유 id를 이용해 계산함
- Object destructuring
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
4.9 이벤트 처리 하기
- 데이터를 가지고 있는 곳이 내가 이 데이터를 어떻게 수정하면 되는지 잘 알고 있는 최고의 장소이기 때문에 여기에서 처리!?
- function은 object의 일종. 참조값을 전달
- 리액트에서는 State를 직접 수정하면 안 됨!
4.12 Add Form 만들기 (Refs 이용)
preventDefault() - 브라우저의 기본 기능을 취소
아이디는 고유해야 함. 간단하게 Date.now() - 현재 날짜, 시간, 초까지 합해서 만들어줌. 기계적으로 빨리 클릭하지 않는 이상 거의 중복될 가능성이 낮음
4.14 PureComponent 정리와 차이점 이해
리액트의 중요 컨셉들
- 리액트는 Component 들이다.
- 데이터가 조금이라도 업데이트가 되면 전체적으로 어플리케이션이 다 re-render 된다.
- Virtual DOM - 메모리상에 이런 트리를 보관해 놓고 이전과 지금 업데이트 된 것을 비교해서 실제로 필요한 부분만 DOM 요소에 업데이트됨.
- PureComponent: https://reactjs.org/docs/react-api.html#reactpurecomponent
impot React, { PureComponent } from 'react';
class App extends PureComponent { ...Component와 다른 점은 ShouldComponentUpdate()를 구현한 것.
Shallow! 가볍게 비교. 컴포넌트 업데이트 전에 이전 prop이나 state를 아주 얇게 비교해서 업데이트의 필요성을 체크. 오브젝트의 레퍼런스를 비교함
