yellowcard

오류 수정 방법: ./node_modules/@react-leaflet/core/esm/path.js 10:41 모듈 해석 실패:예기치 않은 토큰(10:41) 리액트 타입의 스크립트 앱을 리플릿과 함께 만들려고 합니다.명령어를 사용했는데 npm install leaflet react-leaflet @types/react @types/leaflet --save종속성을 설치합니다. 근데 어플을 켜면 이렇게 돼 있어요. ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41) File was processed with these loaders: * ./node_modules/babel-loa..

실전 가동과 개발의 검출 런타임에 대응 현재 React 버전이 개발 버전인지 운영 버전인지 런타임에 감지할 수 있습니까?저는 다음과 같은 것을 하고 싶습니다. if (React.isDevelopment) { // Development thing } else { // Real thing } 이 작업은 빌드 도구(webpack, browserify)를 사용하여 노드 방식으로 작업을 수행하는 데 가장 적합합니다.process.env.NODE_ENV통상, prod에서는 「production」, dev에서는 「development」(또는 정의되지 않음)로 설정합니다. 따라서 코드는 다음과 같습니다. if (!process.env.NODE_ENV || process.env.NODE_ENV === 'developme..

Laravel과 함께 리액트라우터를 사용하는 방법 사용할 필요가 있다React Router와 함께Laravel프로젝트. 단, 라우터를 작성하면React Router접속을 시도합니다.Laravelprisure Route not exist 오류입니다. 사용방법React Router라라벨 프로젝트 루트를 관리하라고? render(( // this route I trying access ), document.getElementById('root')); 다음과 같이 모든 것을 하나의 컨트롤러에 매핑하는 루트를 작성합니다. Route::get('/{path?}', [ 'uses' => 'ReactController@show', 'as' => 'react', 'where' => ['path' => '.*'] ]); ..

파이어베이스의 컬렉션에 여러 문서를 추가하려면 어떻게 해야 합니까? React 네이티브 및 react-native-firebase를 사용하고 있습니다. 목표는 한 컬렉션에 여러 개의 문서(개체)를 추가하는 것입니다.현재, 다음과 같은 것이 있습니다. const array = [ { name: 'a' },{ name: 'b' } ] array.forEach((doc) => { firebase.firestore().collection('col').add(doc); } 그러면 수집에 대해 수행된 각 업데이트에 대해 다른 장치에서 업데이트가 트리거됩니다.어떻게 하면 이 문서들을 일괄적으로 업데이트 할 수 있을까요?다음과 같은 배치 쓰기를 생성할 수 있습니다. var db = firebase.firestore()..

Nextjs: 정적 폴더에서 이미지를 로드할 수 없습니다. Next.js 컴포넌트에 이미지를 로드하려면 어떻게 해야 합니까?프로젝트를 먼저 만들어야 하나요?그렇다면 먼저 빌드하지 않고 이미지를 로드할 수 있는 방법이 있습니까?아무리 노력해도 효과가 없어.다음 문서를 참조해 주세요. next.js는 루트 디렉토리의 public이라는 폴더 아래에 이미지 등의 정적 파일을 제공할 수 있습니다.그 후, 퍼블릭 내부의 파일은, 베이스 URL(/)로부터 시작하는 코드로 참조할 수 있습니다. 먼저 를 붙입니다.public/my-image.png을 사용하다 는 이 next.js를 찾을 필요가 그러면 이 디렉토리에서 워치를 사용할 필요가 없습니다.start서버에 접속할 수 있습니다.정적 디렉터리는 더 이상 사용되지 않습..

React Hooks useState+useEffect+이벤트가 오래된 상태를 나타냄 리액트와 함께 이벤트 이미터를 사용하려고 합니다.useEffect그리고.useState단, 항상 갱신된 상태가 아닌 초기 상태가 됩니다.이벤트 핸들러를 직접 호출하면 동작합니다.setTimeout. 이 값을 에 전달하면useEffect()두 번째 인수는 동작합니다만, 이 인수는 값이 변경될 때마다(키 스트로크에 의해 트리거됨) 이벤트 이미터에의 재서브스크립션이 발생합니다. 내가 뭘 잘못하고 있지?해봤어요useState,useRef,useReducer,그리고.useCallback일을 할 수 없었다. 다음은 복제품입니다. import React, { useState, useEffect } from "react"; impor..

반응의 PropTypes.node와 PropTypes.any의 차이점은 무엇입니까? // Anything that can be rendered: numbers, strings, elements or an array // (or fragment) containing these types. optionalNode: PropTypes.node, // A value of any data type requiredAny: PropTypes.any.isRequired, 어떤 타입이 가능합니까?PropTypes.any와 비교하여 포함되다PropTypes.node?PropType은 델의 소품을 통해 전달되는 가치를 검증하는 방법입니다. 노드 React를 사용하여 숫자, 문자열, DOM 요소, 배열 또는 이를 포함하는 조..

React의 인라인 CSS 스타일: 미디어 쿼리를 구현하는 방법 React의 인라인 CSS 패턴(동영상)이 마음에 들어서 사용을 생각하고 있습니다.하지만 이것과 비슷한 질문이 있습니다. React의 인라인 CSS 패턴을 사용하여 응용 프로그램에 대한 미디어 쿼리를 구현하는 방법은 무엇입니까?그럴수는 없어요.다음과 같은 특정 CSS 기능이 있습니다.@media쿼리. 스타일시트의 선언 블록에 정의해야 합니다. 인라인 CSS는 키와 값의 쌍으로 적용할 수 있는 대부분의 스타일링 속성에 적합하지만 전용 스타일시트를 완전히 대체하는 것은 아닙니다. 편집: 특정 브라우저(Chrome 9+, IE 10+, Firefox 6+)에서 MediaQueryList와 같이 문서에 대한 미디어 쿼리가 변경될 때 이벤트 수신기를..

다음 js - 일부 페이지에서 서버 측 렌더링을 비활성화합니다. 일부 페이지에서 Next js를 사용하여 sr를 비활성화할 수 있습니까?예를 들어 SEO에 sr를 사용하는 제품 설명이 있는 페이지가 있지만 필터링할 수 있는 항목 또는 제품 목록이 있는 페이지도 있습니다. 이 페이지에 대해서는 이 페이지가 매번 동적으로 생성되므로 sr를 사용하지 않도록 설정하려면 이 페이지에서 어떻게 해야 합니까?컴포넌트를 천천히 로드하고 SSR를 비활성화합니다.https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr import dynamic from 'next/dynamic' const DynamicComponentWithNoSSR = dynamic((..

React.js의 텍스트 입력에서 변경/초점 아웃 이벤트를 올바르게 포착하는 방법 텍스트 입력에 대한 변경 이벤트를 처리하려는 폼이 있지만 키 다운에 대한 React onChange 트리거링(입력 필드가 포커스를 벗어날 때 변경 이벤트를 트리거하는 네이티브 JS와 반대)이 있습니다. 원하는 것을 할 수 있는 리액트 방법이 있나요?입력의 포커스가 흐트러질 때만 유효성을 트리거하려면 Blur에서 사용할 수 있습니다. React는 onFocusIn 및 onFocusOut 대신 onFocus 및 onBlur를 사용합니다.모든 React 이벤트는 버블로 정규화되므로 react에서 onFocusIn 및 onFocusOut은 필요하지 않거나 지원되지 않습니다.2개 JavaScript = > 대응 onfocusout ..