킹바구니

1. useState로 여러 상태를 관리하는 법 고객 정보를 받는 input이 2개가 있다고 한다면 보통 이렇게 각각 state두고 관리할 것임. const [age, setAge] = useState(0); const [username, setUsername] = useState(''); 그런데 이런 각각의 코드를 const [userData, setUserData] = useState({ age: 0, username: '' }); 이렇게 한꺼번에 받을 수 있음. 어차피 같은 역할을 하는 친구들이면 저렇게 받는게 훨씬 깔끔하고 편할 수 있음. 2. set함수에 콜백함수 쓰는 이유 만약 input창에 onchange 이벤트를 걸어서 쓸때마다 set함수로 해당 변수를 바꿔준다면 이렇게 쓰면 된다. // ..

npm install에서 divina-player-js을 설치하는 과정에서 무한로딩이 걸렸고, 이 오류가 은근 발생했던건지 친절하게 방법도 알려줬는데 정확하게 어떻게 하는건지 몰랐어서 기록해둠. 1. git bash 열기 일단 프리징된 상태에서 그냥 새롭게 git bash를 열어서 아래와 같이 복붙을 해줌. node scripts/package-lock-patch.js && cat package-lock.json | grep -i divina-player-js 난 이걸 어디다 써야하는건지 몰라서 조금 해맸음 파워쉘을 또 여는건지 커맨트 프롬프트인지 뭔지;; 2. 다시 npm install 그러면 쫙 진행되더니 divina-player-js에서 호로록 정상적으로 넘어감. 이제 다 된줄 알고 npm run ..

보통 커서는 이렇게 좌측 상단이 포인트 부분인데 이번에 구현하다보니 받은 디자인이 좌측 하단으로 되서 온 것임. 찾다가 안나와서 이거 안돼요 했는데 방법 찾음; 1. cursor에 좌표 입력 document.body.style.cursor = "url('custom.png') 5 40, auto"; url 뒤에 바로 좌표를 써주면 된다. 안된다했는데.. 촤하하 미안합니다!

풀(update)받으려고 했는데 갑자기 저런 메세지가 떴음. 메세지 자세히 안봤으면 svn은 에러가 에러처럼 뽝!! 하고 안떠서 그냥 풀 잘된거같이 보이더라. 1. 개별 폴더에서 update 받기 폴더 안에 여러 폴더가 있었는데, 그 폴더마다 새로 받을 내용이 많아서 저랬던듯. 그래서 개별 폴더에 들어가서 받아주니까 딱 되더라!

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) 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 ..