수민's 개발 이야기

malloc(): invalid size (unsorted) 에러란?: 할당된 버퍼보다 더 많은 데이터를 쓰거나, 메모리를 덮어씌울 때 발생문제상황환경: Raspberry Pi 5 + Raspbian 12 (Bookworm) + PiCamera2 + aiortc (PyAV)증상: 웹페이지 처음 로드 시 스트리밍 OK, 페이지 새로고침 시 glibc 오류 발생원인 : 같은 카메라 인덱스(0)에 대해 CameraTrack 인스턴스가 두 번 생성되고 동시에 프레임 캡처 시도 → 메모리 충돌WebRTC + Picamera2에서 이 에러가 발생하는 이유NumPy 배열이 메모리 안전하지 않을 수 있음capture_image("main")나 capture_array(...) 가 반환하는 데이터가 내부적으로 C 수준에..

🔫Trouble Shooting 2025. 7. 8. 17:12

VNC에서 라즈베리파이에 접속하려고 했는데 Time out이 된 적은 많아도 refused가 된 적은 없어서 식겁했다.그래서 ssh 로는 접속이 가능할 수 있을지 체크해보니까 너무 접속이 잘되길래 🙂‍↔️그래도 SSH를 미리 연결해둬서 다행이지 아니었으면 아예 답이 없을 것이었다... 다시 찾아보니 VNC 서비스 실행 상태를 다시 체크해볼 수 있다고 한다.아주 크게 보이는 Dead .. 🥲 그래서 vnc 서버를 킬 수 있는 명령어를 치고 다시 GUI를 보니 sudo systemctl start vncserver-x11-serviced그래서 다음과 같이 입력하고 확인해보니 경고창이 떠서 너무 걱정했다. 하지만 찾아보니 보안 경고여서 일단은 continue로 안에 들어갔다.이제 애증의 Cannot Cur..

🔫Trouble Shooting 2025. 7. 7. 11:04

인턴을 하면서 라즈베리파이에서 Picamera2를 이용해 두 대의 카메라를 실시간으로 송출하고 싶었다. 현재는 MJPEG 방식으로 스트리밍을 구현했지만, 브라우저에서의 딜레이, 성능 문제, 멀티 클라이언트 대응의 한계가 있어 WebRTC 기반으로 전환하기로 했다.하지만 WebRTC를 구현하려면 aiortc라는 파이썬 라이브러리가 필요하고 실시간 통신을 위해서는 서버도 알아서 내가 만들어야했다. 근데 이게 라즈베리파이에서 설치하는 게 엄청 까다로웠다. 😭시스템 구성카메라: 라즈베리파이 카메라 2대하드웨어: Raspberry Pi 4언어/라이브러리: Python 3, Flask, aiortc, Picamera2, OpenCV스트리밍 방식: WebRTC기본 MJPEG 코드⇒ Picamera2, FileOut..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 3. 17:35

react-native-webrtc란?: 이 라이브러리는 React Native에서 JavaScript API로 WebRTC의 모든 기능을 사용할 수 있게 바인딩해주는 브릿지 역할➡️ Android는 libwebrtc 를 래핑해서 작동주요 기능getUserMedia 현재 불필요: 카메라, 마이크에 접근 (로컬 스트림 생성)import { mediaDevices } from 'react-native-webrtc';const constraints = { audio: true, video: true,};const localStream = await mediaDevices.getUserMedia(constraints);RTCPeerConnection: 다른 피어와 연결 관리 (SDP, ICE Candidat..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 2. 17:21

이제 인턴 업무를 하기 위해 전에 작성되었던 코드를 분석하기 시작했는데 /update API로 시야를 조정하는 부분은 이해를 했느데 Barrel Distortion이란?: 직선이 휘어보이는 현상 , 이미지 중심에서 멀어질수록 더 많이 휘어지는 왜곡배럴 왜곡 현재 구현 코드 apply_distortion = distortedif apply_distortion: frame = self.apply_barrel_distortion(frame)@staticmethod def apply_barrel_distortion(frame): np_arr = np.frombuffer(frame, np.uint8) image = cv2.imdecode(np_arr, cv2.IMREAD_COL..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 2. 14:02

이번에 인턴을 하게 되면서 라즈베리 파이에서 촬영되고 있는 동영상을 실시간으로 송출하는 앱을 만들어 달라는 과제를 받게 되었다. 현재의 문제점 - ⭐️ 영상 딜레이가 심하다 ⭐️- 영상 화질이 별로다 와 같은 문제점들이 있었다. 그래서 이 부분들을 해결하는 것이 나의 과제였고 영상 화질이 별로인 것은 촬영 영상은 괜찮으나 crop이 잘못되고 있어서 앱 구현할 때 해상도를 조정하면 될 것 같다고 생각이 들어서 수월하게 해결할 것 같았는데 가장 중요한 문제는 영상 딜레이가 심하다는 것 이었다. 그래서 이걸 어떻게 구현할 수 있다고 고민을 해보다가 펫캠 어플을 오마주해서 개발하면 괜찮지 않을까? 라는 생각이 들었고 조사해본 결과 Web RTC라는 기술이 있다는 것을 알게 되었다 Web RTC란? 웹 애플리케이..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 1. 17:56

어떤 기업 지원 미니 프로젝트를 하면서 성능 개선에 도전해보았다. Chrome - performance 탭을 확인해보니 INP(: 사용자 인터랙션에 대해 브라우저가 실제로 화면을 업데이트하기까지 걸린 시간)가 32ms가 나왔다 찾아보니 너무 느린건 아닌데 페이지 화면이 딱 하나니까 그걸 고려하긴 해야한다. 성능 결과이렇게 나와서 어디에서 시간이 오래 걸리는지 확인해보니 ❗️prepareRender가 56%임 ➡️ 병목 발생 가능성 파악결론적으로 리팩토링은 성공적이었다. ✌️ 🔍 문제 원인 파일 탭 클릭마다 monaco.editor.createModel, setModel, updateOptions 등 동기적으로 실행이 작업들이 메인 쓰레드를 과도하게 점유 : pointerdown → commit →..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 5. 18. 22:04

이번 프로젝트에서 Jest 테스트를 하고 있는데 스냅샷 테스트가 무엇일까 ? 표 해석%Stmts : 전체 문장 중 테스트에 의해 실행된 비율 (if , let 등등)% Branch : 조건 분기 테스트 커버리지(if , switch 등등)% Funcs : 함수 커버리지% Lines : 실제 코드 라인기준 커버리지Uncovered Line #s : 테스트되지 않은 라인 >> getDarkmode에서 테스트 되지 않은 라인이 많아서 빨간색으로 표시된 것 Jest란? 자바스크립트 테스트 라이브러리 - UI가 바뀌었는지 테스트 가능 스냅샷 테스트란 ? 컴포넌트의 렌더링 결과(UI 구조)를 저장해두고, 이후 변경 사항을 비교하는 테스트 방식>> 그래서 Jest를 선택하게 됨 ✅ 장점- UI 변경 추적이 쉬움- ..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 5. 4. 22:26