본문 바로가기
728x90

웹에디터4

80. 크로스 사이트 스크립트(XSS) 이해 form onSubmit={}을 적고 연결시킨다 여기서 form태그는 react form이 아니다 html에 있는 form태그이다 전달해준다 라는 뜻 button에 type은 button reset submit이 있다 디폴트값이 위에 form에 있듯이 submit이기 때문에 지워야된다 안지우면 onClick이 2번 실행된다 한번 클릭했는데 2번 실행된다면 이것을 확인해야한다 이 버튼의 기능을 다르게 하려면 type을 button으로 바꾼다 웹에디터로 등록한 게시글 보여주기 09-01 복사해서 27-04-web-editor-detail 만들기 등록하기 클릭하면? 태그가 그대로 보인다 태그를 적용시키려면? html에 직접 삽입하는 방법 html안에 그대로 삽입하겠다~ 라는 뜻 dangerouslySetInn.. 2023. 4. 4.
79. 웹에디터의 이해 및 실습 요즘은 --save 안해도 됨 여기서 onChange는 ReactQuill에서 만든거라서 event가 들어가지 않는다 import 'react-quill/dist/quill.snow.css'; 브라우저의 document를 찾을 수 없다~ 잘 적은거 같은데 에러가 나타난다 라이브러리별 발생하는 SSR 이슈와 보완방법 - dynamic import Webpack Server 브라우저에서만 보여줘~ 를 해도 안된다 다르게 접근을 해줘야 한다 dynamic import - Next에서 제공 import dynamic from "next/dynamic"; ssr: false => 서버에서 렌더링 하는건 안할거다~ 성능 최적화 Modal을 여기서만 사용한다면 코드 스플릿팅 code-splitting 웹에디터에 re.. 2023. 3. 9.
Callback, Promise, Async Await, 프로미스체이밍, 비동기 콜백 8/16 프로그래머스 예산 반복문 안에서 budget 0이냐 아니냐를 했다 더 쉽게 하면? for문 async await = 최신 그럼 그 전은? Callback, Promise, Async/Await callback = qqq를 함수로 받을것 엔터하면? 1번째로 찍히고 2번째로 찍힌다 이런 함수를 callback함수라고 한다 (나중에 요청해도 실행되는 함수) 화살표 함수로 바꾸면? 실행결과 똑같다 이것도 콜백함수 똑같다 이것도 위아래 같은 것 Callback함수를 만드는 이유 = 원하는 위치에서 실행하기 위해 만드는 것 비동기 콜백 백엔드에 요청을 해놓고 요청이 끝나면 이 함수를 실행해줘! 자바스크립트에서 제공하는 기능 오래전에 많이 쓰던 것 axios get이랑 같다 요청 끝나면 실행해줘~ Callb.. 2021. 10. 23.
웹에디터, 다이나믹 임포트, 웹 공격, react-quill 8/10 작성한 내용의 앞 뒤로 등의 태그를 붙여서 데이터베이스에 저장했을 뿐이었다. 이 내용들이 문자열이 아닌, 태그의 기능 그 자체로 인식하게 만들기 위해 dangerouslySetInnerHTML 이라는 속성을 사용해서 해결했다. 여기서 한가지 호기심이 생길 수 있다. 태그처럼 자바스크립트로 해킹 기능을 작성하면...? 이 때, 누군가 글 상세보기를 클릭하면, 작성된 자바스크립트 코드가 실행될 것이고, 해킹(예, 토큰 탈취, 탈취된 토큰으로 유해 게시물 생성 및 중요 게시물 삭제 등)을 당할 수 있다. react-quill 라이브러리에서는 이를 사전에 차단해 준다. (태그를 의미하는 단어인 '' 등을 &lt, &gt와 같이 변경하여 차단) 하지만, react-quill만 믿고 방심 했다가는, 다른 .. 2021. 10. 23.
728x90

티스토리툴바