반응형

ReactJS 35

왜 JSX 소품은 화살표 기능이나 바인드를 사용하면 안 되는가?

왜 JSX 소품은 화살표 기능이나 바인드를 사용하면 안 되는가? 리액트 앱에서 보풀이 발생하고 있는데 다음 오류가 나타납니다. error JSX props should not use arrow functions react/jsx-no-bind 기능)을 실행하고 onClick {this.state.photos.map(tile => ( this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> } > this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/> ))} 이..

programing 2023.03.27

종속성 트리 Reactjs를 확인할 수 없습니다.

종속성 트리 Reactjs를 확인할 수 없습니다. 현재 프로젝트에 리액트 틴더 카드를 설치하려고 합니다.react-tinder-card를 설치하려고 하는데 명령어를 사용한 후 npm install --save react-tinder-card 콘솔에 표시되는 것은 다음과 같습니다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: tinder-clone@0.1.0 npm ERR! Found: react@17.0.1 npm ERR! node_modules/react npm ERR! react@"^17.0.1" from the root project npm ERR!..

programing 2023.03.22

typed - 'type' 또는 'interface'로서의 소품

typed - 'type' 또는 'interface'로서의 소품 리액트 코드가 있다 export default class MyComponent extends Component 문제는 제가 소품 같은 걸 쓸까요?type또는interface? type Props = { isActive: Boolean, onClick: Function } 또는 interface Props { isActive: Boolean, onClick: Function } 또, 타이프 스크립트가 아니고, 클래식한 Web pack+babel 셋업을 사용하고 있는 경우는, 어떤 차이가 있습니까? 아니면, 그게 미에게 중요한가?지금은 2020년이고 나는 지금 이 순간에도type거의 모든 경우에React소품(일반형 vs 인터페이스 포스트는 이쪽..

programing 2023.03.17

React에서 하위 구성 요소 동적 추가

React에서 하위 구성 요소 동적 추가 목표는 페이지/부모 컴포넌트에 동적으로 컴포넌트를 추가하는 것입니다. 처음에는 다음과 같은 기본적인 샘플템플릿을 사용했습니다. main.filename: var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(, document.body); ReactDOM.render(, document.getElementById('myId')); App.js: var App = React.createClass({ render: function() { return ( App main component! myId div ); } }); Sample Comp..

programing 2023.03.17

React Native 앱을 브라우저에서 테스트할 수 있습니까?

React Native 앱을 브라우저에서 테스트할 수 있습니까? React Native 앱이 시뮬레이터를 사용하여 개발/테스트되도록 설계되어 있다는 것을 알게 되면 웹 브라우저를 사용하여 애플리케이션을 테스트할 수도 있습니까? https://rnplay.org/ 등의 서비스는 존재하지만, 우려되는 점은 https://appetize.io/을 기반으로 하고 있기 때문에 월수에 따라 제한될 수 있다는 것입니다.유료화면 스트리밍 서비스와 달리 무료/오픈소스 기술을 활용하고 싶습니다. 이와 같이 브라우저에서 앱을 테스트하기 위해 앱은 리액트 네이티브와 단순 리액트 모두에서 실행할 수 있는 하나 이상의 라이브러리를 사용해야 합니까?특히 리액트 네이티브를 코드화하고 싶기 때문에 이 접근법에 대한 대안을 찾고 싶습니..

programing 2023.03.12

'유형 오류 [ERR_]Invalid_ARG_TYPE]:"path" 인수는 문자열 형식이어야 합니다.수신된 유형이 정의되지 않았습니다.'

'유형 오류 [ERR_]Invalid_ARG_TYPE]:"path" 인수는 문자열 형식이어야 합니다.수신된 유형이 정의되지 않았습니다.' 리액트에서 프로젝트를 진행 중인데 난처한 문제에 부딪혔어요. yarn start하다 유형 오류 [ERR_]Invalid_ARG_TYPE]:"path" 인수는 문자열 형식이어야 합니다.수신 유형이 정의되지 않았습니다. 왜 이런 일이 일어나는지 모르겠어요.이 문제를 해결하려면 react-scripts 패키지를 업그레이드하기만 하면 됩니다(최신 버전 확인).npm info react-scripts version 패키지로 대체합니다.json "react-scripts": "^3.x.x""react-scripts": "^3.4.1" 사용 버전 ('최신 버전') (일부 옵션) n..

