728x90 웹 개발3 Material UI Popper 컴포넌트 버그 케이스 대응 기록 및 동작 구조 목차Popper 컴포넌트 소개버그 케이스별 대응 기록위치 설정 오류렌더링 타이밍 이슈리사이징 및 스크롤 문제z-index 및 오버레이 이슈Popper 동작 구조 도식화렌더링 프로세스포지셔닝 메커니즘가상 요소 활용최적화 전략Popper 컴포넌트 소개Material UI의 Popper 컴포넌트는 @popperjs/core 라이브러리를 기반으로 구현된 컴포넌트로, 툴팁, 드롭다운, 메뉴 등 다양한 팝오버 UI 요소를 화면에 표시하는 데 사용됩니다. Popper는 포털(Portal)을 통해 DOM의 계층 구조와 독립적으로 렌더링되며, 지정된 앵커 요소(anchorEl)를 기준으로 위치가 계산됩니다.import { Popper } from '@mui/material'; {({ TransitionProps }) .. 2025. 4. 22. [React] 이벤트 기반 아키텍처 vs HTTP 서비스 아키텍처 이벤트 기반 아키텍처 vs HTTP 서비스 아키텍처1. 정의이벤트 기반(Event‑driven) 아키텍처시스템에서 발생한 ‘사건(이벤트)’을 메시지로 발행(publish)하고, 구독(subscribe)한 컴포넌트가 비동기로 처리예시: 주문 생성 → 재고 서비스가 “재고 감소” 이벤트 처리HTTP 서비스(요청/응답) 아키텍처클라이언트가 HTTP 요청을 보내면 서버가 즉시 응답하는 동기 방식예시: GET /orders/123 요청 → 주문 정보 반환2. 주요 차이점구분이벤트 기반HTTP 서비스통신 방식비동기 (Asynchronous)동기 (Synchronous)결합도느슨 결합 (loose coupling)상대적으로 강한 결합응답 보장발행만 보장, 처리 성공 불투명요청‑응답으로 성공/실패 명확확장성수평 확장 .. 2025. 4. 18. [SSO] 네이버 소셜 로그인 연동 및 보안 고려사항, (팝업 기반 소셜 로그인 처리 방식) 1. 네이버 소셜 로그인 연동 개요웹 애플리케이션에서 네이버 소셜 로그인을 연동하는 과정은 다음과 같습니다:사용자가 네이버 로그인 버튼을 클릭하면, 팝업 창을 통해 네이버 로그인 페이지로 리다이렉트됩니다.사용자가 네이버에서 인증을 완료하면, 팝업 창은 액세스 토큰을 포함한 정보를 부모 창(메인 애플리케이션)으로 전달합니다.부모 창은 전달받은 액세스 토큰을 사용하여 네이버 API로부터 사용자 정보를 가져옵니다.2. 팝업 창에서 부모 창으로 데이터 전달팝업 창에서 부모 창으로 데이터를 전달하기 위해 window.opener.postMessage 메서드를 사용합니다. 예를 들어, 백엔드에서 다음과 같은 HTML을 반환하여 팝업 창에서 부모 창으로 데이터를 전달할 수 있습니다: var html = $@" .. 2025. 4. 10. 이전 1 다음 728x90
