Frontend/모던자바스크립트 (23) 썸네일형 리스트형 스크롤내리다 특정 dom부터 사라지게 A버튼은 붕떠있고 하단에 B버튼이있다. 스크롤시 겹치는순간이후부터 A버튼이 사라지는 코드를 구현하였다. 스크롤이벤트안에 스크롤높이를 감지할수있는 window.scrollY와 B버튼의 위치(offsetTop)을 사용하였다. A 버튼 B 버튼 [Javascript] if문 대신 !! 또는 Boolean() 사용하기 !! 또는 Boolean을 써주면 setState할때 삼항연산자나 if문 해줄필요없어서 간편하다. let blabla = 0 !!blabla//false Boolean(blabla)//false blabla = 1 !!blabla//true Boolean(blabla)//true [Javascript] 아이패드도 웹으로 인식할때 navigator.userAgent 가 아이패드를 인식하지못하는 현상을 발견하였다. 아이패드도 데스크톱(웹)으로 인식함 navigator.userAgent.match(/iPhone|iPad|iPod/i) //아이패드와 웹 브라우저에서 null찍힘 나의 경우는 desktop인경우와 그렇지 않은경우만 알면되서 직접 alert로 maxTouchPoints를 찍어봤다. 웹브라우저에서는 0 모바일과 아이패드에서는 5가 찍히는것을 확인하였다. navigator.maxTouchPoints const playBtns = document.querySelectorAll('.js-playGame a') playBtns.forEach(each => { each.addEventListener('click',()=>{ if(na.. 이벤트 객체 모방하기 {target : e} const checkboxes = document.querySelectorAll(".comp-inventory-product input[name=chk]:checked"); checkboxes.forEach(e => { const event = { target: e }; changeCheckBoxCnt(event) }) 배열객체인 메소드 forEach()가 동작하면서 배열을 돌면서 콜백함수를 실행한다. 콜백함수안에는 개별 요소(element)인 e가 현재 들어있다. e를 찍어보면 다음과 같다. forEach()안에서는 만약에 id값과 type의 값을 찾고싶으면 e.id와 e.type을 사용하면되지만 만약 외부함수에서 파라미터로 값이아니라 이벤트객체를 넘겨줘야하는 상황이라면 위와 같은 방법을 사용할 수 있.. 자바스크립트 스프레드 연산자 배열 객체 객체 스프레드의 경우에는 최근값으로 대체할 수 있다. (key값 'a'참고) [리팩토링] if문 대신 매핑하기 모달 초기화를 하는 기능을 하다가 메뉴별로 초기화를 다르게 해야해서 if문을 넣으려했는데 코드도 너무 길어지고 가독성이 떨어지는것같았다. 한 유투버가 if문을 깔끔하게 하는방법을 알려줬다. 매핑관계를 만들어서 분리시키는 방법이었다. 덕분에 코드가 훨씬 가독성이 좋아진것같다. 성능은 약간은 떨어질수 있다는데 왜그런지는 모르겠지만 한눈에보여서 기분좋아짐. 리액트 state로 setFileList를 사용하고있어서 함수를 호출하는것이아닌 함수 자체를 할당하는방식으로 교체하였다. const handleModalCancel = () => { //모달 초기화 //수정전 // if (currentModal === 'Artwork') { // setFileList([]) // }else if(currentModal ==.. 자바스크립트 클로져 예시 클로저란? 함수에서 함수로 외부변수를 전달한뒤에도 실행컨텍스트가 종료된이후에도 참조한 외부변수가 사라지지않는 현상 보통 종료된이후에는 GB에 할당되야하는데 계속 남기때문에 메모리 누수의 원인이됨. 콜백함수 내부에서 외부변수를 참조하기 위한 방법이다. let fruits = ['a','b','p'] let $ul = document.createElement('ul') const alertFruit = (fruit) => { alert(fruit) } fruits.forEach(fruit => { let $li = document.createElement('li') $li.innerText = fruit // 클로저발생(메모리낭비): 콜백함수를 내부함수로선언해서 외부변수를 직접참조 // $li.addEven.. Javascript BigNumber 에러 1e+22 해결 Error: Please pass numbers as strings or BigNumber objects to avoid precision errors. 콘솔에 숫자끝에 0을 많이 붙이면 10진수대신 1e+숫자가 표기된다. 이를 무시하면 위와같은 에러를 만들어낼 수있다. BN라이브러리를 활용한 10진수 처리 number에 위와같이 0이 많은숫자더라도 10진수로 표시해준다. const BN = require('bn.js'); new BN(number,10) 활용 예제 // data =[{amount:"1000000000000000000" || "0", created_at:'', detail:null},{},...] data !== null && data.forEach(e => { e['amountFromP.. 이전 1 2 3 다음
