goodsource

Create React App에서 API 키를 숨기려면 어떻게 해야 하나요? Create React App에서 날씨 앱을 만들었습니다.create-react-appGit Hub는 API를 사용합니다. 현재 키는 App.js에 있습니다. const API_KEY = "123456"; 와 gitignore를 사용하는 가 유지됩니다.env파일, 안전하지 않습니다.Claudiu Creanga가 지적한 바와 같이 React 환경변수는 빌드에 포함되어 있으며 공개적으로 액세스할 수 있습니다. API 키 또는 비밀 정보(예: Node.js 또는 Express.js)만 백엔드에 저장해야 합니다.클라이언트가 백엔드 API에 요청을 보내도록 할 수 있습니다.그러면 API 키를 사용하여 실제 API를 호출하여 데이터를 클라..

반응 시 svg 이미지에 색상을 추가하는 방법 아이콘 목록이 있습니다.아이콘 색상을 흰색으로 변경하고 싶습니다.기본적으로 아이콘은 검은색입니다.여러분, 추천할 만한 거 있어요? 저는 평소에'fill: white'근데 리액트에서 하니까...안 돼! import React from 'react' import menuIcon from '../img/menu.svg'; import homeIcon from '../img/home.svg'; .sidebar__icon { fill: #FFFFF; width: 3.2rem; height: 3.2rem; } 각 아이콘에 대해 React 구성 요소를 생성할 필요가 없도록 이 방법을 사용합니다.문서에 따르면 SVG 파일을 리액트컴포넌트로 Import할 수 있습니다. im..

gatsby 사이트에 Google 글꼴을 추가하려면 어떻게 해야 합니까? Gatsby 시작하기 - 구글 폰트로 public/index.html에 링크 태그를 추가하면 개발 모드로 동작합니다.사이트를 구축하면 index.html이 리셋됩니다.그럼 글꼴을 추가할 수 있는 다른 적절한 방법이 있을까요?개츠비 튜토리얼에서 논의된 리액트 헬메트를 사용할 수도 있습니다. 헬멧 구성요소 내에 Google 글꼴 링크 요소를 포함합니다. 다음과 같이 합니다. 저는 이미 수작업으로 스타일링을 하고 있었기 때문에, 타이포그래피를 사용해 본 결과, 많은 변경이 있어 원래대로 되돌리는데 시간이 걸렸습니다.'다의 맨 에 '다'를 .src/layouts/index.css의 ' @import url('https://fonts.goo..

react-module-module: 디버깅 출력의 일부가 표시되지 않음 리액트 테스트 라이브러리와 리액트 재스트를 사용하여 컴포넌트를 테스트하고 있습니다.나는 이상한 문제에 직면해 있다.testing-library에서 렌더로 디버깅을 반환하고 있습니다. test('component should work', async () => { const { findByText, debug } = render(); const myElement = await findByText(/someText/i); debug(); }); 스크린샷에서 볼 수 있듯이 불완전한 개발과 부모용 닫힘 태그가 누락되어 있습니다.값을 변경해야 합니다.DEBUG_PRINT_LIMITenv variable(기본값은 7000). 예를 들어 다음과 ..

React ref.current 값이 변경되었는지 어떻게 알 수 있습니까? 보통 소품만 있으면 글씨를 쓸 수 있어요 componentDidUpdate(oldProps) { if (oldProps.foo !== this.props.foo) { console.log('foo prop changed') } } 소품 변화를 감지하기 위해. 하지만 만약 우리가React.createRef()참조가 새로운 컴포넌트 또는 DOM 요소로 변경된 경우 어떻게 검출합니까?리액트 문서에서는 아무 말도 안 했어요 F.E. class Foo extends React.Component { someRef = React.createRef() componentDidUpdate(oldProps) { const refChanged = /*..