본문 바로가기
728x90

분류 전체보기184

[Flutter] M1/M2 Mac에서 CocoaPods 오류부터 iOS 앱 실행까지 전체 구성기 1. 문제 상황 및 원인 분석Flutter 환경을 macOS(M1/M2)에서 구성하던 중, gem install cocoapods 실행 시 다음과 같은 오류 발생:ERROR: Error installing cocoapods:The last version of securerandom (>= 0.3) to support your Ruby & RubyGems was 0.3.2.securerandom requires Ruby version >= 3.1.0.The current ruby version is 2.6.10.210.이는 macOS 기본 Ruby가 너무 구버전이라 CocoaPods의 의존성을 만족하지 못한 것이며, 시스템 Ruby 디렉토리에 대한 쓰기 권한 문제도 함께 발생했다.2. 전체 구성 명령어 .. 2025. 6. 25.
MUI DataGridPro Drag & Drop 시 selection 상태가 undefined로 나오는 문제 해결 🧨 문제 상황 및 원인 분석파일 리스트에서 드래그 기능을 구현하던 중, 선택된 항목을 기반으로 데이터를 설정하려 했지만 selectedItems가 undefined로 나와 드래그 대상 판단이 되지 않았음.🧪 시행착오 및 중간 시도들 useCallback 의존성에 selectedItems 포함 → 여전히 drag 이벤트 시점에서는 반영되지 않음useEffect에서 selectedItems 확인 시 정상 → 렌더 타이밍과 이벤트 타이밍 불일치최종적으로 클로저 문제로 판단 🧾 개선 코드 (배열만 처리)const selectedItemsRef = useRef([]);useEffect(() => { selectedItemsRef.current = selectedItems;}, [selectedItems]).. 2025. 6. 12.
[React] ResizeObserver로 이미지 주석 입력창의 위치 오류 해결하기 1. 문제 상황 및 원인 분석이미지 기반 주석 입력창의 위치를 잡기 위해 paperRef의 clientWidth/Height를 참조했으나, 렌더링 시점 차이 및 DOM 변경에 따른 미세한 오차로 인해 입력창이 중앙에서 어긋나는 문제가 발생했다.2. 시행착오 및 중간 시도들style 안에서 직접 clientWidth 계산식 사용초기 useEffect 내에서 수동 측정결과적으로 ResizeObserver 도입3. 이전 코드style={{ width: paperRef?.current?.clientWidth ? paperRef.current.clientWidth + 8 + 'px' : undefined, height: paperRef?.current?.clientHeight ? paperRe.. 2025. 6. 10.
MUI DataGridPro에서 "Rendered fewer hooks than expected" 오류 해결기 – renderCell 내 Hook 분리로 해결 작성 배경 및 문제 상황React + MUI DataGridPro 환경에서 특정 컬럼을 pin to left(좌측 고정) 했을 때 아래와 같은 치명적인 오류가 발생:Rendered fewer hooks than expected. This may be caused by an accidental early return statement.같은 컬럼을 pin to right(우측 고정) 했을 때는 정상 작동하지만, 좌측 고정 시에만 오류 발생. 또한, i18next를 활용한 다국어 설정 변경 후 다이어로그를 다시 열었을 때도 같은 오류가 간헐적으로 발생함.원인 분석해당 오류는 React에서 Hook 호출 순서가 불일치할 때 발생함. 특히 다음과 같은 경우에 자주 발생:renderCell 함수 내부에서 useSt.. 2025. 6. 10.
HTTP vs 이벤트(Event) 🔍 HTTP vs 이벤트(Event) — 차이점, 원리, 장단점, 사용 시점까지 완전 정리웹 개발이나 서버 아키텍처를 공부하다 보면 흔히 접하게 되는 개념이 바로 HTTP 통신과 이벤트 기반 처리입니다.하지만 두 개념의 구조, 동작 방식, 사용 목적은 완전히 다릅니다.이번 포스팅에서는 HTTP와 이벤트의 차이점을 개념부터 동작 방식, 장단점, 사용 시점까지 깔끔하게 정리해 드립니다.✅ 1. 개념 요약항목HTTP이벤트 (Event)정의클라이언트가 서버에 요청하고 응답을 받는 방식특정 사건이 발생하면 미리 등록된 함수가 실행되는 구조방향단방향 요청-응답 구조비동기, 반응형 처리주체클라이언트가 주도이벤트 발생자가 주도예시API 요청, 웹페이지 불러오기버튼 클릭, WebSocket 메시지 수신✅ 2. 동작 방.. 2025. 5. 7.
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.
System.Text.Json을 활용한 네이버 로그인 응답 처리 개선 네이버 사용자 정보 응답 처리 개선 - JsonDocument → JsonSerializer기존에는 네이버 사용자 정보를 처리할 때, 아래처럼 JsonDocument와 GetProperty()를 활용하는 방식이 일반적이었습니다:var userInfoJson = JsonDocument.Parse(json).RootElement;var response = userInfoJson.GetProperty("response");var naverId = response.GetProperty("id").GetString();var email = response.TryGetProperty("email", out var emailProp) ? emailProp.GetString() : null;하지만 이 방식은 유지보수성.. 2025. 4. 10.
[SSO] 네이버 소셜 로그인 연동 및 보안 고려사항, (팝업 기반 소셜 로그인 처리 방식) 1. 네이버 소셜 로그인 연동 개요웹 애플리케이션에서 네이버 소셜 로그인을 연동하는 과정은 다음과 같습니다:사용자가 네이버 로그인 버튼을 클릭하면, 팝업 창을 통해 네이버 로그인 페이지로 리다이렉트됩니다.사용자가 네이버에서 인증을 완료하면, 팝업 창은 액세스 토큰을 포함한 정보를 부모 창(메인 애플리케이션)으로 전달합니다.부모 창은 전달받은 액세스 토큰을 사용하여 네이버 API로부터 사용자 정보를 가져옵니다.2. 팝업 창에서 부모 창으로 데이터 전달팝업 창에서 부모 창으로 데이터를 전달하기 위해 window.opener.postMessage 메서드를 사용합니다. 예를 들어, 백엔드에서 다음과 같은 HTML을 반환하여 팝업 창에서 부모 창으로 데이터를 전달할 수 있습니다: var html = $@" .. 2025. 4. 10.
728x90