Develop68 블러 알고리즘 웹 기반 실시간 스트리밍 영상 처리 시스템을 개발하는 과정에서 개인정보 보호에 관한 이슈 사항이 있었다.특히 실시간 CCTV 영상에서 스냅샷 기능을 사용할 경우 사람의 얼굴, 차량 번호판, 특정 문구 등 식별 가능한 개인정보가 포함될 수 있어 이를 자동으로 마스킹 처리해야 하는 요구가 있었다.일반적인 CSS의 filter: blur() 속성은 DOM 요소에만 적용이 가능하기 때문에 현재 Canvas 픽셀 데이터는 직접 제어가 불가능했다.또한 외부 라이브러리 사용시 번들 크기가 증가하고 의존성 관리도 부담스러웠다.(실시간 처리가 필요하기 때문에 성능 이슈 발생) 그래서 Canvas API의 ImageData를 직접 조작하여, 순수 JavaScript/TypeScript로 블러 알고리즘을 구현했다. Box.. 2025. 11. 4. RTSP, RTP 실시간 스트리밍에 사용되는 CCTV를 이해하려면 RTSP를 알아야 한다. RTSP란 ?RTSP란 Real Time Streaming Protocal의 약자로 스트리밍 미디어 서버를 제어할 목적으로 엔터테인먼트, 통신 시스템에 사용하도록 설계된 네트워크 제어 프로토콜이다.1998년에 표준화되어 현재까지 CCTV, IP카메라, 미디어 서버에서 주로 사용되고 있다.RTSP는 실제 미디어 데이터를 전송하지 않고 스트리밍을 제어하고 실제 데이터는 RTP/RTCP를 통해 전송된다. RTSP 메서드주요 RTSP 메서드에는DESCRIBE : 미디어 세션 정보 요청(SDP 형태)SETUP : 트랜스포트 파라미터 설정PLAY : 스트리밍 시작PAUSE : 일시정지TEARDOWN : 세션 종료등이 있다. 세션 기반 프로토.. 2025. 9. 20. SecureStorage (Native Keychain) 최근 앱 개발중에 회원가입시 PASS 본인인증 모듈을 적용시키면서 회원가입 플로우를 개발하고 있었는데이 과정에서 회원 정보 보호를 위해 userId와 PIN 관리 전략을 분리하여 개발했다. 회원가입시 userId는 서버에서 만들고 이걸 암호화해서 DB에 저장하고,PIN은 DB에 저장하는것이 아닌 단말기 로컬의 SecureStorage에 암호화된 형태로 저장했다. 로그인시에 SecureStorage에 PIN을 찾아서 사용자가 입력한 PIN과 SecureStorage에 저장된 PIN을 검증해서PIN을 AES-256 암호화 키로 사용해서 Hive Box 복호화에 사용해 Hive Box를 열고Hive Box에서 userId(authToken)을 추출해서 서버에 userId로 인증 요청을 보내서 로그인 로직을 완.. 2025. 9. 9. useMemo React를 쓰다보면 한번쯤 Maximum update depth exceeded 오류를 볼 수 있다.최근에 나도 경험했는데.. 이 무한 렌더링 루프를 어떻게 해결했는지, 왜 나타났는지 정리해보려고 한다. 문제 상황 알림 목록 화면이 있었는데 여기에는 복잡한 문제들이 있었다.1. 여러 탭이 고정되어서 움직이지 않는 문제2. 탭이 고정되어 있지만 데이터는 다른 탭의 데이터가 나오는 문제3. 여러 알림 목록에서 더보기 버튼을 누르거나 특정 조건에서 페이지를 진입하면 Maximum update depth exceeded 오류와 함께 앱이 멈추는 현상4. 목록이 무한 루프를 돌게 되면서 더보기 버튼이 사라져버리는 문제 원인 분석 useNoticeList라는 커스텀 훅 안에는 화면을 렌더링할때마다 매번 .. 2025. 7. 27. @OneToOne, @OneToMany @OneToOne - 정의@OneToOne은 두 엔티티(Entity)가 1:1 관계임을 명시예시: 한 명의 사람(Person)은 한 개의 여권(Passport)만 가짐 - 핵심 개념양쪽 모두에서 최대 한 개의 객체만 연결됨데이터베이스에서는 외래키(foreign key) 제약조건을 이용해 구현됨 @Entitypublic class Person { @Id private Long id; @OneToOne @JoinColumn(name = "passport_id") // 외래키 지정 private Passport passport;} @Entitypublic class Passport { @Id private Long id; // 양방향 예시 @OneToOne(ma.. 2025. 7. 21. 패키지 매니저(npm, pnpm, yarn) 최근에 새로운 프로젝트를 들어가면서 초기 환경설정을 했는데 궁금한 게 생겼다.예전에 교육기관에서 하던 소규모 프로젝트에서는 CRA를 사용해서 리액트 프로젝트 환경설정을 했었다.그때는 아무것도 모르고 그냥 npx create-react-app 하고 npm start를 하면 되는구나 하고 넘어갔는데,왜 npx create-react-app을 하면 npm start가 됐는지, 지금 하는 프로젝트는 pnpm을 쓰는데 어떤 차이인 건지 궁금해졌다. 📦 패키지 매니저패키지 매니저는 외부 라이브러리를 쉽고 체계적으로 설치, 업데이트, 삭제, 관리해주는 도구다.명령어 한줄로 해결이 되니 개발 생산성도 높아지고 보안, 호환성, 협업 효율성 등 이점이 많다.오픈소스 생태계와 현대 소프트웨어 개발에 반드시 필요한 핵심.. 2025. 6. 28. 이전 1 2 3 4 ··· 12 다음
