728x90 반응형 리액트14 ReactQuill 리액트 글쓰기 에디터 이미지 드롭하여 삽입하기 ReactQuill 을 사용하면서 기본만 사용하기엔 불편한 부분들이 많다. 정말 쉬운 작업으로 이미지를 드롭하여 인서트 할수 있는 기능을 소개한다. import ReactQuill , {Quill} from "react-quill" import '../../assets/css/quill.snow.css' import { ImageDrop } from "quill-image-drop-module"; Quill.register("modules/imageDrop", ImageDrop); const modules = useMemo(()=>{ return { // table: true, // tableUI: true, toolbar: { container: toolbarOptions, }, // ImageResi.. 2023. 8. 14. 리액트 글쓰기 라이브러리 사용 해서 에디터 만들기 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 열기 리액트에서 새창팝업 띄우는 방법은 두가지가 있다. 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. [React] 암호화 AES CryptoJS 사용하여 암호화/복호화 하기 id값을 암호화시켜 url에 넣어 호출하는 예제 아이디값이 단순 숫자인 경우 보안에 상당히 취약함으로 암호화가 필요하다. 나는 암호화 = 리액트 / 복호화 = nestJS를 사용하였다. 😎 install npm i crypto-js 😎 import import CryptoJS from 'crypto-js'; 😎crypto.js import CryptoJS from 'crypto-js'; const secretKey = process.env.REACT_APP_AES_SECRETKEY //암호화 export const encrypt = (val) => { let text = val.toString(); const data = { id:text }; const encrypted = CryptoJS.AES.en.. 2022. 8. 30. [React] 크롬 React 디버깅 툴 설치 방법 (React Developer Tools) React 사용시 개발자모드 Elements 탭에서는 브라우저가 이해하는 코드를 보여주기 때문에 우리가 React를 사용하여 스크립트로 작성한 컴포넌트 구조를 정확히 볼 수 없다. React Developer Tools를 사용하게 되면, 크롬 웹에서 개발자 모드로 컴포넌트(Components) 구조를 볼 수 있고 변경하면서 테스트에 용이하다. 😎 링크 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revi.. 2021. 12. 13. [React] 컴포넌트란? 함수형/클래스형 😎 컴포넌트 컴포넌트는 UI 를 구성하는 조각(piece)에 해당되며, 독립적으로 분리되어 재사용을 됨을 목적으로 사용됩니다. React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리합니다. (예: Header, HeaderTitle, Wrapper, List, ListItem 컴포넌트) 리액트에서 컴포넌트는 앱을 이루는 최소한의 단위이다. 또한 props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다. 이러한 컴포넌트들이 유기적으로 잘 연결되고 동작되어야 훨씬 효율적인 앱이 될 수 있다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 어떠한 값을 컴포넌트에 전달해 줘야 할때 사용하며 할당된 후 컴포넌트 내부에서 값을 변경할 수 없다. state는 컴포넌.. 2021. 11. 23. [React] 기초 - 바벨/웹팩 이란? CDN을 넣어서 React 구조 만들기 실제 프로젝트를 진행할때, cdn을 넣지않고 react create 해서 사용한다. 😎 create-react-app 이란? react를 활용해 개발을 하기 위한 필수 모듈인 react, react-dom, react-scripts 외부 모듈 webpack, babel 기본 구조를 알기위해 CDN을 넣어 구조 생성 React CDN => https://ko.reactjs.org/docs/cdn-links.html#gatsby-focus-wrapper 바벨 CDN => https://babeljs.io/docs/en/babel-standalone CDN 을 헤더 안에 붙여넣어주면 된다. - 예제 화면에 보이는 영역 -> el이라는 태그를 dom에 끼워넣는다 라고 생각하면 된다. 😎 바벨 최신 ES6버전을 .. 2021. 11. 18. [React] 클립보드 텍스트 복사하기 😎서론 웹에서 공유하기 또는 url 복사하기 같은 기능을 편하게 유저에게 제공할 때 두루 쓰이는 기능인 유저가 버튼 클릭시 컴퓨터에 텍스트가 복사되는 (cmd + c) 기능 클립보드에 데이터를 복사하는 방법은 exeCommand (opens new window)를 사용하거나 clipboard api (opens new window)를 사용하는 방법이 있습니다. clipboard api의 경우 exeCommand보다 최근 나온 기술로 호환하는 브라우저가 적으므로 exeCommand로 복사하는 방법을 알아보겠습니다! 😎흐름 현재 브라우저가 copy 기능을 지원하는지 확인 지원한다면 textarea를 만들어서 내부에 원하는 text를 복사 복사한 텍스트를 document.body에 appendChild exe.. 2021. 11. 17. React Hooks : useEffect() 함수 useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다. 😎useEffect() 사용법 기본 형태 : useEffect( function, deps ) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 import React, { useEffect } from 'react'; useEf.. 2021. 11. 14. 이전 1 2 다음 728x90 반응형
