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

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

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

들어가며export default function Component() { const [message, setMessage] = useState('hello') return {message}} {{ message }} 둘의 차이가 느껴지십니까..아니오라고 답한 당신, 프론트할 자격이 없다. 함수형으로 때려박아주시는 우리의 react 님과 다르게, html, css, js의 양식을 한번에 때려박아주시는 vue님은 접근법 자체가 다르다.사실 내부적으로 돌아가는 건 JS/TS이기 때문에 그렇게 어렵다고 느끼진 않았는데 한 파일에 400줄 가까이를 구겨넣는 걸 보고 잠시 어지러워졌었다. 아래는 읽는 거 자유..(본인이 놀라웠던 점이기 때문에)더보기더보기리액트에선 죄다 짧게 분리하고 쳐내고 오히려 파일 구..