js22 [JS] 코드 실행 특정 시간 대기/지연 방법 (코드 1줄) # Javascript - 코드 실행 대기/지연(Wait/Delay) 방법 Promise 를 이용하면 코드의 실행을 특정 시간 대기 시킬 수 있다. 아래의 코드 1줄짜리 함수를 정의해두고 호출하면 된다. const delayTime = async (millisec) => new Promise((resolve) => setTimeout(resolve, millisec)); 구체적인 사용 방법은, delayTime() 함수를 호출하면 Promise를 반환하므로 then(콜백함수) 방식이나, async/await 방식을 사용하면 된다. const delayTime = async (millisec) => new Promise((resolve) => setTimeout(resolve, millisec)); // .. 2023. 8. 24. [JS] 배열 중복 요소 제거 방법 (코드 1줄 ) # Javascript - 배열 중복 요소 제거 방법 자바스크립트에서 배열 중복 요소를 제거는 아래의 코드 한 줄이면 충분하다. const dedupeArray= (arr) => [...new Set(arr)]; 아래와 같이 사용하면 된다. const dedupeArray = (arr) => [...new Set(arr)]; const myArr = [1, 1, 2, 2, 2, 3]; dedupeArray(myArr); // [1, 2, 3] 작동원리는 Set 으로 중복요소를 제거하고, Spread 문법으로 새로운 배열을 생성한다. 함수로 만들어 두고 필요할 때마다 가져다 쓰면 편하다. 2023. 8. 24. [JS] 배열에서 랜덤으로 요소 추출하는 초간단 방법 (코드 1줄) # JavaScript - 배열 요소 랜덤 추출 방법 자바스크립트의 배열의 요소를 랜덤으로 추출하는 코드는 아래의 코드 한 줄 짜리 함수로 쉽게 구현 가능하다. const getRandomElement = (arr) => arr[Math.floor(Math.random() * arr.length)]; const 당첨자명단 = ["Teddy", "Jennifer", "Nicole", "Brad", "Tom"]; getRandomElement(당첨자명단); // 랜덤으로 한명씩 나옴 작동원리는 다음과 같다: Math.random()은 [0이상, 1미만) 사이의 랜덤한 소수를 반환한다. 여기에 배열의 요소 수(length)를 곱해주면, [0이상, 배열의 요소 갯수 미만) 사이의 랜덤한 소수가 반환된다. Mat.. 2023. 8. 23. [JS] 영어 단어/문장 첫글자만 대문자로 바꾸는 초간단 방법 (코드 1줄) # Javascript - 영어 단어 첫 글자만 대문자로 바꾸는 방법 자바스크립트 자체적으로는 영어 단어의 첫글자만 대문자로 바꾸는 기능이 없다. 하지만 toUpperCase() 와 slice() 등를 적절히 배합하면, 아래와 같은 한 줄 짜리 함수를 만들어 구현할 수 있다. const capitalize = (str) => `${str.charAt(0).toUpperCase()}${str.slice(1)}`; const myName = "teddy"; capitalize(myName); // "Teddy" 이 함수의 구동원리는 다음과 같다: str.charAt(0)으로 첫글자만 뽑아서 toUppercase()로 대문자로 변환한다. str.slice(1)으로 두번째 이후의 모든 문자를 추출하여 그대로 뒤.. 2023. 8. 23. [JS] Shallow Copy & Deep Copy 기본 개념, 원리 (feat. 값 vs. 레퍼런스 전달) # Shallow Copy, Deep Copy 기본 이해 이 글에서는 Shallow copy(얕은 복사), Deep copy(깊은 복사)의 기본 개념은 물론, 실질적인 구현 방법과 근본적인 작동 원리까지 파악해보려 한다. 자바스크립트의 Data Type과 Value 전달 및 Reference 전달 Shallow Copy 와 Deep Copy개념과 구현 방법 객체의 작동 방식과 Shallow Copy의 근본 원리 # Javascript의 데이터 타입 Javascript의 데이터 타입은 원시타입과 참조타입이 있다. 1. Primitive Data types undefined Boolean Number String BigInt Symbol ... 2. Structural Data Types Object: ne.. 2023. 8. 22. [JavaScript] if 조건문 효율적으로 가독성 있게 쓰는 방법 # if 조건문 헬(Hell)에 빠지는 이유 자바스크립트에서 if 조건문을 쓸 때, 효율성/가독성이 떨어지고, 추가/수정이 어려워지는 이유는 대체로 2가지이다. 한번에 너무 많은 요소를 비교한다. 중첩(nested)조건이 많아진다. 1-1. 한번에 너무 많은 요소를 비교하는 경우 - 사례 예를 들어, 음식 종류를 비교하는 조건문을 보자. if(food === "pizza" && food === "pasta" && food === "burger" && food === "steak"){ return "Western food"; }else{ return "Asia food"; } - 가독성이 떨어진다 : 음식 종류가 10개 쯤 된다면 더욱 읽기 힘들 것이다. - 비효율적이다 : 동일한 코드(food === ".. 2023. 5. 7. [JS]requestAnimationFrame/cancelAnimationFrame원리와 사용 방법(Feat. 브라우저 작동 방식) requestAnimationFrame을 3줄로 요약하면 아래와 같다. 1. requestAnimationFrame은 브라우저가 화면을 그리기(Paint) 직전에 실행할 코드를 등록한다. 2. requestAnimationFrame을 재귀적으로 반복호출하면, 60FPS 목표로 애니메이션을 최적화한다. 3. cancelAnimationFrame은 requestAnimationFrame으로 등록해둔 코드를 취소한다. 이게 도대체 무슨말인가?!! requestAnimationFrame을 제대로 이해하기 위해선 일단 브라우저가 화면을 그리는 원리부터 알아두면 좋다. 차근차근 정리해 보려 한다. 생각보다 쉽다. # 브라우저 작동 방식 - 브라우저가 화면을 그리는 원리는 대략 아래와 같다. 1. 서버에 요청하여 H.. 2023. 1. 21. [JS] 텍스트 복사(Copy) 완전 쉬운 방법: Clipboard API 기존에 텍스트 복사를 구현하려면 document.execCommand("copy") 을 이용했다. 아래 글 참고 [자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법 그러나 execCommand 메서드는 Deprecated 되었으며, 대안으로 훨씬 쉽고 강력한 Clipboard API 가 나왔다. window.navigator.clipboard.writeText() 메서드를 사용하면, 아주 쉽게 텍스트를 클립보드에 복사해둘 수 있다. 너무나 쉽고 좋아서 정리해두지 않을 수 없다. 1. 텍스트 복사 - navigator.clipboard.writeText("복사할 텍스트") 호출하면 끝! - 비동기로 복사를 수행하고 Promise 를 반환하므로, 복사가 완료되었을 때 수행할 작업을 th.. 2022. 6. 23. [자바스크립트] MediaElementAudioSourceNode 음원 파일(mp3, wav 등) 사용 방법 Web Audi API는 음원의 타입(파일, 버퍼, 스트림 등)에 따라 소스Node와 작업 방식이 조금씩 다르다. 45초 이상의 긴 음원 파일(mp3, wav)을 다루기 위해서는 MediaElementAudioSourceNode를 소스Node로 이용해야 한다. 이 글에서는 MediaElementAudioSourceNode를 통해 mp3 등의 음원파일을 다루는 방법을 정리한다. ※ Web Audio API의 기본 사용 방법은 아래 글 참고 [자바스크립트] Web Audio API 기본 원리와 예제 코드 ※ 45초 이하의 짧은 음원을 다루는 AudioBufferSourceNode는 아래 글 참고 [자바스크립트] AudioBuffer, AudioBufferSourceNode 사용 방법 & 예제 코드 # Med.. 2022. 1. 20. 이전 1 2 3 다음
