본문 바로가기
반응형

ReactJS/ReactJS3

[ReactJS] dangerouslySetInnerHTML가 뭘까? Next.js 환경에서 개발을 시작한 지 꽤 지났지만 최근까지도 나는 dangerouslySetInnerHTML 이게 innerHTML을 XSS로부터 보호해 주는 내장된 innerHTML이라고 생각했었다. 충격적이게도 innerHTML이랑 전혀 다를 게 없었다. 공식문서 내용을 가져와보자. function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따.. 2024. 2. 15.
[ReactJS] snippet을 사용한 템플릿 자동 완성 기능 사용하기 ReactJS 코드 템플릿을 자동 완성하는 방법에 대해 알아보자. 1. 우선 당연히 확장 프로그램부터 설치를 진행해야 한다. Reactjs code snippets Reactjs code snippets - Visual Studio Marketplace Extension for Visual Studio Code - Code snippets for Reactjs development in ES6 syntax marketplace.visualstudio.com Reactjs code snippets라는 확장 프로그램을 설치해주자. (vscode에서 설치해주면 된다.) 2. 설치가 완료되었다면 파일에서 특정 코드를 입력해주면 된다. 지원하는 파일 확장자는 .js / .ts / .jsx / .tsx 이다. 아래.. 2022. 7. 26.
[ReactJS] React 시작하기 - 프로젝트 생성 및 실행 (ft. npm, yarn) React 역시 Vue와 마찬가지로 프로젝트를 생성하기 위해서는 node.js가 필요하다. (없다면 얼른 node.js를 설치해주고 오자) 1. 프로젝트 생성 npm의 패키지 실행 도구인 npx를 사용해서 React 프로젝트를 생성할 수 있다. 본인이 설치를 원하는 경로에 들어가서 아래 명령어를 입력해주자. (여기서 만약 yarn을 사용하고 싶다면 따로 설치를 진행해주고 npm과 yarn의 생성 구문이 다르다.) # create react-app use npm npx create-react-app my-app # create react-app use yarn yarn create react-app my-app 여기서 "my-app"이라고 입력한 부분은 프로젝트명으로 본인이 원하는 이름을 정해주면 된다. .. 2022. 7. 1.
반응형
TOP