MyTutorials MyTutorials

Web Dev/3. React 관련

• Didact 키 구현 제대로 참교육 당했다. 키를 잘쓰자

  Web Dev/3. React 관련 2021. 11. 11. 00:14

  https://codesandbox.io/s/didact-8-forked-rguiq?file=/src/index.js didact-8 (forked) - CodeSandbox didact-8 (forked) by hayoung0Lee using react, react-dom, react-scripts codesandbox.io 리액트 구조를 파헤쳐 본답시고 didact글을 열심히 보고 있다. 키 최적화가 어떻게 구성될까 싶어서 대충 내머리를 굴려서 해봤는데, 개박살이 난다. 키를 다 넣어주면 되지만, 넣었다 안넣었다 난리를 치면 박살이 나는데, react도 키를 중구난방으로 넣으면 예기치 못하게 동작한다더니, 나도 그렇다. 이제 키를잘써야겠다. https://pomb.us/build-your-own-re..

  Read More
• Chart그리는 툴 - react-chartjs-2(TypeScript관련 에러처리)

  Web Dev/3. React 관련 2021. 6. 2. 13:24

  간단하게 Chart를 그려야해서 찾아보니, react-chartjs-2라는게 있었다. 기반은 Chart.js이고 이 라이브러리의 React Wrapper이다. react-chartjs-2 https://github.com/reactchartjs/react-chartjs-2 reactchartjs/react-chartjs-2 React wrapper for Chart.js 2.0 and 3.0, the most popular charting library 📊 - reactchartjs/react-chartjs-2 github.com 설치는 react-chartjs-2, chart.js 둘다 해야하고, TypeScript를 쓰는 프로젝트면 이것도 필요해서 설치를 했다. type관련 설치 https://www..

  Read More
• Redux Toolkit, Redux Saga와 TypeScript

  Web Dev/3. React 관련 2021. 6. 1. 15:15

  Redux를 통해서 상태관리를 하면 좋은데, 여전히 코드가 너무 많지 않은가 싶어서 써본 Redux Toolkit은 정말 편하긴하다. Redux Saga와 TypeScript랑 같이써서 간단하게 API를 쏘고 응답을 받아서 처리하는 것을 해보면서 참고한 자료를 정리해두려고 한다. 전체적인 흐름은, 우선 Store에서 Thunk를 안쓸거라(toolkit은 Thunk를 기본으로 제공), 걔를 꺼줘야한다. 1. Thunk 끄기 import { configureStore, Action, getDefaultMiddleware } from "@reduxjs/toolkit"; import userSlice from "./userSlice"; import createSagaMiddleware from "redux-sa..

  Read More
• React 관련 싹훑기(13) Redux toolkit 문서 읽기

  Web Dev/3. React 관련 2021. 5. 31. 22:29

  https://redux-toolkit.js.org/introduction/getting-started Getting Started | Redux Toolkit Getting Started with Redux Toolkit redux-toolkit.js.org 이번에 Notion 프로젝트를 하면서 Redux를 통해서 상태관리를 "잘"하면 정말 원하는 정보를 웹에서 마음껏 띄울 수 있겠다는 생각이 들었다. 그러다 Redux toolkit을 알게 되어서 이부분을 좀더 공부를 해보려고 한다. 최종 목표는 Redux와 TypeScript의 이점을 모두 취하는 것인데, Redux toolkit과 TypeScript가 잘 붙는다는데 toolkit을 너무 몰라서 시작조차 하기 힘들어서 문서를 읽어보기로 했다. Red..

  Read More
• React 관련 싹훑기(12) - React-ContentEditable관련 reference가업데이트가 안되는 문제 해결,

  Web Dev/3. React 관련 2021. 5. 30. 16:35

  이번에 에러처리를 하면서 JavaScript를 좀더 알게된 느낌이다. React-ContentEditable의 알수없는 동작? // const orderedList = useSelector((state) => getBlockOrder(state, pageId)); // 블럭id마다의 subBlock을 가져옴 setBlockValue(e.target.value)} onKeyDown={(e) => { onKeyDownHandler(e, pageId, blockId, depth); }} onBlur={(e) => onBlurHandler(e)} className={`w-full p-2 rounded-md hover:bg-gray-200`} tabIndex="-1" /> 이런식으로 ContentEditable을..

  Read More
• React 관련 싹훑기(11) - Reordering blocks using react-beautiful-dnd

  Web Dev/3. React 관련 2021. 5. 30. 02:18

  일단 블럭을 구조화해놓고 추가나 탭 같은건 되는데 실질적으로 블럭을 reordering 하는 것은 어떻게 하는지 고민을 해보았다. 아래는 현재의 화면이다. 우측에 있는 버튼을 눌렀을때 잡고 이동할 수 있도록 하려고 하는데, 어떻게 하는지 잘몰라서 찾아보았다. 삽질을 하다보니 아래와 같은 라이브러리를 찾을 수 있었다. https://github.com/atlassian/react-beautiful-dnd atlassian/react-beautiful-dnd Beautiful and accessible drag and drop for lists with React - atlassian/react-beautiful-dnd github.com 감사인사를 드리고 구현을 하면 될것같다... 정말 고마운 사람들. 중..

  Read More
• React 관련 싹훑기(10) - Enter, Tab, 블럭 에디팅 기능까지 리팩토링 완료!

  Web Dev/3. React 관련 2021. 5. 29. 17:32

  이제 React랑 많이 친해진 느낌이다. 노션을 만들어보니까 React가 확실히 jQuery보다는 좋은 녀석이구나 깨달을 수 있었다. 상태처리하는 부분이랑 action부분을 많이 업데이트를 했다. 지금 되는 기능은 1. 한 큰 블럭을 기준으로 마지막 원소에서 엔터를 하면 새로운 블럭이 추가되는 기능 2. Tab을 했을때 상위 블럭의 하위로 이동하고 있다. 뿌듯하다. 큰산은 넘어서, 이제는 1. block을 이동하는 기능이랑, 2. 삭제하는 기능 3. 페이지별로 보이도록 4. 로컬스토리지에 저장해서 불러올 수 있도록 이렇게만 정리하면 된다~

  Read More
• React 관련 싹훑기(9) - 중첩되게 block이 들어갈 수 있도록 구성하기 + Tab기능(아직은 two depth) + focusing

  Web Dev/3. React 관련 2021. 5. 28. 00:07

  저녁에 한일은 중첩되게 block을 구성하는 것이었다. Recursive Component 내가 만든 EditableBlock컴포넌트는 내부에서 또 하위 컴포넌트를 불러와야한다. 그래서 react 컴포넌트도 recursive하게 호출이 되나 봤더니, 역시 함수이기때문에 가능하다. https://dev.to/knowit-development/recursive-components-in-react-37ka 아주 엉망진창이지만 아래는 내 코드이다. import ContentEditable from "react-contenteditable"; import { useRef, useState, useEffect } from "react"; import { useSelector, useDispatch } from "r..

  Read More