React (115) 썸네일형 리스트형 [React] dangerouslySetInnerHTML 안전하게 사용하기(feat.dompurify/Quill 에디터 코드 화면 노출) React,TypeScript 사용중인 프로젝트에서 에디터를 통해 내려받은 코드를 본문에 노출되도록 하고 싶었다.dangerouslysetinnerhtml 을 그대로 아래와 같이 사용하여 표시를 할 수 있다. 하지만 이대로 사용시에는 악성 스크립트가 작동될 수 있는 위험성이 있다.XSS 공격?크로스 사이트 스크립팅 또는 교차 사이트 스크립팅(Cross Site Scripting, XSS)은 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것을 말합니다. XSS 공격은 스크립트 언어와 취약한 코드를 공격 대상으로 합니다.출처:https://nordvpn.com/ko/blog/xss-attack/.. [React] React Quill 에디터 라이브러리 사용 5-수정 페이지 🔔 [관련 정리 리스트]React Quill 1-에디터 사용React Quill 2-이미지처리(편집중/참고만)React Quill 3-이미지처리(편집완료/사용)React Quill 4-이미지 리사이즈지난번엔 에디터 작성, 이미지 치환, 이미지 리사이즈 까지 모두 적용해보았다.기존 작성에 사용했던 컴포넌트에 수정 로직을 추가하여, 한 컴포넌트 안에서 조건에 따라 작성, 수정 로직을 각각 돌게 하고자 한다.수정을 하려면 2가지 변경이 필요했다.첫번째는 기존 이미지 치환(base64->URL) 코드 수정,두번째로는 기존 작성하는 페이지 수정이 필요했다. 1. 기존 이미지 치환(base64->URL) 코드 수정일단 아래는 기존 에디터 이미지 치환에 사용하는 커스텀 Hook이다.기존에는 모든 이미지의 치환이 이.. [React] React Quill 에디터 라이브러리 사용 4-이미지 리사이즈(quill-image-resize) 🔔 [관련 정리 리스트]React Quill 1-에디터 사용React Quill 2-이미지처리(편집중/참고만)React Quill 3-이미지처리(편집완료/사용) react-quill-new 라이브러리를 사용하여 에디터 기능을 만들었다.이미지를 넣으면 아래와 같이 이미지가 그대로 넣어져서 조절이 불가능하다.따라서 이번엔 이미지 조절을 위해 quill-image-resize를 사용해보고자 한다. quill-image-resize-module-tsA module for Quill rich text editor to allow images to be resized.. Latest version: 3.0.3, last published: 7 years ago. Start using quill-image-res.. [React] React Quill 에디터 라이브러리 사용 3-이미지 처리/편집 완료 ✨(feat.react-quill-new) 🔔 [관련 정리 리스트]React Quill 1-에디터 사용React Quill 2-이미지처리(편집중/참고만)React Quill 3-이미지처리(편집완료/사용)React Quill 4-이미지 리사이즈위 목록 중 2와 같이 에디터 편집 중일때 이미지 처리를 하면, 이미지를 선택함과 동시에 서버로 보내고, S3 URL을 얻는다.이렇게 되면 이미지 업로드 할때마다 서버도 업로드가 되기 때문에, 편집 중에 이미지를 지우거나 편집 완료를 하지 않아도 이미지가 서버에 등록되어 불필요한 용량을 차지하게 된다.따라서 에디터를 모두 작성한 후 편집 '완료' 버튼을 눌렀을 때 서버에 이미지를 보내고 얻은 URL을 에디터 코드로 저장하고자 한다. 4-7. [React + Node.js Express] 게시판 - 게시글 .. [React] React Quill 에디터 라이브러리 사용 2-이미지 처리/편집 중 (feat.react-quill-new) 🔔 [관련 정리 리스트]React Quill 1-에디터 사용React Quill 2-이미지처리(편집중/참고만)React Quill 3-이미지처리(편집완료/사용)React Quill 4-이미지 리사이즈* 2는 에디터 작성 시 바로 이미지 치환 되는 방법이라 참고만 했음(3-작성 완료 버튼 클릭시 이미지 치환되는 방법으로 진행함)위에 1에서는 에디터 기본 기능을 사용하는 방법을 알아봤다.이번 2에서는 에디터 내 이미지 처리에 대한 방법을 정리했다. 에디터에서 이미지를 그대로 사용하게 되면 이미지가 기본적으로 이미지 자체를 base64로 인코딩한 형식으로 삽입되는데 대용량 이미지를 처리할 때 비효율적일 수 있으며 너무 긴 데이터라 그대로 서버에 넘겨주기엔 무리다. 따라서 기존 홈페이지에서 S3 이미지를 사용.. [React] React Quill 에디터 라이브러리 사용 1(feat.react-quill-new) 🔔 [관련 정리 리스트]React Quill 2-이미지처리(편집중/참고만)React Quill 3-이미지처리(편집완료/사용)React Quill 4-이미지 리사이즈*react-quill이 상단, react-quill-new이 하단에 정리되어 있음 [react-quill] GitHub - zenoamaro/react-quill: A Quill component for React.A Quill component for React. Contribute to zenoamaro/react-quill development by creating an account on GitHub.github.com 설치 및 사용법설치npm install react-quill index.html 에 아래 코드 추가 사용하기impo.. [React] npm 대신 yarn 사용하기 프로젝트 npm 과 yarn 사용 확인법 yarn.lock 또는 package-lock.json 파일 확인yarn.lock 파일이 있으면: 해당 프로젝트는 yarn을 사용package-lock.json 파일이 있으면: 해당 프로젝트는 npm을 사용npm은 패키지를 설치할 때 package-lock.json 파일을 만들어서 의존성 트리를 잠그고, 동일한 버전의 패키지가 재설치되도록 보장합니다.반면, **yarn**을 사용하면 yarn.lock 파일이 생성됩니다. yarn 으로 프로젝트 시작하기yarn 설치npm install -g yarnyarn 버전확인 yarn --version의존성 패키지 설치yarn install프로젝트 실행yarn start [React] React Query 시작하기 React Query 공식 사이트) TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Instead of writing reducers, caching logic, timers, retry logic, complex async/await scripting (I could keep going...), you literally write a tiny fraction of the code you normally would. You will be surprised at how little code you're writing or how much tanstack.com 아래 블로그에 대한 내용을 아래에 정리) 📲 React-query 사용하는 .. 이전 1 2 3 4 ··· 15 다음
