반응형

reactjs 25

Jest를 사용한 테스트용 공유 유틸리티 함수

Jest를 사용한 테스트용 공유 유틸리티 함수 다양한 Jest 테스트 중에 사용하는 utils 함수가 있습니다.예를 들어 다음과 같은 함수는 fetch 응답을 조롱하기 위한 것입니다. export const mockFetchJsonResponse = (data) => { ok: () => true, json: () => data }; 저는 그 기능을 Import하여 테스트 중에 재사용할 수 있도록 공유하고 싶습니다.예를 들어 다음과 같습니다. // Some .spec.jsx file // ... import {mockFetchJsonResponse} from 'some/path/to/shared/tests/utils.jsx' // Then I can use mockFetchJsonResponse insi..

source 2023.03.05

Create-react-app - 플러그인 "react"의 오류 ".eslintrc.json"과 "BaseConfig" 간에 충돌했습니다.

Create-react-app - 플러그인 "react"의 오류 ".eslintrc.json"과 "BaseConfig" 간에 충돌했습니다. CRA 5.0.0으로 업데이트한 후 컴파일 프로세스에서 다음 오류가 발생하였습니다. ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig » "..\react-app\node_modules\eslint-config-react-app\base.js". eslint 설정은 다음과 같습니다. { "env": { "browser": true, "es2021": true }, "extends": [ "plugin:react/recommended", "airbnb", "plugin:reac..

source 2023.03.05

오류 '디지털 봉투 루틴', 이유: '지원되지 않음', 코드: 'ERR_OSSL_EVP_'를 받는 중지원되지 않음'

오류 '디지털 봉투 루틴', 이유: '지원되지 않음', 코드: 'ERR_OSSL_EVP_'를 받는 중지원되지 않음' 이 질문에는 이미 답변이 있습니다. 오류 메시지 "error: 0308010C: digital envelope 루틴: unsupported" (50개의 답변) 닫힘12개월 전에요 Next.js를 배울 때 이 오류가 발생했습니다.npx create-next-apphttps://nextjs.org/docs/api-reference/create-next-app에 있는 사이트 설명서에 따라 명령을 수행합니다.서버를 시작할 때까지 모든 것이 작동하지만 오류 스택: $ npm run dev > devto-clone@0.1.0 dev > next dev ready - started server on 0..

source 2023.03.05

Next.js: 오류: 반응합니다.Children. 단일 React 요소 하위 항목만 수신해야 합니다.

Next.js: 오류: 반응합니다.Children. 단일 React 요소 하위 항목만 수신해야 합니다. 난 '이거'란 부품을 가지고 있어Nav안에서.components디렉토리와 그 코드는 다음과 같습니다. import Link from 'next/link'; const Nav = () => { return( Home About ) } export default Nav; 이 경우 다음 오류가 발생합니다. Error: React.Children.only expected to receive a single React element child. 하지만 만약 제가 이 버팀목을 제거한다면태그가 붙어 있다.페이지를 표시할 수 있지만 콘솔에 다음 경고가 표시됩니다. Warning: You're using a strin..

source 2023.02.28

setState 메서드를 호출하면 상태가 즉시 변환되지 않는 이유는 무엇입니까?

setState 메서드를 호출하면 상태가 즉시 변환되지 않는 이유는 무엇입니까? 좋아, 빨리 끝내도록 할게. 쉬운 해결책일 테니까... 비슷한 질문들을 많이 읽었는데, 답은 아주 분명한 것 같아요.애초에 내가 찾아봐야 할 건 아무것도 없었어!하지만... 어떻게 고쳐야 할지, 왜 이런 일이 일어나는지 알 수 없는 오류가 있습니다. 다음과 같습니다. class NightlifeTypes extends Component { constructor(props) { super(props); this.state = { barClubLounge: false, seeTheTown: true, eventsEntertainment: true, familyFriendlyOnly: false } this.handleOnChan..

source 2023.02.28

리액트 라우터의 hashHistory와 browserHistory의 차이점은 무엇입니까?

리액트 라우터의 hashHistory와 browserHistory의 차이점은 무엇입니까? 구글에서 꽤 검색했지만 다음 질문에 대한 명확한 답을 찾을 수 없었습니다.리액트 라우터의 hashHistory와 browserHistory의 차이점은 무엇입니까?기본적인 차이점은 hashHistory는 http://myurl.com/ #page/another_page/another_page 등의 URL을 사용한다는 것입니다. Browser History를 사용하면 일반 URL(해시 없음)을 얻을 수 있습니다.http://myurl.com/page/another_page/another_page첫 번째 차이점: 서로 다른 WEB API를 사용하고 있습니다. URL에서 해시를 사용하고 읽습니다.사용하다window.hist..

source 2023.02.28

ES7로 응답: Uncaughed TypeError: 정의되지 않은 속성 '상태'를 읽을 수 없습니다.

ES7로 응답: Uncaughed TypeError: 정의되지 않은 속성 '상태'를 읽을 수 없습니다. 이 질문에는 이미 답변이 있습니다. 이벤트 핸들러 내부의 React 인스턴스에 액세스할 수 없습니다. (답변 19개) 닫힘7년 전. AuthorForm 입력 상자에 항목을 입력할 때마다 Unaught TypeError: Undefined 속성 'state'를 읽을 수 없습니다.리액트와 ES7을 사용하고 있습니다. Manage의 setAuthorState 함수의 세 번째 줄에서 오류가 발생합니다.작성자 페이지console.log(this.state)를 넣어도 코드의 행에 관계없이 사용할 수 있습니다.authorState)에서는 console.log에서 정지하고 오류를 호출합니다. 인터넷을 통해 다른 사용..

source 2023.02.18

[ts] 종료되지 않은 정규 표현 리터럴.

[ts] 종료되지 않은 정규 표현 리터럴. 거의 빈 반응 컴포넌트에서 다음 오류가 발생합니다. [ts] 종료되지 않은 정규 표현 리터럴. import * as React from 'react'; export default class EmptyComponent extends React.Component { render() { return ( Hello ); } } 내가 뭘 잘못하고 있는지 모르겠어!알고 보니 .tsx가 아닌 .ts 파일 확장자를 사용하고 있었습니다. 컴포넌트 파일 확장자가 .tsx(Typescript를 사용하는 경우) 또는 .jsx(Javascript를 사용하는 경우)인지 확인합니다.그래서 제 경우는 좀 특이했어요.같은 에러 메세지가 표시되었습니다.빌드 프로세스를 재기동하고 나서 모든 것이..

source 2023.02.14

렌더링 전에 리액트 컴포넌트의 크기(높이/폭)를 확인하는 방법

렌더링 전에 리액트 컴포넌트의 크기(높이/폭)를 확인하는 방법 스스로 렌더링하기 전에 치수를 미리 알아야 하는 반응 컴포넌트가 있습니다. 는 jquery로 만들 수 .$('#container').width()컴포넌트를 만들 때 컨테이너의 폭을 미리 파악합니다. 이 용기의 치수는 페이지의 다른 용기와 함께 CSS에 정의됩니다.React에서 구성 요소의 높이, 폭 및 배치를 정의하는 사람은 누구입니까?나는 CSS가 그것을 하고 그것에 접근할 수 있는 것에 익숙하다.그러나 React에서는 컴포넌트가 렌더링된 후에만 해당 정보에 액세스할 수 있는 것 같습니다.다음 예제에서는 react hook useEffect를 사용합니다. 여기서의 작업 예 import React, { useRef, useLayoutEffec..

source 2023.02.14

웹 팩 로더와 플러그인의 차이점

웹 팩 로더와 플러그인의 차이점 웹 팩의 로더와 플러그인의 차이점은 무엇입니까? 플러그인 매뉴얼에는 다음과 같이 기재되어 있습니다. 플러그인을 사용하여 일반적으로 웹 팩 번들에 관련된 기능을 추가합니다. babel이 jsx/es2015 변환에 로더를 사용하는 것은 알고 있지만, 다른 일반적인 태스크(예를 들어 copy-webpack-plugin)는 플러그인을 사용하는 것 같습니다.보완적이고 간단한 답변 추가. 로더: 로더는 번들이 생성되는 동안 또는 생성되기 전에 개별 파일 수준에서 작동합니다. 플러그인: 플러그인은 번들 또는 청크 수준에서 작동하며 일반적으로 번들 생성 프로세스의 마지막에 작동합니다.플러그인은 번들 자체가 생성되는 방법도 수정할 수 있습니다.플러그인은 로더보다 강력한 제어 기능을 가지고..

source 2023.02.14
반응형