상황도면 위에 lamp 요소를 수십 개 배치하는 작업이 잦았다.열 맞춰서 나열하다보면 1px, 2px로 같은 가로인데 두번 세번 반복작업이 짜증이 나더라,,사용자 입장에서도 이건 손떨림 방지라던지, 가이드 표시를 해주는 게 나을 것 같단 생각이 들었다. 다른 요소와 좌표가 가까워지면 자동으로 스냅 + Figma 처럼 흰 점선 가이드가 짠 하고 뜰 수 있도록..?다만 문제가 하나 있었다. 캔버스가 transform: scale(N) 으로 줌이 적용된 상태였다는 것. 구체적 배경캔버스 안의 요소 좌표는 unscaled 좌표 (예: bodyX: 100)고, 시각적 위치는 scale 만큼 곱해져서 화면에 그려진다.가이드 라인은 두 요소를 잇는 흰 점선이어야 하는데, 어디에 그릴 것인가가 문제였다.선택지는 둘이..

상황 도면을 띄우고 그 위에 lamp 같은 요소들을 자유롭게 배치하는 캔버스 편집 모드를 만들고 있었다. 요소 이동은 jQuery UI draggable 로 처리하는 레거시 코드 위에서 일하던 중이었다. 편집 모드를 켜고 lamp 를 드래그하면 잠깐 따라오다가 다시 원위치로 튀는 현상이 있었다. 콘솔에 에러는 없고, jQuery UI 자체도 정상 동작하고, Vuex 도 멀쩡했다. 다른 페이지에서 같은 라이브러리로 만든 드래그는 잘 됐는데 이 화면만 이상했다.CSS transition: none !important 까지 박아봐도 똑같았다. 무언가 외부에서 위치를 계속 덮어쓰고 있다는 감만 있었다. ..

기록일: 2026-04-29출처: Claude(Opus 4.7) 대화정리 목적: 컨텍스트 추출과 프롬프팅 참고 원래 요청"합본 파일을 보면 도면이 떨어져있어 중간에 여백이 있거든? 배경과 여백이 있는데, 이걸 없애주고 도면을 합쳐줬으면 좋겠어" 표면적으로는 "여백 제거 + 합치기" 두 가지만 명시되어 있는 요청.두가지의 요청을 통해 만들어졌다. 1. 단순히 합쳐줘 (기존의 요청)2. 부자연스러운데, 이어지게끔 다시 합쳐줘 (추가적인 요청) 이를 통해 나는 원래 하나였던 것과 같은 멀쩡한 상태의 도면을 받았고, 이에 궁금증을 느껴 질문한 결과를 기록하게 되었다.파이썬에 있는 모든 라이브러리를 적재적소에 쓴다? 라기 보단 적재적소에 이걸 써야겠다라고 느낀 의식의 흐름이 궁금했다. 실제 사고 흐름 (4단계..

들어가며AIoT 플랫폼 개발사에서 프론트를 담당하고 있다. 프론트 개발자라고 해서 React/Vue만 알면 될 것 같지만, 산업 IoT 도메인에서는 센서가 어떻게 서버로 데이터를 쏘는지? 까지 이해해야 하는 순간이 온다...프론트 개발자로 일하면서 "게이트웨이"라는 단어를 제대로 이해해야 할 날이 올 줄 몰랐다. 알람 카운트 버그 하나를 쫓다가, 결국 센서 → 게이트웨이 → 서버 → 프론트로 이어지는 데이터 흐름 전체를 머릿속에 그려야 했다. 오늘은 그 과정에서 배운 Level-triggered vs Edge-triggered 개념을 정리해본다. 상황 — 미확인 알람이 34,560건, 일주일 간 누적 합 69180건IoT 모니터링 서비스에서 글로벌 알람 뱃지에 34,560건이라는 비정상적인 숫자가 찍..

상황레거시 Vue 3 프로젝트에서 규칙 생성 화면을 손보던 중이었다.유저가 라디오 버튼을 클릭해도 저장 시 서버로 나가는 payload에는 초기값만 찍혀 있는 상황이었다.컴포넌트는 대충 이런 구조였다. "아, local options ref가 별도 객체라서 스토어 반영이 안 되는 건가?" 라고 생각했다. 첫 번째 대응 — watch 5개 박기스토어로 값을 밀어넣는 watch를 추가했다.watch( options, () => { ruleStore.setAlarmTask(props.id, { options: { ...options.value } }); }, { deep: true } );이걸 알람 / 이메일 / SMS / 제어명령 / 외부서버 요청 5개 컴포넌트에 전..

: develop → gov 브랜치 반영 과정에서 겪은 함정과 해결법상황develop 브랜치에서 조직도 기능을 개발했고, 이걸 gov 브랜치에 반영해야 했다. cherry-pick 하기 편하게 gov 기반으로 새 브랜치를 만들고 파일만 가져오기로 했다.git checkout govgit checkout -b feature/feat-org-pagegit checkout develop -- src/public/pages/serviceUsersManagement.vue간단해 보였다. 함정 1 — 기능과 무관한 변경이 딸려온다git checkout branch -- file은 해당 파일의 브랜치 최신 상태 전체를 가져온다. 조직도 변경만 원했는데, develop에서 별도로 진행된 변경까지 모두 딸려왔다.- ..