몽땅뚝딱 개발자

📄 예제. const iterator = values[Symbol.iterator]() while (iterator.hasNext()) { console.log(iterator.next().value); out.push(iterator.next().value) } iterator는 지원하면서.. 왜 hasNext는 지원하지 않는건지..? 직접 구현해야하나보다....^_ ^ JavaScript - 이터레이터(iterator)와 for/of 문 모던 자바스크립트 입문(아소 히로시, 길벗, 2018)을 공부하고 정리한 내용입니다.이터레이션은 반복 처리라는 뜻으로 데이터 안의 요소를 연속적으로 꺼내는 행위를 말합니다.예를 들어 배열의 velog.io

/** * 문자열 총 byte 구하기 * @param {string} str 문자열 * @returns {number} 바이트 */ export const getByteLength = (str) => { console.log('[str] result >>> ', str) if (str == null || str.length === 0) { return 0 } let size = 0 for (let i = 0; i < str.length; i++) { size += charByteSize(str.charAt(i)) } return size } /** * 한글자 당 byte 구하기 * @param {string} charValue 문자열 * @returns {number} 바이트 */ export const..

◽️ console.log를 줄이는 방법 나는 주로 인텔리제이에서 재공하는 Postfix Completion을 사용한다. (.log를 입력) const { log } = console; log("Hello world!"); // Expected output: Hello world! // SAME AS // console.log("Hello world!"); // Expected output: Hello world! ✍🏻 다른 Postfix Completion가 궁금하거나 적용하고 싶다면? >> ", foo()) 이렇게 매번 결과에 대한 콘솔찍기가 귀찮아서 만들어 본 단축어. 1. ⌘ + , 를 사용하여 Preferences로 이동한다. 2. Editor > General > Postfix Completi..

1) 다운로드는 되는데 제대로 된 파일로 만들어지지않거나 2) 파일 다운로드를 해결했더니 지정한 파일명대로 받지 못하는 현상때문에 정리해본다. Blob ◽️ blob이란? Binary Large Object의 약자로, 멀티미디어 객체들을 가리킨다. ◽️ Body 믹스인의 프로퍼티 - bodyUsed: body를 사용했냐 여부 - blob(): Blob 인스턴스를 반환 - json(): JSON.parse()의 결과를 반환 - text(): Text를 UTF-8로 인코딩하여 반환 프론트단에서 구현하기 아래와 같이 구현한다. const excelDownload = () => { // 1. fetch 실행이 끝나면 FETCH API는 내부적으로 Body Object를 상속받아 Response 인스턴스를 생성 ..

함수를 괄호 ()로 호출하는 방법도 있지만 자바스크립트에서는 두 가지 방법(call, apply)을 추가로 제공한다. call, apply는 this를 첫번째 인자로 넘겨 한정할 수 있다. ◽️ call 함수 안에서 값을 this로 한정(여기서는 null)하며 두번째 인수를 펼쳐 전달하지 않고 순서대로 전달한다.const user = { age: 12 } function test() { console.log(this.age) } test.call(age) // 12 ◽️ apply 함수 안에서 값을 this로 한정(여기서는 null)하며 두번째 인수를 펼쳐 함수에 매개변수로 전달한다.function add(a: number, b: number): number { return a+b } add(10, 20..

◽ !! [undefined, "", 0]일 경우 결과는 false이고 그 외의 결과는 true이다. boolean으로 형변환을 하기 위해 사용한다. if (data != undefined && data != "") { // 실행코드 } // 이와 동일하다. if (!!data) { // 실행코드 } 출처 자바스크립트 (JavaScript) 느낌표 두개 (Double Exclamation Marks) 연산자 (Operator),!! 정리하자면 느낌표 두개(!!) 연산자는 확실한 논리결과를 가지기 위해 사용합니다.예를 들어 정의되지 않은 변수 undefined 값을 가진 내용의 논리 연산 시에도 확실한 true / false를 가지도록 하는게 velog.io 개인적으로 공부한 내용을 정리하는 블로그로 잘못..

async, await를 더 잘 사용해보기! ◽ Promiss.all 병렬로 처리가 돼야하는 경우 Promiss.all을 사용하면 된다. async function fetchPages() { const [ response1, response2, response3 ] = await Promise.all([ fetch(url1), fetch(url3), fetch(url3) ]) } ◽ Promiss.race 동기로 처리되는 함수들 중 가장 먼저 이행된 결과값을 반환한다. 출처 댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/race 개..

forEach, for(;;) 루프 말고도 다른 형태가 또 있었다. 깨달음 추가) 이미 in을 사용하고 있었다. 나는 바보🥺 ◽ for-in const tempArr = [1, 2, 3, 4, 5] for (const item in tempArr) { console.log(item) } ◽ for-of const tempArr = [1, 2, 3, 4, 5] for (const item of tempArr) { console.log(item) } ◽ for-in VS for-of 인덱스에 신경쓰지 않는다면 of를 사용하는 것이 더 좋다고 한다. for-in 루프는 대부분의 브라우저와 자바스크립트 엔진에서 for-of나 for(;;) 루프보다 몇 배나 느리다. - for-in: 열거 가능한 프로퍼티가 대상..

// 방법 1. if문 사용 function setLocalStorage(id) { const beforeArr = JSON.parse(localStorage.getItem('watchArr')) if(!(resultArr.indexOf(id) > -1)) { resultArr.push(id) } localStorage.setItem('watchArr', JSON.stringify(resultArr)) } // 방법 2. Set 사용 function setLocalStorageUseSet(id) { let resultArr = JSON.parse(localStorage.getItem('watchArr')) resultArr.push(id) resultArr = new Set(resultArr) // Se..

◽ PC window.addEventListener('scroll', handleScrollEvent) // 스크롤 할 때 window.addEventListener('wheel', handleScrollEvent) // 휠을 움직일 때 ◽ 모바일 window.addEventListener('touchmove', handleScrollEvent) 그리고 디바운스(debounce)와 비슷한 느낌의 스로틀(throttle)이 있다. 스크롤 이벤트에서는 스로틀을 많이 적용한다고 한다. - 디바운스: 연속적인 이벤트가 발생하는 경우, 가장 마지막으로 호출된 시점 이후로 일정시간이 지난 후 한번만 실행 - 스로틀: 일정 시간 간격으로 최대 한 번만 실행 ◽ 스로틀 사용하기 window.addEventListene..