본문 바로가기
728x90
반응형

Front-end/React53

react-quill 리액트 글쓰기 에디터 이미지 서버에 저장후 url 연결 하기 [base64 문제 해결 too large data] react-quill을 사용해서 글 내에 이미지를 삽입하면 자동으로 base64변환해서 사이즈가 커진다. 이미지 핸들러를 이용하여 이미지를 서버나 클라우드에 저장하고 url을 사용하여 String으로 저장되는 contents의 크기를 줄이기로했다. import React, { useEffect, useMemo, useRef, useState } from "react" import ReactQuill , {Quill} from "react-quill" import '../../assets/css/quill.snow.css' quill 을 사용할떄 필요한 기본 들만 임포트 해줘도 충분하다. const quillRef = useRef(null); useEffect(() => { const quill = qui.. 2023. 8. 11.
리액트 글쓰기 라이브러리 사용 해서 에디터 만들기 react-quill 에디터 이미지 파일 리사이즈 react-quill 은 리액트에디터 라이브러리중 하나이다 여러개의 에디터 라이브러리가 있지만 사실상 리액트에디터 라이브러리중 유일하게 한국어를 지원하는 라이브러리 이기 때문에 유일하게 사용가능 하다. (2023년기준) 여러 모듈도 지원하고 라이브러리 사용이 간편하다. 이미지 추가시, base64 로 변황되어 String값으로 들어간다 에디터 (이미지 리사이즈 없이) 기본 코드 import React, { useState } from "react" import ReactQuill from "react-quill" import '../../assets/css/quill.snow.css' function Reactquill({id, value, setVlaue, isDisable}) { const modul.. 2023. 8. 10.
[React] 새창 Pop up 데이터 넘겨주는 방법 const childPopup = useRef() const onPopup = () => { const url = `/preview` childPopup.current = window.open(url, "_blank"); // "noopener, noreferrer" childPopup.current.param = param } . . . 미리보기 param 을 넘겨주면 새창 컴포넌트에 props 에 param이 담겨있다. 신기방기 childPopup.current.param = param 2023. 7. 19.
[React] 새창 Pop up 열기 리액트에서 새창팝업 띄우는 방법은 두가지가 있다. 1. import React, { useState } from 'react'; import { Link } from "react-router-dom" const ButtonPreview = (props) => { return ( 미리보기 ); }; export default ButtonPreview; Link태그 사용하여 타겟을 _blank를 주는방식 이 경우 라우터에 /preview 경로 파일을 연결해준다. js파일만 세팅해주면 간단하게 사용가능하지만 우리는 대부분 리액트를 사용할때, 컴포넌트들을 화면에서 분리하고 그 컴포넌트만 랜더링 하기때문에 디폴트 레이아웃이 잡혀있을것이다. 나의 경우 새창은 디폴트레이아웃과 상관없는 화면음으로 다른 방법을 사용했다.. 2023. 6. 13.
Chatgpt 가 말해주는 React의 장/단점 Chatgpt 가 매우 똑똑하고 한글로 물어봐도 한글로 대답해준다. 프로그래밍 언어에 대한 냉철한 평가가 가능할지 궁금했다. 결론을 미리말하면 나보다 한국말 잘한다. React의 가장 큰 장점 중 하나는 성능입니다. React는 가상 돔(Virtual DOM)을 사용하여 빠른 업데이트와 렌더링을 가능하게 합니다. 가상 돔은 메모리 상에 존재하는 가상의 DOM이며, 변경 사항을 실제 DOM에 적용하기 전에 가상 돔 상에서 처리하여 불필요한 업데이트를 최소화합니다. 이를 통해 웹 애플리케이션의 성능이 향상되고, 사용자 경험이 개선됩니다. 또한 React는 컴포넌트 기반 아키텍처를 사용하여 코드의 재사용성이 높아지고, 유지보수가 쉬워집니다. 이러한 이점들은 대규모 웹 애플리케이션을 개발할 때 매우 유용하며, .. 2023. 4. 25.
[react-sortablejs] 리액트 순서 드래그 앤 드랍 react-sortablejs 라이브러리 사용 핸들 동작 테스트 코드(베이스 of 베이스 코드 ) 입니다. 리액트 라이브러리 중 가장 단순하지만 기본 기능은 탄탄하니 응용하여 사용 가능 할듯 합니다. import React, { FC, useState } from "react"; import { ReactSortable } from "react-sortablejs"; const TestDrag = () => { const [state, setState] = useState([ { id: 1, name: "Peace" }, { id: 2, name: "Soma-damian" }, { id: 3, name: "Lee" }, ]); const sortableOptions = { animation: 150, f.. 2023. 4. 14.
리액트 상태관리 라이브러리 React-Hook-Form 기존에는 리액트의 상태를 useState 와 onChang 를 사용 하였다. 상태관리 툴이나 라이브러리 없이 상태를 관리 해왔다. 장점은 직관적이며, 데이터의 validation , 데이터변환 등 단점은 한개의 변환시 모든 데이터, 변경하시않은 상태도 다시 랜더링 된다는것 (치명적) 사실 위 코드도 나는 형식을 잘잡아놔서 충분히 사용할수 있지만 개발자는 유행하는건 배우고 따라해봐야하니까 (귀찮) 작년말 2022년부터 현재 2023년까지 상태관리 라이브러리 "react hook form"의 사용자 수가 증가 했다. react hook form 😎 install npm i react-hook-form 😎 import import { useForm } from "react-hook-form"; 라이브러리 미사.. 2023. 3. 16.
[React] 페이지 별 체크박스 - 전체/개별 체크박스 페이지 이동해도 checked 저장 리액트 체크 박스 검색시 가장 많이 나오는 전체 체크박스 및 개별 체크박스 그치만 페이지를 이동하면 전체 체크박스가 새로고침 되기 때문에 다 날라간다 나는 state에 페이지별 선택 ID를 남겨주었다 해당예제는 사용자 아이디 리스트. // user info const [users , setUsers] = useState([]); //페이지 내 전체 유저 const [selectableUsers , setSelectableUsers] = useState([]); // 페이지내 선택가능 유저 - 전체 선택 onoff //체크박스 const [checkItems, setCheckItems] = useState([]); //페이지 상관없이 체크한 아이템 const [checkItemsPage, setCheckI.. 2022. 12. 23.
[React] client IP / userAgent 정보 받기 외부 라이브러리 사용 하여 클라이언트의 IP 정보를 가져 옵니다. const [ ip , setIp ] = useState(); useEffect( () => { axios.get('https://geolocation-db.com/json/') .then((res) => { setIp(res.data.IPv4) }) },[]) userAgent 정보는 MDN 기본 반찬인 navigator로 출력 가능합니다. const userAgent = window.navigator.userAgent 2022. 10. 6.
728x90
반응형

티스토리툴바