Web Dev/3. React 관련
-
React 관련 싹훑기(8) - 간단하게 Notion처럼 Editing이 가능한 블럭 구성하기Web Dev/3. React 관련 2021. 5. 27. 16:22
오늘 대략 nested block 구조를 잡긴했고, 현재 모양상으로는 1depth기준으로만 블럭이 추가되도록 되어있다. Enter를 치면 새로운 블럭이 추가되거나 다음 블럭으로 focus를 이동하고 있다. redux를 잘몰랐을때 notion을 만들어보려고 했었을때는 머리가 정말 뽀개지는줄알았는데, redux를 쓰니까 확실히 편하다. redux를 통해서 앱을 설계할때 디비 설계하는 것처럼 섬세하게 설계한다음 해야하는거구나 알 수 있었던 시간이다. 신기했던 것은 https://mytutorials.tistory.com/406?category=917383 React컴포넌트에서 HTMLElement contentEditable 속성 사용하기 const EditableBlock = ({ block }) => { ..
-
React컴포넌트에서 HTMLElement contentEditable 속성 사용하기Web Dev/3. React 관련 2021. 5. 27. 14:31
const EditableBlock = ({ block }) => { return ( {block.contents} ); }; export default EditableBlock; React에서 위와 같이 사용하면 난리를 친다. 그래서 react-contenteditable 라이브러리를 활용할 수 있다. https://www.npmjs.com/package/react-contenteditable react-contenteditable React component representing an element with editable contents www.npmjs.com yarn add react-contenteditable 아래와 같이 사용할 수 있다. import ContentEditable from ..
-
React 관련 싹훑기(7) - Redux 앱 구상 및 간단한 상태설계Web Dev/3. React 관련 2021. 5. 26. 22:42
Notion처럼 페이지별로 블럭을 구성하는 앱을 만들어보려고 한다. 상태 설계하기 아무래도 나중에 바꾸겠지만, 우선 page와, page별 블럭을 구성하는 상태를 구성하기로 했다. react-redux 튜토리얼을 참고했을때 notion처럼 좌측에는 페이지가 추가되고, 내부에는 여러개의 block데이터들이 중첩될때는 위처럼 해보면 어떨까 싶다. reducer는 pagesReducer와 blocksReducer를 두개를 구성하고, pages를 생성할때 pageIdes를 추가하고, pageById에는 해당 page의 메타 정보를 저장할려고 한다. 그리고 blocks는 특히 root에 있는 block들의 id를 추가하려고한다. blocks는 본격적으로 id에 대해서 block의 정보를 가지고 있게 하려고 한다...
-
React관련 싹 훑기(6) - react-redux hooks 부분 문서 읽고 실습Web Dev/3. React 관련 2021. 5. 26. 14:14
Hooks 파트 문서 읽기 https://react-redux.js.org/api/hooks Hooks | React Redux Hooks react-redux.js.org 공식문서 예시를 내가 주로 쓰는 함수형과 hooks만쓰도록 한번 만들어 보려고 한다. 1. create-react-app 실행 후에 redux, react-redux 설치 - redux installation guide: https://redux.js.org/introduction/installation - react-redux installation guide: https://react-redux.js.org/introduction/getting-started yarn add redux react-redux yarn add -D r..
-
React관련 싹 훑기(5) - you might not need redux, normalizrWeb Dev/3. React 관련 2021. 5. 25. 21:43
Redux를 보다가 찾은 내용 간략하게 메모 Dan Abramov의 "you might not need redux" https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367 You Might Not Need Redux People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at the indirection Redux… medium.com 위글을 간략하게 요약을 해보았다. redux는 아래의 세가지를 하도록 강제한다. - 앱의 상태를 plain object, arrays로 표현한다 - 앱의 ..
-
React관련 싹 훑기(4) - Redux Subscriber는 어떻게 동작하는가Web Dev/3. React 관련 2021. 5. 25. 19:58
State를 관리할때 가장 헷갈렸던 부분은 어떻게 state는 한 오브젝트로 관리되면서, 특정부분의 변화만을 listening한다음에 컴포넌트에 렌더링할 수 있는가였다. Redux자체의 subscriber https://redux.js.org/api/store#subscribelistener Store | Redux Store redux.js.org // 공식문서: https://redux.js.org/api/store#subscribelistener function select(state) { return state.some.deep.property } let currentValue function handleChange() { let previousValue = currentValue currentV..
-
Next.js Link컴포넌트에 className 적용하기Web Dev/3. React 관련 2021. 5. 23. 00:36
Next.js에서는 Client-side navigation을 지원하기 위해서 Link 컴포넌트를 제공한다. 그런데 여기다가 className을 적용할때는 그냥 a태그를 내부에 넣고 적용해주면된다. // is merely a decorator (higher-order component). It only has a href attribute. {children} // 실제로 그려지는 것 {children} Link안에 a태그가 없으면 Link컴포넌트가 알아서 감싸주는것 같고, a 태그가 있으면 그걸 그대로 사용하는 것 같다.
-
React관련 싹 훑기(3) - Redux 의 개념Web Dev/3. React 관련 2021. 5. 21. 00:58
이때까지 Redux도 쓰기도하고, context도 쓰기도 했고, 완전 전체로 다 state로 관리하면서 props drilling을 해가면서 실사용되는 프로젝트를 다 굴려봤다. 근데 아주 다 하나같이 속이 터질뻔한 경험을 했어서 이번에는 State쪽을 Deep Dive 해보려고 한다. Redux https://frontendmasters.com/courses/redux-mobx/introduction/ Learn Introduction – State Management with Redux & MobX Steve Kinney introduces the course on Redux & MobX by giving an overview of what the course will cover and argues f..