[ubuntu 22.04] 최신 chrome 브라우저에서 키보드 입력 문제 해결법
·
개발 일상
문제 상황ubuntu 22.04 환경의 작업용 pc를 새로 셋팅하고 있었다. 크롬 브라우저를 설치하고 브라우저 상에서 키보드를 입력했는데 몇몇 키가 제대로 작동하지 않음을 발견했다. 특히 특수문자(@, ! 등)는 눌러도 안 나오고, 한글 전환도 되지 않았다.그런데 신기하게 터미널에서는 전혀 문제가 없었다.어라? 입력기는 잘 잡히는데 왜 크롬에서만 이러지?커뮤니티 사이트 등 구글링을 해보니, 크롬 최신 버전(137)이랑 Ubuntu 22.04의 입력기 간의 호환성 이슈가 있다는 것을 발견했다.그에 따라 크롬 브라우저 다운그레이드가 필요한 상황 증상 요약 • 크롬에서 일부 키 입력이 안 됨 • 특수문자 입력 불가 • 한영 전환 안 됨 • 방향키, Enter, Bac..
YOLO 객체 감지 후 위험 영역 판단 로직 개선기
·
개발 일상
회사에서 개발 중인 AI 기반 안전 설비 시스템의 백엔드(python) 로직을 개선했다.카메라 영상에서 사람을 감지하고 사람이 설정한 위험 구역에 진입했는지를 판단해서 실시간으로 설비를 제어하는 시스템이다.기존 방식 이슈YOLO를 통해 사람을 감지하면 [x1, y1, x2, y2] 형태의 bbox 좌표가 얻어진다.이 좌표를 기반으로 DB에 저장된(설정한) ROI(위험 구역) 다각형과의 겹침 여부를 판단하는데기존의 코드를 분석하니 기존에는 bbox의 하단선(bottom)만 사용하는 방식이였고, 현장에서 개선사항이 발생해 판단 로직을 수정하게 되었다.bbox_matrix = LineString([(x1, y2), (x2, y2)])위와 같은 경우 객체의 하단면이 위험 구역에 닿지 않으면 위험으로 판정되지 않..
대량의 파일, 효율적으로 압축 & 전송하기 – 우분투 기반 백업 최적화
·
개발 일상
문제 상황회사 업무로 외부 네트워크와 완전히 분리된 환경(망 분리 환경)에 설치된 특정 솔루션을 점검하러 방문했다. 해당 사이트에서 수집된 정보(이미지, 영상, 로그 등)를 반출해야 하는 상황이었는데, 이러한 환경에서는 외부와의 통신이 차단되어 있기 때문에 SSH, SFTP, 클라우드 업로드 등의 일반적인 데이터 백업 수단을 사용할 수 없었다.물리적인 외장 스토리지를 이용한 데이터 반출이 유일한 방법이었다.이번 작업의 목적은 해당 솔루션에 저장된 다량의 이미지, 로그, 영상 등 이력 데이터를 외장 SSD를 통해 수집하고 반출하는 것이었다.데이터는 날짜별로 수많은 폴더로 나뉘어 저장되어 있으며, 총 파일 수는 약 3만 건 이상, 용량은 약 30GB에 달했다.초기에는 단순하게 GUI를 이용해 마우스로 복사를..
[python] data.dict() vs jsonable_encoder(). 그리고 datetime 쿼리 삽질기
·
개발 일상
문제 상황MongoDB에 저장된 데이터를 기간별로 가공해서 출력해주는 코드를 만들다가 이상한 점을 하나 발견했다.createdAt 같은 날짜/시간 필드가 문자열(string)로 저장돼 있던 것.처음엔 model에서 datetime으로 지정했으니까 당연히 datetime으로 들어갔을 거라 생각했는데, 막상 DB를 까보니까 "2024-01-01T12:00:00"처럼 string으로 저장되어 있던 것을 깨달았다.그래서 코드 전체를 훑기 시작했다.DTO, Model엔 분명히 datetime 타입으로 잘 들어가 있었고, 이상 없어 보였다.그런데 문제는 라우터 코드였다.라우터에서 데이터를 서비스 쪽으로 넘기기 전에 jsonable_encoder(data)로 한번 감싸고 있었는데, 이게 문제의 시작이었다.jsonab..
MongoDB Aggregation을 활용한 통계 API 구현(python)
·
개발 일상
상황회사 업무 중에 다른 통합 서비스와의 연동을 위해 내가 개발 중인 특정 시스템 백엔드에서 통계 기능을 API 형태로 제공해야 하는 상황이 발생했다. 이 기능은 일일, 주간, 월간 현황 등 다양한 기간별 통계를 제공해야 했고, 데이터베이스는 MongoDB를 사용하고 있었다. 이를 위해 MongoDB의 Aggregation Pipeline을 활용하여 데이터를 가공하였고, 특히 시간대(timezone) 처리에 주의를 기울였다.1. 데이터 저장 시 시간대 처리MongoDB는 기본적으로 날짜 데이터를 UTC 기준으로 저장한다. 따라서 한국 시간(KST)으로 입력된 날짜도 내부적으로는 UTC로 변환되어 저장된다. 예를 들어, 한국 시간으로 2025-05-21T15:47:52에 저장된 데이터는 MongoDB에서는..
주기적인 MongoDB 서비스 Down 증상 해결
·
개발 일상
문제 발견최근에 사내에서 호스팅하는 서버 중 하나에 접근이 안되어서 서버를 확인해보니 해당 서버 내의 MongoDB 서버가 일정 주기로 다운되는 현상을 발견했다. 문제 원인을 찾기 위해서 mongodb 로그를 확인해보니 다음과 같은 에러 메시지가 있었다참고 환경: ubuntu 22.04 os# mongod.log의 최근 내역 확인sudo tail -n 100 /var/log/mongodb/mongod.log...Failed to write to interim file buffer for full-time diagnostic data capture: /var/lib/mongodb/diagnostic.data/metrics.interim.tempActual exception type: mongo::error..
[React.js] setTimeout 사용 시 최신 상태(state)가 반영되지 않는 이슈 처리
·
개발 일상
서론React에서 타이머(setTimeout)를 이용하여 일정 시간 후에 특정 함수를 호출하는 기능을 구현하던 중,함수 내부에서 참조하는 상태(state)가 최신값이 아닌 과거 값으로 작동하는 문제가 발생했다. 문제 원인을 체크해보니 React의 비동기 렌더링 이슈가 아닌 자바스크립트의 클로저(Closure)의 특징으로 발생한 것이라는 걸 알게 되었다.문제 상황const goToMaintainPage = () => { // 작업 상태값을 저장하고 다음 페이지로 이동// mySwrState : 생성한 커스텀 useSWR 임 setMySwrState({ ...mySwrState, director: directorName, // useState 값(생성했다고 가정) workerNumber:..
이미지 생성 서버 만들기: 1탄 - 서버 환경 구축
·
생성 AI 활용
서론요즘은 Dall-e, midjourney, stable-diffusion 등 생성형 이미지를 "딸깍" 한번으로 만들어주는 사이트들도 많고, 본인의 컴퓨터 사양(특히 GPU)이 좋은 사람들은 로컬 환경에서 stable-diffusion webui(이하 webui), compyui 등을 통해서 이미지를 생성할 수 있는 시대입니다.그렇다보니 이러한 이미지 생성 기능을 활용한 프로그램이나 웹 사이트를 구축해보려는 개발자들도 많은데요...저도 이미지 생성 ai에 관심이 생겨 로컬에서 webui를 이용하여 이미지 생성 좀 해보다보니여기서 나아가 이미지 생성 기능을 제공하는 웹 사이트를 만들면 어떨까하여 공부하게 되었고 그 과정에서 얻게 된 정보를 정리하고자 합니다.기본조건* nvidia gpu가 장착된 pc* ..
Ubuntu의 crontab에서 GUI 프로그램 실행 스케쥴 등록하기(ubuntu 22.04 기준)
·
개발 일상
Ubuntu의 crontab에서 GUI 프로그램 실행 스케쥴 등록하기(ubuntu 22.04 기준) 고객사 쪽의 요청으로 자사의 프로그램이 항상 켜져있도록 기능 개발을 해야했다. 24시간 항상 켜져있어야 하는 관제 프로그램이라서 비정상 종료시에도 켜질 수 있도록, 앱이 시스템에서 작동하는지 확인 후, 꺼져 있으면 자동으로 실행하는 스크립트를 python으로 구현하였다. 그리고 그 python이 살아있는지 주기적으로 확인하고 죽었으면 살리는 쉘 스크립트(.sh)를 작성하고 이를 crontab에 등록하여 주기적으로 쉘 스크립트를 실행시키도록 스케쥴링을 걸었다. 참고: electron 기반으로 구동되는 프로그램(javascript 기반) 스크립트의 작동 구조 쉘스크립트.sh(python 스크립트가 살아있는지 ..
[기술면접] 프론트엔드 개발자 기술 면접 정리3
·
기술 면접 source
1. 프로젝트에서 ORM을 사용하셨나요? 사용하셨다면 Raw Query를 사용하지 않고 ORM을 활용한 이유는? 시퀄라이즈를 사용했다. raw 쿼리의 경우 데이터베이스에 따른 sql 문법등을 잘 알고 있어야 한다. 그런데 시퀄라이즈는 개발자에 친숙하게 되어 있어서 굳이 sql문법을 통달하지 않아도? 사용하기 쉬워서 접근성이 좋다 2. REST한 API에 대해서 자세히 설명? REST란 http를 기반으로 자원(리소스)을 이름으로 구분하여 리소스의 형태를 공유하는 것을 말한다 API는 클라이언트와 서버 간의 관계 같이 서로 다른 소프트웨어 간에 요청과 응답을 주고 받을 수 있게 만든 체계로 종합하자면, restful api는 rest를 통해 확장성과 재사용성 등 업무 효율을 높히는 규칙을 적용하여 아키텍쳐..
[기술 면접] 프론트엔드 개발자 기술 면접 정리2
·
기술 면접 source
1. 브라우저에서 URL을 입력하고 요청한 페이지를 볼 때까지 어떤 일이 일어나는지 설명해주세요. 1.브라우저에 URL입력하면, 2.URL을 IP 주소로 변환 (3계층) (URP로는 컴퓨터끼리 통신이 불가하기 때문에, 컴퓨터가 읽을수 있는 IP주소로 변경 필요. 브라우저에서 자신의 로컬 hosts파일과 브라우저 캐시에 해당하는 URL이 존재하는지 확인, 존재하지 않는다면 DNS서버에 요청하여 URL을 IP주소로 변경) 3.해당 서버에 요청 (라우터를 통해 경로를 찾아가고, ARP를 통해 IP주소를 물리 주소인 MAC주소로 변경 ) 4.대상 서버와 TCP 통신을 통해 소켓을 염(https의 경우 handshakde추가) 5.연결 완료되었으니 해당페이지에 요청 및 응답(https, http) 6.그 이후 브..
[기술 면접] 프론트엔드 개발자 기술 면접 질문 정리1
·
기술 면접 source
let, var, const의 차이점과 호이스팅 (Hoisting) var는 변수의 재선언, 재할당 모두가 가능하다 es6 문법 도입 전까지는 var만 사용했음 -> 유연한 변수 선언에는 좋으나, 코드가 길어질수록 유지보수 어려움 var는 호이스팅과도 관련이 있다 JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 즉 var로 선언한 변수는 선언 전에 호출해도 에러는 나지않고 undefined가 출력됨 let 과 const는 에러가 발생함 let의 경우..