전체 글39 Zoom PoC - 화면 공유 중지 시 블랙 스크린 문제 해결 🐞 문제 상황Zoom 연동 PoC 개발 중, 화면 공유를 중지했을 때 해당 공유 영역이 사라지지 않고 블랙 스크린처럼 남아 있는 현상이 발생했습니다.기능 자체에는 문제가 없었지만, 사용자 입장에서 시각적으로 혼란을 줄 수 있는 상황이었습니다.🛠️ 원인 분석화면 공유가 종료되어도 해당 DOM 요소(div)가 DOM 상에 계속 남아 있고, display 속성 등의 스타일 변경이 적용되지 않아 검은 화면처럼 보이는 현상이었습니다.💡 해결 방법PoC 기간 내에 빠르게 해결할 수 있는 방법이 필요했기 때문에, 스타일(display 속성)을 직접 제어하는 방식으로 처리했습니다.화면 공유가 시작되면 display: 'inline'으로, 종료되면 display: 'none'으로 설정하여 DOM이 사라지도록 한 것.. 2023. 3. 19. 전역 상태 관리를 위한 React Query 도입 ✅ React Query를 도입한 이유1. 데이터 캐싱 및 자동 RefetchingReact Query는 서버 상태를 캐싱하고, stale(오래된) 상태라고 판단되면 자동으로 데이터를 다시 가져옵니다.자동 리페칭이 일어나는 대표적인 상황은 다음과 같습니다:브라우저에 다시 포커스가 들어왔을 때컴포넌트가 새로 마운트되었을 때네트워크가 끊어졌다가 다시 연결되었을 때💡 React Query는 캐싱된 데이터를 항상 stale로 간주하고, 필요시 자동으로 최신 데이터로 동기화합니다.→ 이를 통해 불필요한 API 호출을 방지하고, 서버 부담을 줄일 수 있습니다.2. Query Key를 통한 데이터 공유React Query는 Query Key를 기준으로 데이터를 캐싱 및 공유합니다.동일한 Query Key를 사용하면.. 2023. 3. 19. 🔁 배열과 객체 복사: Object.assign() vs Spread 연산자(...) 배열이나 객체를 복사할 때 일반적으로 spread 연산자(...)를 많이 사용합니다.하지만 프로젝트에서 Object.assign()을 사용하는 예제를 몇 개 발견하면서, 두 방식의 차이를 정리해보았습니다.✅ 공통점둘 다 얕은 복사(shallow copy) 를 수행합니다.객체나 배열을 복사하거나 병합할 때 사용됩니다.🧩 차이점 요약구분Object.assing()Spread 연산자방식함수 호출문법적 설탕(syntax sugar)가독성비교적 덜 직관적간결하고 직관적사용성구버전 JS에서 사용 가능ES6 이상에서 사용 가능안전성첫 번째 인자를 수정할 수 있음 → 주의 필요새로운 객체 생성 시 안전함📌 사용 예시🔹 Object.assignconst target = { a: 1, b: 2 };const sour.. 2023. 3. 19. 이전 1 ··· 4 5 6 7 다음
