수민's 개발 이야기

인턴을 하면서 이제 프론트를 개발할 시간이 왔다 . 폰을 VR 기기에 넣어서 확인해야하기 때문에 앱으로 개발해야했고 나는 원래는 웹을 주로 개발해왔고 RN만 연구실 인턴 당시 개발해본 경험이 있기 때문에 RN으로 골랐고 RN이 개발되어있는 라이브러리도 많아서 최적의 선택이라고 생각했다. 그리고 처음엔 PWA로 개발해볼까? 라는 생각도 하긴 했었는데 PWA로 하면 내가 생각했던 기능 중 하나를 구현하지 못한다는 걸 알고 포기했다. 내가 생각했던 기능은 ⭐️현재 내가 연결된 IP를 자동으로 인식해 IP를 주입해주는 기능⭐️이다.생각하게 된 이유이미 개발되어있는 초기 버전의 앱이 있어 사용해보며 프로토타입을 고민해봤는데 불편했던 점 중 하나가 ip 주소를 외우고 있어야 검색할 수 있는 상태라는 점이었다. 그래..

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

인턴을 하면서 webRTC로 구현하던 라즈베리파이 실시간 통신 로직이 계속 malloc() 에러가 나서 이걸 거의 일주일 내내 고쳐봤는데 렌더링을 해서 트랙을 보내는 과정에서 PvAv를 쓰는게 어쩔 수 없이 발생하고 그럼 계속해서 메모리 할당에 에러가 나서 그냥 쌩으로 yuv480p로 인코딩 하려고 해봤는데[CameraTrack] 초기화 완료[/offer0] CameraTrack added[/offer0] LocalDescription 설정 완료INFO: 192.168.0.143:50419 - "POST /offer0 HTTP/1.1" 200 OK[CameraTrack] 프레임 수신: shape=(480, 640, 3)[FFmpeg stderr] ffmpeg version 5.1.6-0+de..

🔫Trouble Shooting 2025. 7. 15. 17:52

⏰ 진행기간 : 2025.03.31-2025.05.31기업 프로젝트에 비해 엄청 긴 기간..ㅋㅋㅋㅋ이라는 장점이 있다. 두 달동안 하고 다양한 주제로 프로젝트를 진행하니 메리트가 있다고 생각했다.근데 아무래도 프로젝트의 크기가 크다보니 회고하기는 너무 어려웠다. 🥹📁 프로젝트 소개팀원 : 기획 2 디자인 2 프론트 2 백엔드 2프로젝트 : VOIM - 저시력자 쇼핑 어드바이저 크롬 익스텐션프로젝트 소개: 쿠팡 페이지에서 상품 정보를 분석해 화장품, 식품, 건강기능식품에 대한 성분 위험성 정보와 리뷰, 장바구니를 요약한 정보를 시각적인 요소를 인지하기 쉽게 안내하는 기능과 고대비/글자 확대 등 접근성 기능을 제공한다. 팀명 : 호공주와 일곱프린세스팀명의 의미 : 우리팀의 청일점인 최호를 위해 모두가 공..

😃 프로젝트를 마치며.... 2025. 7. 15. 10:57

두 개 카메라 동시에 가동하면서 메모리 부족하지 않게 하는 로직 구현하는 방법으로 카메라 락 분리하는 방법을 생각해봤다. 현재 CameraTrack.recv() 함수에서 두 카메라가 각각 다른 인덱스(0, 1)로 Picamera2를 생성했지만 해당 인스턴스들이 동시에 .capture_array()를 호출할 때 내부 libcamera의 상태가 충돌하고 있는 것 같다는 결론을 냈다.저번 블로그 해결 방법의 결론전에는 해결이 되었던 이유가 트랙을 나누면서 눈이 한쪽만 구동되면서 해결이 되었던 것 같다. 즉 , 해결이 안되었지만 두 개가 동시에 접속하지 못하면서 메모리 해결이 된 것처럼 보인 것 같다. 🥹 libcamera와 Picamera2는 완전한 thread-safe 구조가 아니기 때문에 동시에 star..

🔫Trouble Shooting 2025. 7. 10. 17:47

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