반응형

reactjs 37

React에서 구성 요소 간에 기능을 공유하는 올바른 방법

React에서 구성 요소 간에 기능을 공유하는 올바른 방법 같은 작업을 수행해야 하는 컴포넌트가 여러 개 있습니다(자체 컴포넌트 위에 매핑하여 각각에 대해 작업을 수행하는 단순한 기능).현재 각 컴포넌트에서 이 방법을 정의하고 있습니다.하지만 딱 한 번만 정의하고 싶어요. 최상위 컴포넌트에서 정의하고 소품으로 전달할 수 있습니다.하지만 그건 좀 아닌 것 같아.소품이라기보다 도서관 기능인 것 같다. 올바른 방법은 무엇입니까?최신 Javascript ES6 구문을 사용한 Utils.js Utils.js 이런 const someCommonValues = ['common', 'values']; export const doSomethingWithInput = (theInput) => { //Do something..

programing 2023.02.27

입력 유형 = 파일에서 선택한 이미지를 반응으로 표시하는 방법JS

입력 유형 = 파일에서 선택한 이미지를 반응으로 표시하는 방법JS 컴퓨터에서 선택한 이미지를 웹 앱에 표시하려고 합니다.나는 내가 고치려는 질문에 대해 다음과 같은 질문을 언급했다. 서버에 데이터를 보내지 않고 선택한 이미지를 표시하는 방법 저는 html 파트가 이렇게 있어요. Add group image 선택한 이미지를 다음 위치에 표시합니다. 어떻게 해야 하죠? 참조했습니다.FileReader문서도 참조해 주세요. https://developer.mozilla.org/en-US/docs/Web/API/FileReader이거 드셔보세요 클래스에 메서드 추가 onImageChange = (event) => { if (event.target.files && event.target.files[0]) { le..

programing 2023.02.27

git 정보를 create-react-app에 추가합니다.

git 정보를 create-react-app에 추가합니다. 개발 시에는 웹에서 빌드 정보(git commit hash, author, last commit message 등)를 볼 수 있도록 하고 싶습니다.시도했습니다. child_process를 사용하여 git 명령줄을 실행하고 결과를 읽습니다(브라우저 환경이므로 작동하지 않습니다). txt 중에 파일을 합니다.npm build(environment도 할 수 없기 에). "syslog-rev"와 같은 외부 라이브러리를 사용한다. 해야 할 인 것 .npm run ejecthttps://www.npmjs.com/package/git-revision-webpack-plugin을 적용하지만 create-module-app에서 꺼내고 싶지 않습니다.생각나는 사람..

programing 2023.02.27

리액트 JS에서 이미지를 업로드하는 방법

리액트 JS에서 이미지를 업로드하는 방법 Image * 이것은 리액트 js에서 디바이스에서 파일을 선택하기 위해 사용한 스니펫입니다.이것을 사용하면 파일을 선택할 수 있고, 그 파일명도 표시됩니다.지금 제가 원하는 것은 이 파일을 S3 또는 다른 곳에 저장하고 거기서 URL을 가져와 fetch api 호출을 사용하여 서버에 게시하는 것입니다.리액트 후크 이미지 업로드 및 표시 import React, { useState } from "react"; const UploadAndDisplayImage = () => { const [selectedImage, setSelectedImage] = useState(null); return ( Upload and Display Image usign React Hoo..

programing 2023.02.22

html을 반응과 함께 포함하기 위해 jsx의 3진 연산자

html을 반응과 함께 포함하기 위해 jsx의 3진 연산자 리액트를 사용하고 있는데 이 에러 메시지를 표시하려고 합니다.this.state.message === 'failed'그런데 왜 3진법이 안 되는지 모르겠어요.내가 여기서 뭘 잘못하고 있는 거지? render() { ... return (this.state.message === 'failed') ? ( =>{" "} { Something went wrong } )() : false; } } 지금 당장은 그냥 표시만 하고 있어요.return (this.state.message === 'failed') ? ( =>html로저는 현재 반응으로 삼항식을 다음과 같이 포맷하는 것을 좋아합니다. render () { return ( { //Check if m..

programing 2023.02.22

create-module-app, 설치 오류("명령어를 찾을 수 없음")

create-module-app, 설치 오류("명령어를 찾을 수 없음") facebook의 설명 페이지(https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html)의 지시에 따라서, create-module-app을 인스톨 하고 있습니다. 먼저 글로벌 패키지를 설치합니다. npm install -g create-react-app 나는 이 일을 했다.정상적으로 동작하고 있는 것 같습니다.파일은 에 인스톨 되어 있습니다. users/*name*/.node_modules_global/lib/node_modules/create-react-app 글로벌 인스톨이 이 패스를 도입하는 이유는 불명확합니다만, 이것으로 알..

programing 2023.02.22
반응형