programing 2023.03.12

Yarn은 사용 가능한 모든 스크립트를 나열할 수 있습니까?

Yarn은 사용 가능한 모든 스크립트를 나열할 수 있습니까? 내 패키지에 대본이 몇 개 있어요.json { "name": "my-package", "scripts": { "build": "babel src -d lib", "test": "jest" } } terminal 명령에서 사용 가능한 모든 스크립트를 나열할 수 있는 방법이 있습니까?yarn?https://github.com/yarnpkg/yarn/issues/2965 사용하다yarn runnpm과 마찬가지로npm run 또 다른 해결책은 jq를 사용하는 것입니다. jq .scripts package.json 출력 예: { "dev": "webpack-dev-server --mode development", "build": "webpack --mo..

programing 2023.03.12

뷰포트 크기에 따라 조건부로 렌더링합니다.

뷰포트 크기에 따라 조건부로 렌더링합니다. 이것은 리액트 몬스터에게는 쉬운 것입니다.:) 조건은 기재되어 있습니다만, 컨스트럭터의 뷰포트 사이즈를 어떻게 처리하면 좋을지 알 수 없습니다.단순하고 간단하게 뷰포트 사이즈가 1451px 이상일 때, 1450px 이하일 때 다른 요소를 보여주고 싶습니다. 이것은 내 코드입니다(간체). class My Class extends React.Component { constructor(props) { super(props); this.state = { isDesktop: "1450px" //This is where I am having problems }; } render() { const isDesktop = this.state.isDesktop; return ( ..

programing 2023.03.12

참조가 DOM 요소를 가리킬 때 useEffect의 종속성으로 ref.current를 사용하는 것이 안전합니까?

참조가 DOM 요소를 가리킬 때 useEffect의 종속성으로 ref.current를 사용하는 것이 안전합니까? ref는 가변 컨테이너이므로 다음 목록에 기재되어서는 안 됩니다.useEffect단, 의 의존관계ref.current값이 바뀔 수 있습니다. 참조를 사용하여 다음과 같은 DOM 요소를 저장하는 경우그 요소에 의존하는 커스텀 훅을 개발하면 다음과 같이 됩니다.ref.current는 컴포넌트가 조건부로 반환되는 경우 다음과 같이 시간이 지남에 따라 변경될 수 있습니다. const Foo = ({inline}) => { const ref = useRef(null); return inline ? : ; }; 커스텀 이펙트를 수신해도 안전한가?ref목적과 용도ref.current의존관계로요? const..

programing 2023.03.12

장고와 리액트 입수하는 방법JS가 같이 일한다고?

장고와 리액트 입수하는 방법JS가 같이 일한다고? Django는 처음이고 React JS는 더 새로워졌습니다.Angular에 대해 알아봤는데JS와 React JS는 React JS로 결정했습니다.앵글이 점점 튀어나오는 것 같았어각도에도 불구하고 JS의 인기는 최고JS는 시장 점유율을 높이고 있으며, 리액트(React)는JS가 픽업 속도가 빠르다고 합니다. 그 모든 잡동사니는 차치하고, 나는 Udemy에 대한 수업을 듣기 시작했고, 몇 개의 비디오를 본 후 그것이 Django와 얼마나 잘 통합되는지 보는 것이 중요해졌다.그래서 어쩔 수 없이 벽에 부딪혔을 때 어떤 문서가 나와 있는지 몇 시간이고 밤이고 헛수고만 하고 있지 않습니다. 도 없고, 튜토리얼도 없어요.pip우연히 몇 안 되는 하지 않거나 지났습니..

programing 2023.03.12
반응형