main/React 썸네일형 리스트형 React innerHTML, DOM에 HTML텍스트 삽입하기. Apply dangerouslySetInnerHTML 웹에서 에디터를 개발하거나 게시판 등에서 글을 보여줄 때는 HTML 태그로 감싸진 string들이 필요하게 된다. 이 string 데이터를 서버와 통신해야 하는데 만약 여기에 알수없는 태그가 포함되어 있다면 (XSS 공격 같은) 어떤 일이 일어날 지 알 수 없기 때문에 😱 React에서는 innerHTML을 대신하여 dangerouslySetInnerHTML를 사용하게 된다. 공식 문서에도 이 내용이 잘 나와 있고 코드를 그대로 사용해 보았다. const createMarkup = (content: string) => { return {__html: content}; } const MyComponent = () => { const content = "TEST"; return ; } 그런데 서버에서 내려오.. 더보기 [React] Re-Rendering과 Memoization 프론트엔드 성능 개선을 위해 리액트 컴포넌트의 리렌더링 제어하기 Re-Rendering이 발생하는 세 가지 조건 1. State가 업데이트된 컴포넌트 2. Props가 변경된 컴포넌트 3. Re-Rendering 된 컴포넌트 아래의 모든 컴포넌트 이 중 3번의 경우, 리렌더링 된 어떤 컴포넌트 아래의 자식 컴포넌트들은 불필요한 렌더링이 일어난다. 메모이제이션을 통해 이전 처리 결과를 저장해둠으로써 처리 속도를 높일 수 있다. React.memo const Component = memo(() => {}); 이렇게 컴포넌트를 괄호로 감싸면 해당 컴포넌트는 Props에 변경이 있을 때만 리렌더링 된다. 하지만 Props에 함수를 전달할 때는 memo를 사용해도 컴포넌트가 리렌더링된다. React.useCall.. 더보기 The error while TOAST UI Editor ColorSyntax applying An unhandled runtime error occurred TypeError: Cannot read properties of undefined (reading 'listen') This issue with dependency tree of installed TOAST UI Editor. Before that, see the React code // TOAST UI Editor import "@toast-ui/editor/dist/toastui-editor.css"; import { Editor } from "@toast-ui/react-editor"; import "tui-color-picker/dist/tui-color-picker.css"; import "@toast-ui/editor-plugi.. 더보기 [React] Context API, 전역 상태 관리하기, 두 개 이상의 Context 사용하기 유저의 정보나 헤더 등 전체 페이지에서 상탯값을 사용해야하는 요소들을 관리하기 위해 ContextAPI를 사용해보았다. 먼저 폴더구조는 다음과 같다. 1. createContext 먼저 context를 만든다. Header.context.js에 헤더의 context를 만듦 import { createContext } from "react"; // 관리할 state 정의 const HeaderContext = createContext({ view: false }); export default HeaderContext; 2. Provider state를 모아두는 provider를 만든다. state와 setState 동작을 정의한다. createContext를 받아와서 Provider로 return한다. p.. 더보기 [Webpack] robots.txt 추가 검색엔진에게 보여줄 robots.txt를 만들어 주자. 일단 나는 프론트에서, 백에서 둘 다 적용해 봤는데.. 네이버 서치어드바이저에서 인식하는데 시간이 좀 걸리는 바람에 어떤 방법이 먹힌지는 잘 모르겠다.; 1. React 프로젝트 Root에 robots.txt 파일 추가 프로젝트의 루트에 robots.txt를 생성한 후 내용을 입력하여 저장한다. User-agent: * Allow: / 나는 일단 모두 허용할 것이기 때문에 위와 같이 작성해 주었다. 어떤 검색엔진이 와도 허용할 것이라는 의미 2. robotstxt-webpack-plugin 설치 robotstxt-webpack-plugin A webpack plugin to output a robots.txt file www.npmjs.com npm.. 더보기 [React] Webpack 환경 설정에서 (.env) 환경 변수 사용하기 예전에 CRA로 만들어 개발했던 프로젝트에서는 환경변수를 따로 설정해주지 않아도 .env 파일을 만들어서 REACT_APP_* 변수를 사용하면 사용할 수 있었던 것 같다! 하지만 Webpack에서는 내가 환경변수를 사용하겠다는 것을 webpack.config.js에 알려줘야 한다. npm install dotenv 먼저 .env 설정을 위해 dotenv 라이브러리를 설치해준다. `.env` SERVER_URL="http://127.0.0.1:3000" 루트 폴더 내에 .env 파일을 만들고, 사용할 변수를 입력해준다. `webpack.config.js` const webpack = require('webpack'); const dotenv = require('dotenv'); dotenv.config().. 더보기 [TypeScript] REST API로 받아온 데이터 일부만 Props로 넘겨주기 API로 받아온 데이터가 뭉탱이라 컴포넌트별로 분리해서 Props를 보내주고 싶었다. 근데 타입스크립트 문법을 아직 잘 몰라서 계속 에러 발생..,, Type 'PlayInfo | undefined' is not assignable to type 'PlayInfo'. Type 'undefined' is not assignable to type 'PlayInfo'.ts(2322) PlayList.tsx(22, 3): The expected type comes from property 'info' which is declared here on type 'IntrinsicAttributes & IProps' Type '{ props: PlayInfo | undefined; }' is not assignable.. 더보기 [bug] event not working in React, Webpack Webpack으로 설정을 바꾸고, webpack dev에서 돌려보는데 잘 되던 코드의 클릭 이벤트가 동작이 되지 않았다. 다른 이벤트들도 마찬가지로. 에러가 아니어서 에러 코드도 없고, 아무리 찾아도 유사 사례가 없어서 한참을 삽질함.. React - onClick not working in any components I'm pretty new to React and I'm having some issues with my project. I feel like I'm going insane, the simplest things are not working as I'd expect them to. Having re-read my code what feels like stackoverflow.com 그러던 중.. 더보기 이전 1 2 3 다음
