React5 React socket io client 적용 방법 기존 공식 홈페이지나 주변 예시를 따라하면 페이지가 넘어가도 소켓이 남아있다거나 너무 많은 소켓 이벤트가 등록되는 문제가 발생해 직접 리액트에서 소켓을 구현해 본 글입니다. const [socket, setSocket] = useState(); useEffect(() => { const socketIo = io("http://localhost:8080", { cors: { origin: "http://localhost:8080", credentials: true }, transports: ["websocket"], query: { tenant: 'EGU' } }) socketIo.on('responsRoom', (data) => { console.log(data) }) setSocket(socketIo).. 2022. 4. 28. React Quill Clipboard keyboard customizing 방법 react quill을 사용해 무료 wysiwyg에디터로 게시판 글쓰기를 구현하던중 enter를 눌러 줄바꿈을 할 경우 header 설정이 자동으로 nomal로 바뀌는 기능을 해제하고 싶어 분석후 적용한 내용 정리입니다. function preserveSizeFormat(node, delta) { const match = node.className.match(/ql-size-(.*)/) const fontSize = node.style['font-size'] // HACK: when className is not present, check style attribute const styleMatch = fontSize && fontSize !== '16px' console.log(match) console.. 2022. 4. 18. React CKeditor5 기본 컴포넌트 사용법 Ckeditor5는 많은 위지윅 에디터들중 기본 기능을 무료로 사용할 수 있고 적용하기도 간편해 사용하기가 좋다. 기본 기능 외에는 유료인 플러그인을 추가해야 사용할 수 있는 기능도 있지만 기본 기능으로도 기본적인건 구현이 다 가능하다. 이 글은 글자 크기와 색변경을 사용하고 싶어 클래식 에디터를 커스텀하려고 삽질 열심히하다가 허무한 해결책을 찾아 적은 글입니다. Ckeditor5는 기본적으로 5가지의 빌드된 에디터를 제공한다. Classic editor Inline editor Balloon block editor Balloon editor Document editor 대충 공식문서 가서 읽어보면 클래식을 가장 많이 쓸것 처럼 보인다. (여기서 혼자 낚였다.) 클래식 에디터에는 글자크기 색 변경 기능이.. 2022. 4. 1. React Recoil 사용하기1 React Recoil 공식 문서 주소 : https://recoiljs.org/ko/docs/introduction/getting-started/ Recoil 시작하기 | Recoil React 애플리케이션 생성하기 recoiljs.org 기본 환경세팅이 되있다는 가정하에 시작합니다. 리액트 프로젝트를 생성후 App.js(루트 컴포넌트)에 recoil을 임포트해줍니다. recoil을 사용하기위한 준비 단계는 1단계 루트컴포넌트에 recoil을 적용해준다. import { RecoilRoot } from 'recoil'; import CharacterCounter from './component/CharacterCounter'; import './App.css'; function App() { retur.. 2021. 12. 20. 이전 1 2 다음
