킹바구니 🦜

https://peamexx.tistory.com/230 효율적인 이벤트리스너 거는법과 tagName과 nodeName 차이 1 2 3 li에 클릭했을 때 행동을 제어하고 싶다면, document.querySelectorAll로 li 배열을 가져와서 foreach같은 걸로 순환하며 addEventListener를 등록할텐데 이렇게 하면 li 개수만큼 이벤트리스너가 등록되기 peamexx.tistory.com 이 글에 이어서 이름 비교만큼 많이 쓰는게 클래스 가지고 있냐 아니냐 인데 이때도 두가지 방법이 있음. 1. contains document.querySelector("button").classList.contains("btn"); 이 말은 button element가 btn이라는 클래스를 가지고 있..

1 2 3 li에 클릭했을 때 행동을 제어하고 싶다면, document.querySelectorAll로 li 배열을 가져와서 foreach같은 걸로 순환하며 addEventListener를 등록할텐데 이렇게 하면 li 개수만큼 이벤트리스너가 등록되기때문에 효율적이지 못함. 게다가 등록한 리스너를 삭제해야하는 상황이 온다면 또 배열 돌리고 어쩌고... 손가락 아픔. 이럴때는 아예 부모인 ul에 addEventListener를 등록해서 조건을 거는 방법이 있음. document.querySelector("ul").addEventListener("click", function(event) { if (event.target.nodeName != "LI") return; // 이제 li를 클릭했을때만 액션 발생 ..

위에 짤처럼 뒤에 배경이 있고(canvas에 심은 배경은 아님) 그 위에 있는 canvas에 열심히 그리기 기능을 써서 마우스로 끄적끄적 해놓은 것을 지우고 싶을때 뒤에 배경은 두고 내가 그린 선만 지워지는 기능은 없나 싶었는데(마치 포토샵의 layer같은 그런거) 다행히 아주 쉽게 구현이 가능했음. 1. globalCompositeOperation 설정 ctx.globalCompositeOperation = "destination-out"; ctx.strokeStyle = "#FFC300"; 지우기 모드에 들어갔을때 위처럼 destination-out으로 설정해두고 지우개 색깔을 설정해두면 된다. 나같은 경우 노트패드처럼 노란 배경에 줄이 쫙쫙 그어져있는 배경 위에 캔버스로 그리는거라 지우개 색깔을 노..

input류 기능 중 많이 요청하는 기능인데 이참에 써둔다. 빨리 개발하고 집에 가자!!! 1. 글자수 넘으면 써도 못쓰게 하기 document.querySelector("input").addEventListener("keyup", function (event) { if (event.target.value.length > 25) { event.target.value = event.target.value.slice(0, 25); } });; 25자 이상 넘으면 써도 안써짐. 2. 숫자만 쓰게 하기 document.querySelector("input").addEventListener("keyup", function (event) { event.target.value = event.target.value.r..

그냥 div 하나 만들어서 특정 요소에 append하려고 했는데 자꾸 오류가 떠서 도대체 뭐지 싶었는데 이런 짓을 저질러놓고 모르고있었다!!!! 1. document.createElement를 잘 썼나 확인 const p = document.createElement("div"); // 이부분을 querySelector로 쓰고 앉아있었음. p.classList.add("p"); p.dataset.id = a.id; s3.querySelector(".wrap").append(p); 습관적인 document.querySelector....★

input file로 이미지든 뭐든 받아서 이것저것 처리할 일이 있는데(썸네일이라든가) 잊어먹기전에 한번 정리를 해둠. 1. 파일 지정하기 기본적으로 accept 옵션을 써서 위와 같이 처리를 함. 문제는 조건을 아래 3번에서 한번 더 따로 막아줘야 한다는 것임. 왜냐면 파일선택창에서 '모든 파일'을 누르면 걸어뒀던 조건이 리셋이 되기 때문임. 기타 accept에 쓰는 방법은 이곳에서 참고 https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/file#accept - HTML: Hypertext Markup Language | MDN file 유형의 (en-US) 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 ..

어쩌다보니 위 움짤처럼 화면이 resize가 될때마다 html가 통으로 줄어들게 만들어야하는 때가 있었음. 이럴때는 window 가로길이 대비 html 가로 길이 어쩌고 하면서 scale로 처리를 해주는데, 여기서 문제가 바로 jquery drag를 쓸 때임. 예를들어 기본화면을 1920x1080으로 작업했다고 한다면, scale처리가 된 화면에서 1920이 아닌 다른 크기일 경우 위와 같은 요상한 문제가 생김. 드래그 왜저래... 아무튼 이때 드래그만 해결하는 방법은 이곳에서 확인하면 된다. 아니면 애초에 이런 문제가 안생기도록 처리하는 방법이 있는데 바로 iframe처리를 하는 것임. 먼저 fakeIndex.html를 하나 만들어서 이렇게 내용을 써주고, scale되는 함수도 써줌. 그리고 온갖 작업..

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')); 아님 ... 쓰던가

참고로 타입스크립트 뭔가 확확 변하는건지 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..