세 개 이상의 React 애플리케이션 간에 데이터를 공유하는 방법
"두 개 이상의 애플리케이션을 위해 일부 데이터를 공유해야 하는데 일부 데이터는 보안되지 않은 부분이 있다.애플리케이션으로부터 동일한 요청이 여러 번 발생하지 않도록 해야 한다.IndexedDb, localStorage를 고려했지만 일부 브라우저에서는 innogito 모드가 작동하지 않는다.아마도 api 인터페이스를 제공할 부모 앱을 만드는 마지막 방법은 같은 요청을 하고 글로벌 오브젝트를 통해 자식 컴포넌트에게 상태를 제공하고, 아이 컴포넌트는 글로벌 api를 통해 필요할 경우 요청을 호출할 수 있지만, 그것은 매우 이상하고 누구나 그 오브젝트를 변경할 수 있다.이 문제를 해결할 줄 아는 사람 있어?어떤 생각이라도 좋을 것 같아!충고 고마워!
아마도 당신은 마이크로 프런트엔드 인프라를 조사할 수 있을 것이다.마이크로 프런트엔드라는 용어는 2016년 말 ThinkWorks Technology Radar에서 처음 나왔다.마이크로 서비스의 개념을 프런트엔드 세계로 확장한다.
기본적으로 라우팅, 세션, 인증 토큰 등과 같은 글로벌 상태나 데이터를 저장하는 "셸" 앱에서 시작할 수 있다.
이 계층 아래에서, 독자 SPA를 구축하는 데 사용하고 싶은 프런트엔드 프레임워크를 선택할 수 있으며, 사용자 정의 자바스크립트 이벤트로 만들어진 이벤트 버스를 통해 글로벌 데이터를 쉽게 공유할 수 있다.
예를 들어 셸에 "print_report" 이벤트를 생성할 수 있다.
window.dispatchEvent(new Event("print_report") );
하위 수준 앱에서 실행:
window.addEventListener("print_report", () => { call_back(data); });
마지막에 각 프런트 엔드 모듈:
- 자급자족하다
- 독자적으로 개발할 수 있다
- 독립적으로 시험할 수 있다.
- 독립적으로 전개할 수 있다.
- 기술/프레임 불가지론
- 글로벌 이벤트 버스를 통해 서로 의사소통할 수 있다.
위에 대한 자세한 내용은 다음을 참조하십시오.
'Programing' 카테고리의 다른 글
| 초기 v-선택 값 설정 (0) | 2022.03.22 |
|---|---|
| Vue 경로에서 여러 구성 요소를 사용하는 방법 (0) | 2022.03.21 |
| TypeScript 및 webpack으로 웹 작업자를 만드는 방법 (0) | 2022.03.21 |
| MD 크기의 장치에 대해서만 요소 표시 (0) | 2022.03.21 |
| 변수가 python 2 및 3과 호환되는 문자열인지 확인하는 방법 (0) | 2022.03.21 |