lastmoon

클라이언트 라우팅(리액트라우터 사용) 및 서버 측 라우팅 생각해 봤는데 클라이언트와 서버 간의 라우팅이 헷갈립니다.React를 사용하는 경우요청을 웹 브라우저로 반송하기 전에 서버 측 렌더링을 위해 JS를 사용하고 리액트라우터를 클라이언트 측 라우팅으로 사용하여 SPA로 갱신하지 않고 페이지 간을 전환합니다. 생각나는 것은 다음과 같습니다. 트는는 ?떻 ?? ????들어 홈페이지로부터의 ( 「 」 。/home 페이지 「 」 )/posts) 라우팅은 서버 측과 클라이언트 중 어느 쪽으로 진행됩니까? 처리 방법을 어떻게 알 수 있습니까? 이 답변에서는 React Router 버전 0.13.x에 대해 설명합니다.다음 버전 1.0에서는 구현 상세 내용이 크게 다를 수 있습니다. 서버 은 최소한의 것입니다.ser..

루트 파라미터가 변경되어도 컴포넌트가 재마운트되지 않는다. 리액트 라우터를 사용하여 리액트 어플리케이션을 만들고 있습니다.다음과 같은 URL이 있는 프로젝트 페이지가 있습니다. myapplication.com/project/unique-project-id 프로젝트 컴포넌트가 로드되면 componentDidMount 이벤트에서 해당 프로젝트의 데이터 요청을 트리거합니다.두 프로젝트 간에 직접 전환하여 아이디만 이렇게 바뀌면... myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 componentDidMount가 다시 트리거되지 않으므로 데이터가 새로 고쳐지지 않습니..

Reactjs 브라우저 탭 닫기 이벤트 안녕하세요. 브라우저 탭 닫기 메시지를 표시하는 방법을 알고 싶습니다.Reactjs를 사용하고 있습니다. handleWindowClose(){ alert("Alerted Browser Close"); }, componentDidMount: function() { window.addEventListener('onbeforeunload', this.handleWindowClose); }, componentWillUnmount: function() { window.removeEventListener('onbeforeunload', this.handleWindowClose); } 이게 내가 내 반응 컴포넌트에 추가하려고 했던 것이다.어떻게 하면 더 나아갈 수 있는지 지도해..

패키지에 "홈 페이지"를 사용합니다.json, localhost 패스를 망치지 않고 이 질문은 사실 이전 질문에 대한 제 답변에서 직접 나온 것입니다. 추가했습니다."homepage"나의 것package.json왜냐하면 제가 Github Pages에서 진행했던 React 앱이기 때문입니다.의 출력npm run build라고 말하다/build디렉토리는 이제 도입할 수 있으며, 이 디렉토리는 프로젝트가 호스트되고 있는 것을 전제로 하고 있습니다./project_name/. 그러나 로컬 호스트에서는 프로젝트가 다음 위치에서 호스팅되지 않습니다./project_name/따라서 js 및 css에 대해 요청된 경로가 엉망입니다(검색 중)./project_name/static/...대신/static/...앱이 고장났..

React 컴포넌트에 CSS와 스타일링을 적용하는 방법 지금까지 제가 작성한 React.js 파일을 스타일링할 방법을 찾지 못해 표준 웹 페이지에서 변환했기 때문에 원래 CSS를 가지고 있지만 React를 사용하여 페이지를 적절한 스타일링으로 표시하는 방법을 모르겠습니다. 어떤 도움이라도 주시면 감사하겠습니다! var NavBar = React.createClass({ render: function() { return ( /* NavBar */ daily specials gift gallery events search Sign Up Log In Cart ); } }); ReactDOM.render(, document.getElementById('nav')); var Gallery = React.creat..

