동글이의 STORY

🔷Callback 패턴?function foo(callback) { const a = 10; const b = 20; callback(a, b);}function boo(a, b) { return a + b;}foo(boo);콜백은 함수에 인자로 넣어지는 함수자바스크립트에선 함수 자체가 객체이기 때문에 함수의 인자로 넣어 줄 수 있음🔷Callback 을 사용한 비동기 처리function squareAndCallBack(number) { let square; setTimeout(() => { square = number * number }, 100); console.log(square);}squareAndCallBack(2);// undefined자바스크립트는 setTimeout을 기..

[ 문제 상황 ]- jQuery의 Srotable 기능을 사용하여 순서 변경 기능을 사용하고 있다.- handle을 통해 제어되고 있는데 drag&drop이 아닌 클릭 이벤트로도 sortable이 start 되었고 이 동작에서 오류를 가져오게 되어 클릭시 sortable이 동작하는 것을 막으려고 한다.$(".test").sortable({ helper: "clone", placeholder: "highlight", opacity: 0.35, cursor: "grabbing", forceHelperSize: true, handle: ".handle", items: ".item", axis: "y",});현재 동작되고 있는 예시이다. [ 시도해 볼 수 있는 방법 ]..

JavaScript에서 이미지를 자르기 위해 canvas를 사용하는 방법이 있다. html cavas 요소를 가져와서 쓸 수도 있고  document.createElement("canvas")로 새로 생성하여 할 수 있다.2차원 이미지인 이 캔버스에 이미지를 그리기 위해서는 getContext("2d") 메서드를 사용한다.let canvas = document.createElement("canvas"); // document.getElementById('canvas');const ctx = canvas.getContext("2d"); 이제 캔버스가 설정되고 컨텍스트가 준비되어 이미지 자르기 및 그리기를 할 수 있게 된다. Image() 생성자를 사용하여 이미지 태그를 만들고 사용할 이미지 링크를 속성에..

목차PropertiesMethodcaptureStream()getContext()toBlob()toDataURL()transferControlToOffscreen()Eventscontextlostcontextrestoredwebglcontextcreationerrorwebglcontextlostwebglcontextrestoredcanvas 요소는 그래픽 콘텐츠를 위한 컨테이너일 뿐 실제로 그림을 그리는 동작은 스크립트를 사용하여 구현해야 한다.heightwidth🟣 captureStream(frameRate)float frameRate각 프레임의 캡처 속도를 나타내는 배정밀도 부동 소수점 값설정하지 않으면 캔버스가 변경될 때 마다 새 프레임이 캡처된다.0으로 설정하면 프레임이 자동으로 캡처되지 않는다..

🔶 Unicode유니코드는 U+0031과 같은 형태로 작성하며 이는 숫자 1을 나타냄“U+”를 작성하고 이어서 코드 포인트를 작성U+0031에서 0031이 코드 포인트이다.코드 포인트는 문자 코드로 알려져 있다.코드 포인트4자리 이상의 UTF-16 진수 형태로 U+0000에서 U+10FFF까지 약 110만개 정도를 사용 가능하다.문자, 기호, 이모지, 아이콘을 표현할 수 있다.전체는 17개 평면으로 나누어져 있으며, 하나의 평면은 65535(U+FFFF)개 이다.첫번째 평면을 BMP라고 부른다.일반적인 문자가 이 평면에 속하며 한글도 여기 속한다.BMP를 제외한 코드 포인트가 속한 평면을 Supplementary plane 또는 Astral plane이라고 부름4자리가 아닌 5자리 이상의 코드포인트가 ..

🔶 Math 함수 목록함수 이름개요sinh()쌍곡 사인asinh()쌍곡 아크사인cosh()쌍곡 코사인acosh()쌍곡 아크코사인tanh()쌍곡 탄젠트atanh()쌍곡 아크탄젠트log1p()로그(1 + 파라미터 값)log10()밑이 10인 로그log2()밑이 2인 로그expm1()자연로그 상수(e)의 x승 -1hypot()제곱근cbrt()세제곱근sign()사인(sign) 값trunc()소수를 제외한 정수imul()파라미터 값을 곱하고 결과를 32비트로 변환clz32()32비트 값에서 0비트 수fround()32비트 유동 소수 값1. sinh() : 쌍곡 사인console.log(Math.sinh(0)); // 0console.log(Math.sinh(1)); // 1.17520119364380142...

✅ 핵심요약ㅤ1. 안전 정수(Safe Integer):Number.MAX_SAFE_INTEGER : 2의 53승 - 1로 표현 가능한 최대 정수값Number.MIN_SAFE_INTEGER : -(2의 53승 - 1)로 표현 가능한 최소 정수값EPSILON:JavaScript에서 표현 가능한 1과 1보다 큰 값 중 가장 작은 차이진수 리터럴:ES6에서는 2진수와 8진수 표기법이 추가되었습니다.2진수는 0b 또는 0B로 시작하고, 이어서 0 또는 1의 숫자로 작성됩니다.8진수는 0o 또는 0O로 시작하고, 이어서 0부터 7까지의 숫자로 작성됩니다.isNaN():파라미터 값이 NaN인 경우 true를 반환하는 메서드전역 함수 isNaN()과 Number.isNaN() 메서드로 구분됩니다.isInteger():..

✅ 핵심요약오퍼레이션같은 키 사용:ES6: Strict 모드 여부와 관계없이 에러가 발생하지 않으며, 마지막에 작성된 프로퍼티 값으로 대체변수 이름으로 값 설정:ES6에서는 객체를 선언할 때 변수 이름과 값을 동시에 설정 가능Object에 함수 작성:ES6에서는 함수를 간결하게 작성 가능디스크립터프로퍼티 디스크립터는 데이터 프로퍼티 디스크립터와 액세스 프로퍼티 디스크립터로 분류.각 디스크립터는 다양한 속성을 가지며, 데이터 프로퍼티와 액세스 프로퍼티에 대한 속성이 다름.get, set 속성get 속성: getter 함수를 제공하여 특정 프로퍼티의 값을 가져올 때 사용set 속성: setter 함수를 제공하여 특정 프로퍼티의 값을 설정할 때 사용1. 오퍼레이션Object에 같은 key 사용es3 : key..

✅ 핵심요약Operation프로퍼티 이름조합문자열과 변수 조합하여 프로퍼티 이름으로 사용 가능Default Value값이 할당되지 않았을 때 사전에 정의한 값이 할당됨Default 파라미터호출 받은 함수의 파라미터에 디폴트 값을 지정 가능for-offor-of 문은 이터러블 오브젝트를 반복하여 처리구문 : for ( variable of iterableObject ) { code.. }거듭 제곱 연산자 (**)**은 Math.pow() 메소드와 같다1. 프로터티 이름 조합문자열과 변수를 조합하여 오브젝트의 프로퍼티 이름으로 사용할 수 있다.let sports = "tennis";let item = { ["one" + "two"]: 12, [sports]: 1, [sports + "Game"]: "윔블던"..

✅ 핵심요약디스트럭처링?배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당추출/할당 기준 : 배열의 인덱스 또는 객체의 키⚡ 디스트럭처링 (Destructuring Assignment)형태let one, two;[one, two] = [1, 2];// one = 1// two = 2🔹Array 분할 할당let one, two, three, four, five, other;const values = [1, 2, 3];[one, two, three] = value;console.log("A:", one, two, three);// A: 1, 2, 3[one, two] = value;console.log("B:", one, two);// B: 1, 2[one, two, three, four] = val..