WebRTC로 영상 통화나 화면 공유 기능을 개발하다 보면, 연결이 안 되거나 영상이 끊기는 문제를 만나게 됩니다.이런 문제가 발생했을 때 console.log만으로는 원인을 찾기 어렵습니다. 코드상으로는 문제가 없어 보이는데 실제로는 네트워크 경로를 찾지 못하고 있거나, 패킷이 중간에 유실되고 있을 수 있기 때문입니다. Chrome에서는 이런 상황을 위해 webrtc-internals라는 디버깅 도구를 제공합니다. 이 글에서는 이 도구에 접근하는 방법과 디버깅할 때 어떤 데이터를 봐야 하는지를 정리해보겠습니다. 디버깅 페이지 접근하기접근법은 간단합니다. Chrome 주소창에 chrome://webrtc-internals/를 입력하면 됩니다. 한 가지 주의할 점이 있는데, 이 페이지는 WebRTC 연..
전체 글
배경 자사에서는 내부적으로 공통 라이브러리를 운영하고 있으며, 두 개의 서비스가 이 라이브러리를 가져다 사용하고 있습니다.두 서비스는 내부 동작이 약간씩 달라야 했기 때문에, 버전 뒤에 -a와 같은 접미사를 붙여 서비스별로 버전을 구분하고 있었습니다. 그러나 배포 과정에서 npm install → build → publish 순서로 진행하던 중, package.json에 ^1.20.20-a로 명시된 라이브러리가 의도한 버전이 아닌 다른 버전으로 설치되는 문제가 발생했습니다. 문제^1.20.20-a를 명시했음에도 불구하고, 실제로 설치된 버전은 1.20.20-a가 아닌 정식 릴리스인 1.20.20이었습니다. -a가 붙은 버전에는 1.20.20 버전과는 다른 변경사항이 있었기 때문에, 이 차이가 빌드 결..
배경자사 서비스의 경우 메인 창 안에 여러 개의 패널이 하나의 SPA로 구성되어 있습니다. 이번에 패널 분리 기능을 개발하면서, 특정 패널을 window.open()으로 독립된 브라우저 창에 띄울 수 있도록 했습니다. 이를 위해 분리된 창전용 HTML 엔트리포인트를 추가로 도입하게 되었고, 기존 index.html 외에 두 번째 HTML이 Vite 빌드 대상에 포함되었습니다. 문제개발 서버에서는 정상적으로 동작했지만, 프로덕션 빌드 후 분리된 창을 열면 스타일이 전혀 적용되지 않은 상태로 렌더링되었습니다. DOM 구조와 기능은 정상이었지만, CSS가 분리된 창의 HTML에 주입되지 않아 레이아웃이 완전히 깨졌습니다. 확인해 보니 메인 창의 index.html에만 빌드된 CSS 파일이 태그로 삽입되어 있..
초창기의 웹 브라우저들은 단일 프로세스 기반으로 동작했습니다. 이는 즉, 여러 탭이 열려있을 때 하나의 탭이라도 장애가 발생한다면 모든 탭이 영향을 받는 구조였습니다. 웹 브라우저는 웹 콘텐츠 표시 외에도 여러 부가 기능(확장 프로그램, 여러 탭 관리)을 제공하는 복잡한 애플리케이션이기 때문에 위의 문제는 꽤나 치명적이었고, 이를 해결하기 위해 각각의 탭이 자체 프로세스에서 렌더링되도록 개선했습니다. 이로 인해 악의적인 코드나 오류가 앱 전체에 미치는 피해를 막을 수 있게 되었습니다. Electron은 Chromium의 멀티 프로세스 아키텍처를 계승했기 때문에, 앞서 말한 웹 브라우저와 매우 유사하게 구조화되어 있으며, 내부적으로 Main Process와 Renderer Process(멀티 프로세스)가 ..
CSS를 작성하다 보면 비슷한 스타일을 여러 선택자에 반복해서 작성하거나, 복잡한 선택자를 사용하게 되는 경우가 많습니다. 이 글에서는 코드를 더 간결하고 효율적으로 작성할 수 있는 모던한 CSS 선택자를 소개합니다. :is() 선택자:is() 선택자는 여러 선택자를 하나로 그룹화할 수 있습니다.// Beforeh1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b { color: blue;}// After:is(h1,h2,h3,h4,h5,h6) > b { color: blue;} 반복되는 선택자 패턴을 :is()로 묶어 간결하게 표현할 수 있고, 아래와 같이 중첩해서 사용할 수도 있습니다.// Before.header h1, .header h2, .header p,.fo..