킹바구니

scale을 썼을 때, 예를들어 화면을 1280x720으로 작업하고 그보다 작든 크든 scale로 줄이고 키우고 하면 보통은 문제가 없는데, 좌표 기준이 달라져서 그런지 canvas나 drag는 묘하게 이상하게 된다. 예를들어 canvas로 줄긋기를 구현했는데 줄이 이상한 곳에서 그어진다거나, drag같은 경우 드래그 자체는 문제없지만 약간 틀어진 곳에 놔야 놔진다거나 마우스 움직이는거에 비해 잡은 아이템이 느리게 움직인다거나... 암튼 이런거 때문에 짜증났는데 다행히 글이 있었다. 참고로 관련 문제가 생긴다면 이글도 참고 1. 좌표 설정 var click = { x: 0, y: 0 }; $('.draggable').draggable({ start: function(event) { click.x = ev..

콘솔에는 array처럼 [ ] 형태로 나오는데 왜 find, reduce 등이 안될까 싶다면 결론은 배열이 아니고 노드리스트형이기 때문임. 쓰고 싶다면 아래와 같이 배열화 해주면 된다. 1. Array.from 사용 // list 변수가 nodeList인 경우 const currentEl = (Array.from(list)).find((el) => el.classList.contains('current')); 아님 ... 쓰던가

특화된 드래그/회전 기능 등을 제공하는 라이브러리임. 화면에 뭔가 드래그&돌아가는걸 구현했어야해서 이걸 캔버스로 해야하나 싶었는데 다행히 라이브러리가 있었다. 참고로 보니까 한국인이신듯?? 아무튼 어떤 요소를 드래그나 회전을 열심히 하다가 reset버튼을 눌렀을 때 원래대로 돌아가게 하고 싶다면 아래와 같이 설정하면 된다. https://daybrush.com/moveable/ Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! daybrush.com 1. reset하기 const reset = () => ..

참고로 타입스크립트 뭔가 확확 변하는건지 2년전 다른 사람 포스팅에서 이건 안된다 했던거 지금 다 되서 당황함. (해당 포스팅은 언제든지 내용 수정/추가 될 수 있음) 1. type function log(user: {username: string, age: number, phone?: string, id: string, gender: string}) { console.log(user.username); } 이 함수는 user라는 객체를 받아서 그 안에 있는 value를 알려주는데 이렇게 쓰면 너무 길어서 가독성 떨어짐. type User = { username: string; age: number; phone?: string; readonly id: string; // 읽기 전용 gender?: str..

한 이삼년전에 포폴 만든다고 좀 떠먹어봤는데 그때랑 많이 바뀐 것 같다. 아무튼 2023년 버전으로 아주 빠르게 정리 한번 가겠음. 1. 설치 // next.js 활용 npx create-next-app // vite 활용 npm create vite@latest https://react.dev/learn/start-a-new-react-project Start a New React Project – React The library for web and native user interfaces react.dev 기본적으로 node.js를 설치하고, IDE로 원하는 폴더를 만들어 들어간 뒤, 터미널에 둘 중 아무거나 입력하면 됨. 과거와 다르게 리액트 자체만을 설치하는 방법 보다는 이렇게 다른 친구들과 함..

어느순간부터 무슨 프로젝트를 열든 커밋하는 영역에 저런 메세지와 동시에 수많은 변경 사항이 뜨기 시작했음. 도대체 무엇인가 깃을 깔았다가 다시 설치해야하나 그러면 기존에 커밋 잘만 하던것도 또 에러나면 짜증나는데 이러고 있었는데 방법은 간단했음. 1. .git 폴더 삭제 C:\Users\본인이_설정한_컴퓨터_이름 나같은 경우 이곳에 있었는데 .git 폴더를 삭제해주면 더이상 저런 메세지가 뜨지 않음(숨김처리 되어있을 수 있기 때문에 풀고 진행하면 됨). 해당 폴더는 깃 초기화하면 다시 깔 수 있다나뭐라나 하니까 뭐 다시하면 됨.

분명히 화면에는 뜨는데 왜 0으로 나올까.. css에서 height를 auto로 하거나 따로 안쓰고 padding등으로 잡혀있는거면 getBoundingClientRect로 안잡히는건가.. 온갖 생각을 하던때가 있잖슴~~~~~~~ 1. display 확인 const el = document.querySelector('.div'); if (window.getComputedStyle(el).display != "none") { console.dir(el.getBoundingClientRect()); } none으로 되어있으면 안뜨니까 체크 먼저 해주기. 나같은 경우는 알고보니 2번째 element를 확인했어야했는데 display none상태인 첫번째 element를 확인하고 있었어서 그랬음.

드래그 앤 드롭같이 인터렉션한 기능들은 제이쿼리를 빼놓고 하기엔 크로스 브라우징 등의 문제로 쉽지가 않음. 기본적으로 jquery와 jquery ui를 각각 추가해주고 작업하면 된다. 주로 쓸만한 것 위주로 정리함. https://api.jqueryui.com/draggable/ Draggable Widget | jQuery UI API Documentation Description: Allow elements to be moved using the mouse. Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which prov..

input으로 불러온 img를 canvas에 보여주려고 했는데 간헐적으로 이미지가 안나타나더라... 도대체 안될꺼면 아예 안되던가 되다 말다 하는건 또 뭐야라고 했는데 방법이 있었다. 1. onload로 체크 const img = new Image(); img.src = "어쩌고저쩌고"; img.onload = function() { ctx.drawImage(img, 10, 20, 0, 10) } 체크하라굿

단순하게 스크롤을 하단으로 두는 것은 문제없지만, 부모에 아무것도 없다가 append로 자식이 생겨 스크롤이 늘어나는 상황이라면, scrollTop()이나 getBoundingClientRect()등을 써도 자꾸 아무것도 없던 기본 height만 알려줘서 굉장히 난감할때가 있음. 1. 외쳐 제이쿼리 $(".parent").animate({ scrollTop: $(".parent").prop("scrollHeight") }, 500); 제이쿼리도 같이 쓰고 있어서 양쪽으로 찾아보다가 드디어 발견함.