Frontend/모던자바스크립트 (23) 썸네일형 리스트형 구조분해할당과 Null 처리 object 구조 분해 할당중에 value값이 널일경우 에러가 나서 해결방법을 찾아봄 const {name, age} = human.info //만약 info값이 null인경우 성립자체가 불가라서 에러 1. if문으로 감싸서 널이아닌경우만 처리 2. 구조분해끝에 || 초기값 object처리 ??는 삼항연산자랑 비슷한느낌인데 널처리할때 유용하게 사용할 수있어보이지만 ?? 과 object 구조분해할당은 같이 사용하는것이 힘든것같다. e = { title:null } //[방법1] ??= e.title ??= '제목없음' //[방법2] ?? e.title ?? '제목없음' const name = e.title = null ?? '제목없음' https://developer.mozilla.org/ko/docs/W.. While문 api 호출 리펙토링(setTimeout, setInterval) while문으로 api를 호출하는 코드로 짰더니 맙소사, 리턴값이 적절할때까지 호출해야하는데 카운트를 세보니 최소 수백개의 API를 호출하였다. 리펙토링이 시급하다. class Test{ //원하는것 a, 1~5, b, c async funcA(){console.log('a')} async funcB(){ while(1){ const test = await fetch(`...`).then(data => data.json()) console.log(test.result) if(test.result){ break; } } console.log('b') } async funcC(){console.log('c')} } const test = new Test() const use = async() => { awa.. parseInt()와 Number()의 차이 그리고.. 문자열로 넘어온 숫자를 바꿔줘야할때가 있다. 그때 parseInt혹은 Number혹은 ParseFloat등으로 감싸야한다. 1. parseInt() vs Number() parseInt()는 정수만 인식하고 Number()는 전체를 인식한다. 단, Number()는 정수가 아닌 문자가 들어갔을경우 NaN에러를 뜬다. 2. Number() vs parseFloat() 소숫점 뒷자리도 표현하면서 알아서 문자열을 걸러주기를 원한다면 parseFloat()도 참고하면 좋을것같다. return false 활용 스페이스바를 입력하지않게하거나 특정 기호를 막고싶을때가 있다. 이때 keycode를 활용하면 좋은데 아래와같은 예시를 참고하면 좋다. 이벤트리스너를 사용할경우 입력이 되고나서 return false처리되는바람에 애먹었는데 onKeydown으로 변경하니 잘 작동하였다. function detectMinus(){ const ninusDetect = document.querySelectorAll('#voteInput') ninusDetect.forEach(each => { each.onkeydown = function(e) { if(!((e.keyCode > 95 && e.keyCode 47 && e.keyCode < 58) || e.keyCode == 8)) { re.. 공유하기, 클립보드 저장 mdn에 따르면 더이상 execCommand('copy')를 사용하지않는다고 하여 코드를 리펙토링 하였다. function copyToClipboard(val) { if(navigator.share) { return navigator.share({ title: 'myblog', text: 'shared url', url: window.location.href || val }).catch(console.debug); } const t = document.createElement("textarea"); t.setAttribute('readonly', true); // for mobile copy document.body.appendChild(t); t.value = window.location.href ||.. window.onload()는 쓰지말자.(feat. readyState) onload? 웹브라우저가 html, script(이거를 도중에 만나면 다운받을때까지 기다림), 이미지를 다 그린이후에 작동됨 window.onload()와 window.addEventListener('load',...)의 차이 같은 의미이지만 window.onload()를 사용할때는 주의해야하는데 만약 여러 onload함수를 사용했을경우 마지막 onload만 실행되고 이전것들은 뭍히기 때문에 주의해야한다. window.onload = function () { console.log("onload 실행되지않음!!!"); }; window.onload = function () { console.log("onload 실행됨"); }; window.addEventListener("load", function (.. wrapper 이벤트리스너 사용 최소화하기 // const tabRare = document.getElementById('Rare') // const tabNormal = document.getElementById('Normal') // tabRare.addEventListener('click',(e)=>{ // e.stopPropagation() // ... // }) // tabNormal.addEventListener('click',(e)=>{ // e.stopPropagation() // ... // }) wrapper.addEventListener('click',e => { e.stopPropagation() const targetElem = e.target if(targetElem.id === 'Rare' | targetElem.id .. 이벤트 중복호출 아무리해도 해결안될때 모달안에 탭을 클릭할경우 이벤트를 호출하는 코드를 작성하였다. 하나의 모달div에 여러기능을 넣다보니 문제가 발생하였다. 이벤트가 쌓이는 문제가발생하였다. 이런경우 만약 클릭이벤트리스터인경우 두번 세번 네번.. 점점 호출양이 쌓이게된다. 쌓이는건 좋은데 이벤트가 누적되어 여러번 호출되었다. 시행착오 1. 혹시 부모요소로 감싸서 이벤트리스너를 하여서 그런가싶어서 개별 이벤트리스너로 변경해보았으나 소용이 없었다. 2. 이벤트 전파 방지인 e.propagation()를 넣어도 소용이없었다. 혹시나 싶어 태그 동작 중단인 e.proventDefault()도 넣었으나 역시나 소용이 없었다. 3. 이벤트리스너 옵션값 false추가 -> 말도 안들음 4. removeEventListener추가 -> 말도 안들음 아마.. 이전 1 2 3 다음
