reactjs 16

material-ui 드로어 - findDOMName은 Strict Mode에서 사용되지 않습니다.

material-ui 드로어 - findDOMName은 Strict Mode에서 사용되지 않습니다. Strict Mode를 사용한 후크(클래스 없음) 기반의 심플한 React JS 앱이 있습니다. React 버전 16.13.1과 Material-UI 버전 4.9.10을 사용하고 있습니다. 앱바에서 Drawer를 사용하고 있습니다. Online Information 드로어를 열면 다음과 같은 경고가 표시됩니다. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the eleme..

programing 2023.04.04

es6 - 에일리어스 없이 명명된 모든 모듈을 Import합니다.

es6 - 에일리어스 없이 명명된 모든 모듈을 Import합니다. 아래와 같이 에일리어스를 가진 모든 명명된 모듈을 Import할 수 있는 것으로 알고 있습니다. import * as name from "module-name"; 참고 자료: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import 사실 모듈을 A.js.로 재수출했는데 B.js. PFB에서도 동일한 모듈을 상속받았습니다.2단계 상속이므로 명명된 모듈을 Import하는 것은 큰 문제가 되지 않습니다.단, 이것을 5레벨의 상속(A -> B -> C -> D -> E)으로 할 때는 모든 파일 내의 모든 이름 있는 모듈을 Import하고 (재)내보내기를 ..

programing 2023.04.04

동화책 꼬리바람.스토리북에 순풍을 추가하는 방법

동화책 꼬리바람.스토리북에 순풍을 추가하는 방법 나는 동화책에 순풍을 더하고 싶다.스토리가 웹에서 렌더링되는 것과 동일하게 렌더링됩니다. 나는 사용했다create-react-app project-name --template typescript프로젝트를 만듭니다. 그런 다음 순풍을 설치하기 위해 순풍 설명서의 이 https://tailwindcss.com/docs/guides/create-react-app 지침을 따랐습니다. 일단 끝내면 코드를 실행했다.npm sb init그래서 그 책도 출판됐지 이제 스토리북에 테일윈드를 사용해서 스타일링을 할 수 있도록 이야기를 해야겠다.하지만 어떻게 된 건지 모르겠어. 내가 본 다른 모든 답변은 편집하라고 말한다.postcss.config.js파일을 표시합니다. 그러..

programing 2023.03.25

리액트-라우터 1개만 자녀

리액트-라우터 1개만 자녀 다음 오류가 계속 발생합니다. '라우터'에는 하위 요소가 하나만 있을 수 있습니다. 리액트 리액트 리액트 리액트 리액트 리액션 사용 시 이 코드가 예시와 똑같이 동작하지 않는 이유를 알 수 없는 것 같습니다.퀵 스타트 코드는 다음과 같습니다. import React from 'react'; import Editorstore from './Editorstore'; import App from './components/editor/App'; import BaseLayer from './components/baselayer'; import {BrowserRouter as Router, Route} from 'react-router-dom'; import {render} from 'r..

programing 2023.03.25

create-react-app을 사용하는 React 앱에서 ES6 기능을 폴리필하는 가장 좋은 방법

create-react-app을 사용하는 React 앱에서 ES6 기능을 폴리필하는 가장 좋은 방법 Internet Explorer에서 React.js 응용 프로그램을 테스트했는데 다음과 같은 ES6/7 코드가 발견되었습니다.Array.prototype.includes()깨트려버려요. 저는 create-react-app을 사용하고 있는데, 모든 사람이 폴리필을 필요로 하는 것은 아니기 때문에 폴리필을 많이 포함하지 않기로 선택했다고 합니다.폴리필은 빌드 시간을 느리게 합니다(예: 여기와 여기를 참조).이 문서(작성 시)는 다음 사항을 제시합니다. 런타임 지원이 필요한 다른 ES6+ 기능(Array.from()이나 Symbol 등)을 사용하는 경우 적절한 폴리필을 수동으로 포함하거나 타겟 브라우저가 이미 ..

programing 2023.03.20

Next.js에서의 인증 구현 방법