맥락.Context에 의해 전달된 값에 액세스하기 위한 Consumer vs useContext().프로바이더 {value => { }} VS let value = useContext(MyContext); 콘텍스트를 사용한 이 두 스니펫의 차이점은 무엇입니까?콘텍스트 공급자가 전달한 값에 액세스하기 위해 useContext 훅을 사용하는 사용자.콘텍스트를 인수로 전달했기 때문에 useContext는 콘텍스트 프로바이더에 서브스크라이브를 하기 때문에 프로바이더 값이 변경되었을 때 리렌더가 트리거됩니다.그것이 맞아요.그들은 기본적으로 같은 일을 할 것이다. 제 생각에는useContext훅의 구문은 훨씬 멋지고 가독성이 있습니다. React Docs에서: https://reactjs.org/docs/hooks..

모듈을 찾을 수 없습니다.'swiper/react'를 해결할 수 없습니다. 최신 버전의 Swiper에서도 같은 문제가 발생하고 있습니다.이전 프로젝트에서는 작동했지만 지금은 작동하지 않습니다.그 버전도 아니고.최신 버전도 사용해 보았다. 여기 제 코드가 있습니다. // Import Swiper React components import { Swiper, SwiperSlide } from "swiper/react"; // Import Swiper styles import "swiper/css"; const App = () => { return ( console.log("slide change")} onSwiper={(swiper) => console.log(swiper)} > Slide 1 Slide 2 ..

nextjs에서 URL 경로 이름 가져오기 로그인 페이지와 레이아웃 컴포넌트가 있습니다.레이아웃 구성요소에 헤더가 있습니다.signin에 헤더를 표시하고 싶지 않습니다.그 때문에, url pathname을 취득하고 싶습니다.pathname에 근거해 header를 표시합니다. import * as constlocalStorage from '../helpers/localstorage'; import Router from 'next/router'; export default class MyApp extends App { componentDidMount(){ if(constlocalStorage.getLocalStorage()){ Router.push({pathname:'/app'}); } else{ Route..

모든 테스트가 실행된 후 농담 정리 Jest에서 다른 모든 테스트가 완료된 후에 실행되는 청소 또는 해체 태스크를 실행할 수 있습니까?setupFiles를 사용하여 테스트 실행 전 작업을 설정할 수 있는 방법과 유사합니다.테스트에 오류가 있는지 여부에 관계없이 실행할 수 있는 경우 보너스 점수입니다. 놓는 것afterAll(() => {})파일의 최상위 수준(임의의 설명 기능 포함)에서는 특정 파일에서 테스트가 완료된 후에만 실행되는 것으로 나타납니다. 사용 예로는 개발 데이터베이스에 사용자를 생성하는 많은 테스트 파일이 있으며, 각 테스트 파일이 나중에 사용자를 정리하고 삭제하도록 하고 싶지 않습니다.오류는 쓰기 테스트 중에도 발생할 수 있으므로 오류에 관계없이 정리하는 것이 좋습니다.남매의 갈고리가 ..

플럭스 스토어 또는 액션(또는 둘 다)이 외부 서비스에 접촉해야 합니까? 스토어가 자체 상태를 유지하고 네트워크 및 데이터 스토리지 서비스를 호출할 수 있는 기능이 있는 경우... 이 경우 작업은 단순한 메시지 전달자에 불과합니다. -아니면... ...스토어는 액션의 불변 데이터의 바보 같은 수신자여야 합니다(액션은 외부 소스 간에 데이터를 가져오거나 전송하는 것이어야 합니다).이 인스턴스의 스토어는 뷰 모델 역할을 하며 액션에 의해 공급된 불변 데이터에 대해 자체 상태 기반을 설정하기 전에 데이터를 집약/필터링할 수 있습니다. 내가 보기엔 둘 중 하나여야 할 것 같다.그렇다면 왜 한쪽이 다른 쪽보다 선호/권장되는가?플럭스 패턴은 양쪽 모두 구현되어 있는 것을 보았습니다만, (처음에는 전자의 어프로치를 ..