킹바구니

useRef로 element좀 써주려고 하면 이렇게 뜬다. 그냥 current가 있을 때를 조건으로 걸어주면 된다. 1. 미리 걸러주기 if (inputRef.current) { // 이곳에 코드 쓰기 } 참고로 나는 정의할때 이렇게 썼음 const inputRef = useRef(null); +추가로 이렇게 썼는데 여전히 그 밑에서 current가 null일 수 있다 이소리를 한다면 느낌표를 활용하자. if (inputRef.current) { gotoPage(inputRef.current!.value); } 느낌표의 의미는 'null일리없으니까 그대로 진행시켜'라는 의미라고 함.

움짤처럼 마우스로 캔버스 클릭 시 그 부분이 중심점이 되어 자동으로 원이 그려지고 다른 곳 클릭 시 원 하나가 확정되어 그려짐. 이후 다른 중심점을 잡으면 새로운 원도 그리면서 동시에 원래 그렸던 원도 기억해서 그려주는 내용임. 캔버스는 도대체 어떻게 작동이 되나 싶었는데 원리가 기존 원을 냅두고 새로 그리는게 아니라 싹 지워버리고 다시 다 그리는 것이였음... https://codepen.io/pmx/pen/qBvZQOV 마우스 위치에 따라 모양 그리고 기억하기 ... codepen.io 이건 진짜 새발의 피고 파면 팔수록 진짜 어렵다 이런 인터렉션.....

먼소리야 도대체...는 별거아니고 그냥 형변환 해달라는 의미임. 1. 숫자형으로 바꿔주기 const n = +inputRef.current.value - 5; 아주 빠른건 이렇게 앞에 +를 붙여주면 숫자로 변환된다.

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되는 함수도 써줌. 그리고 온갖 작업..