Next.js에서의 인증 구현 방법 Next.js는 처음이라 jwt 토큰을 사용한 인증시스템에 어려움을 겪고 있습니다.인증시스템에서 jwt 토큰과 루팅을 저장하는 가장 좋은/표준적인 방법을 알고 싶습니다.튜토리얼/기사마다 다른 접근 방식을 시도했지만 잘 이해하지 못했습니다.이게 내가 시도한 것이다. 사용자가 로그인하면 사용자 이름/비밀번호가 분리된 API 서버(예를 들어 백엔드 작업을 처리하는 새 프로젝트)로 전송됩니다.서버는access-tokenNext.js next next next next next 。Next는 Next.js로 .withAuth임시: hoc키키내내 hoc hoc hoc hoc hoc hoc hoc hoc hoc hoc hoc hoc hoc.이 접근법의 문제는 쿠키에 httpOnly ..

programing 2023.03.20

컴포넌트 상태를 직접 변경할 수 없는 이유는 무엇입니까?

컴포넌트 상태를 직접 변경할 수 없는 이유는 무엇입니까? 리액트 튜토리얼과 문서는 상태를 직접 변환해서는 안 되며 모든 것을 거쳐야 한다고 경고하는 것을 알고 있습니다.setState. 알고 .this.setState({}), 「」를 하기 .render. 예: 다음 코드는 정상적으로 동작하는 것 같습니다. const React = require('react'); const App = React.createClass({ getInitialState: function() { return { some: { rather: { deeply: { embedded: { stuff: 1, }, }, }, }, }, }; updateCounter: function () { this.state.some.rather.dee..

programing 2023.03.20

React를 사용하여 입력값을 올바르게 검증하는 방법.JS?

React를 사용하여 입력값을 올바르게 검증하는 방법.JS? 저는 간단한 폼을 가지고 있어요.모든 구성 요소 및 상태는 페이지 구성 요소에 저장됩니다.2개의 표시 헤더와 3개의 입력 필드가 있습니다.첫 번째 입력은 텍스트이고 두 번째와 세 번째 입력은 ints입니다.사용자가 잘못된 데이터 유형을 입력하면 입력 필드 옆에 오류 메시지가 팝업되도록 합니다.React의 베스트 프랙티스와 관련된 질문입니다.JS 값이 유효하다고 누가 결정합니까?입력 필드의 작업은 값을 상태를 유지하는 컴포넌트로 되돌리는 것뿐이라고 생각합니다.그러면 Page만이 값이 유효한지 여부를 판단할 수 있는 것입니까? 그러면 팝업을 어떻게 표시해야 하나요?페이지가 Adaptive_에게 알려주는 perp를 통과하는 새로운 부울 상태 요소를 ..

programing 2023.03.15

반응 경고 최대 업데이트 깊이를 초과했습니다.

반응 경고 최대 업데이트 깊이를 초과했습니다. 이 질문은 제 문제에 가장 가까운 질문의 후속 질문입니다. 무한 루프 인 useEffect 저는 라이브러리를 공부하기 위해 작은 React.js 앱을 만들고 있습니다.경고 메시지가 떴습니다. 최대 업데이트 깊이를 초과했습니다.이 문제는 컴포넌트가 setState inside useEffect를 호출하지만 useEffect에 종속성 배열이 없거나 모든 렌더에서 종속성 중 하나가 변경되었을 때 발생할 수 있습니다. 기능적인 컴포넌트를 입수했습니다.이 컴포넌트에는 다음과 같은 코드가 있습니다. const propertiesMap2 = new Map([ //There is also propertiesMap1 which has the same structure ["T..

programing 2023.03.10

반응 항법 V2: 항법 간의 차이점푸시 및 네비게이션.이네이블화

반응 항법 V2: 항법 간의 차이점푸시 및 네비게이션.이네이블화 React Native는 처음이고 현재 React Native Navigation Docs를 공부하고 있습니다.궁금했어요.와의 차이는 무엇입니까?navigation.push()그리고.navigation.navigate()? 내가 직접 알아내려고 했지만, 그들은 똑같은 일을 해내는 것 같아...의 메뉴얼을 참조하면, 그 차이점에 대한 설명이 있습니다. Push 액션은 스택 상단에 루트를 추가하고 루트로 이동합니다.이는 컴포넌트가 이미 스택에 마운트되어 있는 경우 탐색이 스택의 이전 위치로 팝업된다는 점에서 다릅니다.푸시는 항상 위에 추가되므로 컴포넌트를 여러 번 장착할 수 있습니다. Instagram을 예로 들 수 있습니다. 사용자의 프로파일..

programing 2023.03.10