reduce 활용 객체에 key 값이 없으면 추가 key 값이 들어오면 금액을 더해줌 즉, key 값에 해당하는 금액들이 합산됨 const accum = logs.reduce( function (obj,item) { if (!obj[item.classify]){ obj[item.classify] = 0...
team project-bankapp-5
JSON 데이터 처리 promise를 .then으로 후속 처리 acountPages.forEach( page => { const ulMother = page.querySelector('.use_history_detail > ol') currMonth.then( logs => { const dayLi...
team project-bankapp-4
수평 스크롤 const horizontals = document.querySelectorAll('.saving') horizontals.forEach( horizontal => { horizontal.addEventListener('wheel', e => { e.preventDefault(); if(e.wheel...
team project-bankapp-3
수평 스크롤 const horizontals = document.querySelectorAll('.saving') horizontals.forEach( horizontal => { horizontal.addEventListener('wheel', e => { e.preventDefault(); if(e.wheel...
team project-bankapp-2
요소 drag drag up // B.드래그 업 (지출 상세) + 상세 페이지 높이 변화 주기 acountPages.forEach( page => { const dragBtn = page.querySelector('.drag_btn') const dragTarget = page.querySelector('.bank_use_his...
team project-bankapp-1
input input type=”range” 를 스타일링 <div class="bar"> <input type="range"> </div> /* 바 부분 */ .bar input{ -webkit-appearance: none; width: 202px; height: 6p...
웹팩 설치 복습
복습 npm init -y npm i -D webpack webpack-cli webpack-dev-server@next -package.json 수정 "scripts": { "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" ...
js-throttle
throttle 의미 실행된 후 마무리가 될 때까지 재실행되지 않음 예시 실행시간이 500ms일 경우 실행중 재실행 요청이 와도 다시 실행되는 것이 아니라 무시됨 마무리 된 후에 요청이 오는 경우 새로 실행됨 사용하는 이유 스크롤같은 경우 너무 빈번하게 이벤트가 발생하므로 일정 interval을 두고...
js-debounce
debounce 의미 연이은 요청을 그룹화 하여 마지막 요청만 + 지연시간 후 처리 예시 요청에 대한 지연시간 200ms을 주고 지연시간 내에 요청이 오면 새 요청이 기존요청을 대체하고 남은 지연시간도 200ms로 초기화 사용하는 이유 서버 요청과 같은 경우 비용에 해당한다. 유저가 어떤 값을 입력하...
js-splice
splice const secretCode = 'abc'; pressed.push(e.key); pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); 배열.splice(1,2,3) 첫 번째 파라미터 ...