Unary (+) Operator | 단항 연산자 (+)로 문자열을 숫자로 변환하는 법, 활용예시 단항 연산자(+)의 역할 단항 연산자(+)는 한 개의 피연산자, 즉 한 개의 인수와 짝을 이루어 역할을 합니다. 더하기를 의미하는 기존의 (+) 기호와는 달리, 숫자로 변환해주는 역할을 담당하는 단항 연산자 (+)는 인수의 바로 앞에 붙습니다. ECMA 공식 문서에 따르면 단항 연산자 (+)는 문자열인 인수를 숫자 형태로 빠르고 간단하게 바꾸어주는 문법입니다. 단항 연산자(+)가 적용될 수 있는 경우 문자열 앞에 단항 연산자 (+))를 붙여주면, 문자열을 숫자 타입으로 변환하여 리턴합니다. 문자열 뿐만 아니라 true, false, null값 또한 숫자 타입으로 변환합니다. 또 이진법과 16진법 수도 변환해..

브라우저에서 바로 모든 웹사이트를 편집할 수 있습니다. 디자인 모드가 활성화되면 사용자는 WYSIWYG (What You See Is What You Get) 편집기에서와 같이 문서의 전체 내용을 편집할 수 있습니다. 문서 전체 doucument.designMode = 'on' 단 하나 요소 element.contentEditable React, Angular 등과 같은 프레임워크 This text can be edited!

swiper 슬라이드 적용 시 스와이프 할 때 absolute로 잡은 영역이 뒤로 겹치는 이슈 z-index 대신 아래 속성 추가 transform: translate3d(0, 0, 0); .bottom { position: absolute; right: 10px; bottom: -10px; transform: translate3d(0, 0, 0); }

로컬 또는 빠른 네트워크 환경에서 테스트하는 경우 비디오가 빠르게 로드됨 즉 loadedmetadata, 이벤트 리스너를 설정하는 스크립트가 실행되기 전에 브라우저가 실행 반면에 비디오를 로드하는 데 시간이 조금 더 오래 걸리는 느린 네트워크를 통해 테스트하는 경우 브라우저에서 이벤트를 실행하기 전에 스크립트가 실행될 수 있습니다. 이벤트를 받는지 여부는 단순히 네트워크 조건, 비디오가 캐시되었는지 여부, 마크업에서 TCP 패킷 경계가 발생한 위치에 따라 달라짐 해결방법 아래 두가지 방법은 네트워크 환경에 관계없이 loadedmetadata 이벤트 리스너가 미리 등록되어 있기 때문에 항상 이벤트가 발생됨 1. 요소에 속성으로 이벤트 추가 2. 자바스크립트로 비디오 요소 생성 후 이벤트 추가 var vid..

javascript double question mark - ?? Nullish coalescing operator (??) ?? 기준 좌변의 값이 null 또는 undefined일 경우에만 우변의 값을 전달 함 '왼쪽값' ?? '오른쪽값'; // '왼쪽값' 0 ?? '오른쪽값'; // 0 '' ?? '오른쪽값'; // '' undefined ?? '오른쪽값'; // '오른쪽값' null ?? '오른쪽값'; // '오른쪽값' javascript double exclamation mark - !! 어떤 변수 앞에 !!를 붙이면 그것에 대한 true, false를 반환 !!0 // false !!'' // false !!undefined // false !!null // false !!1 // true !!..

iframe 내에서 alert, confirm, prompt 띄울 경우 오류가 발생 오류 내용: A different origin subframe tried to create a JavaScript dialog. This is no longer allowed and was blocked. See https://www.chromestatus.com/feature/5148698084376576 for more details. 현재 크롬 같은 버전이라도 서브 버전에 따라 누구는 재현되고 안되고 할 수 있음 하지만 기능 제거는 확정된 사안인 만큼 가급적 선행 조치 필요함 Remove alert(), confirm(), and prompt for cross origin iframes - Chrome Platfor..

제이쿼리에서 엘리먼트에 정의된 이벤트를 확인 할 수 있습니다. var events = $._data(element, 'events'); 아래 코드를 실행하면 해당 버튼에 어떤 이벤트가 있는지 확인할 수 있습니다. This is demo text $("#demo").click(function() { console.log("Does event exists? - " + hasEvents); }); var events = $._data($("#demo")[0], "events"); var hasEvents = (events != null);

자바스크립트를 사용하여 특정 요소가 DOM에 있는지 확인하는 방법입니다. querySelector는 특정 요소를 찾을 수 없을 때 null값을 리턴 합니다. var noElem = document.querySelector('.elem'); console.log(elem); // Logs "null" // 해당하는 요소가 페이지에 있으면 if (document.querySelector('.elem') !== null) { console.log('The element exists'); } else { console.log('The element does not exists'); } querySelectorAll은 일치하는 모든 요소의 NodeList를 반환합니다. NodeList는 배엵 객체이므로, 반환된 ..

HTML5에서는 해당 요소에 사용자가 임의로 지정한 속성값을 활용할 수 있습니다. 이를 커스텀 데이터 속성(custom data attributes) 이라고 부릅니다. data-* 를 앞에 붙여서 속성명을 지정하고 값을 부여하면 됩니다. Microsoft Google Facebook 자바스크립트에서 커스텀 데이터 접근하기 dataset 객체를 통해 data 속성 값을 가져오기 위해서는 속성 이름의 data-뒷 부분을 사용합니다. var elements = document.querySelectorAll('ul > li'); elements.forEach(function(elem) { console.log(elem.dataset.company); }); jQuery에서 접근하기 jQuery에서는 data()..

자바스크립트에서 배열의 요소 앞에 추가(Prepend)하거나 뒤에 추가(Append)하는 방법입니다. 대부분 배열 마지막에 요소를 추가하는 방법을 알고 있지만 처음에 요소를 추가하는 방법을 잘 모릅니다. 또 한 번에 여러 요소를 추가하는 방법을 알아 봅시다. const fruits = ["🍎", "🍌", "🍒"]; // push로 요소를 마지막에 추가 fruits.push("🍉"); console.log(fruits); // ["🍎", "🍌", "🍒", "🍉"]; // unshift로 요소를 처음에 추가 fruits.unshift("🍆"); console.log(fruits); // ["🍆", "🍎", "🍌", "🍒", "🍉"]; // 한 번에 여러 항목을 추가 fruits.push("🍍", "🍊"); ..

javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용합니다. 그러나 숫자는 생각대로 정렬되지 않습니다. 자바스크립트에서 배열을 정렬 할 때 기본적으로 요소를 문자열로 변환합니다. 그런 다음 UTF-16 코드 포인트를 비교하여 요소를 정렬합니다. 숫자의 경우 예기치 않은 순서가 발생할 수 있습니다. 따라서 기본 동작을 변경하고 Array.sort메서드에 함수를 전달합니다. 항상 한 번에 두 요소를 비교하여 작동합니다. 결과가 0보다 작으면 a먼저 표시됩니다. 결과가 0보다 크면 b먼저 표시됩니다. 원본 배열인 numbers가 정렬이 되고, 리턴하는 값 또한 원본 배열인 numbers을 가리키고 있음에 유의하세요. const numbers = [15, 52, 23, 11, 9]; // 오..

자바스크립트에서 최소 또는 최대 값을 찾아야하는 경우 아마도 Math.min및 Math.max을 사용할 수 있습니다. 전개연산자 spread operator(...)를 이용하면 전체 배열에서 최소값과 최대 값을 쉽게 확인할 수 있습니다. const priceHistory = [450, 500, 330, 600, 910]; // 최소값 const minimumPrice = Math.min(...priceHistory); console.log(minimumPrice); // 330 // 최대값 const maximumPrice = Math.max(...priceHistory); console.log(maximumPrice); // 910

every, some 메서드는 배열을 순회하면서 배열의 요소들이 특정 조건을 만족하는지 검사하는 메서드입니다. every, some 메서드는 반환 값이 결정되면 배열 순회를 중단 합니다. Array.some - 특정 조건과 일치하는 요소 Array.every - 모든 요소가 있는지 확인 every, some 메서드의 차이는 every는 배열의 모든 값이 조건을 만족해야, some은 일부만 만족해도 true를 return 합니다. every() callback함수가 false을 반환하는 요소를 찾을 때까지 배열에 있는 각 요소에 대해 한 번씩 callback 함수 실행 해당하는 요소를 발견한 경우 every는 즉시 false를 반환 빈 배열에서 호출하면 true 반환 let data = [1, 3, 5] ..

객체 { 'a': 1, 'b':2 } 있을 때 key-value를 뒤집어서 { 1: 'a', 2: 'b' } 이렇게 반대로 만드는 방법 입니다. let cities = { Lyon: 'France', Berlin: 'Germany', Paris: 'France' }; let countries = Object.keys(cities).reduce((acc, k) => { let country = cities[k]; acc[country] = [...(acc[country] || []), k]; return acc; }, {}); // 한줄로 // let countries = Object.keys(cities).reduce((acc, k) => (acc[cities[k]] = [...(acc[cities[k]..

자바스크립트 데이터를 다룰 때 객체에서 키에 해당하는 값이 몇 개 있는지 빈도수 확인하여 새로운 객체로 반환합니다. 아래의 경우 사용자들의 연령때가 어떻게 되는지 확인 할 수 있는 코드 입니다. let users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; let groupByAge = users.reduce((acc, it) => ({ ...acc, [it.age]..

배열 합집합 전개연산자 spread operator(...)와 Set을 사용하여 두 배열을 병합하고 모든 중복된 요소를 제거 합니다. let arrA = [1, 4, 3, 2]; let arrB = [5, 2, 6, 7, 1]; [...new Set([...arrA, ...arrB])]; // returns [1, 4, 3, 2, 5, 6, 7] 배열 교집합 filter와 includes을 사용하여 두 배열에 포함된 동일한 요소를 확인 할 수 있습니다. includes() 함수는 배열이 특정값을 포함하고 있는지의 여부를 boolean 값으로 반환합니다. let arrA = [1, 4, 3, 2]; let arrB = [5, 2, 6, 7, 1]; arrA.filter(it => arrB.includes(..

간단한 검색 (case-sensitive) filter() 함수는 인자로 제공되는 함수에 의해 test 를 통과한 모든 요소를 새로운 array로 만들어 줍니다. let users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; let res = users.filter(it => it.name.includes('oli')); console.log(res); // [] l..

Set() 자바스크립트에서 Set 객체를 이용하면 간단하게 중복없는 데이터를 표현할 수 있습니다. 중복값이 있는 배열을 Set 객체로 만들어서 중복을 제거한 후, Spread Operator(전개연산자)를 사용하여 Set 객체를 다시 배열로 변환합니다. let arr = [3, 1, 3, 5, 2, 4, 4, 4]; let uniqueValues = [...new Set(arr)]; console.log(uniqueValues); // [3, 1, 5, 2, 4] reduce() Array.includes(value) : value가 Array배열에 존재하는지 판단해 true, false를 반환합니다. let arr = [3, 1, 3, 5, 2, 4, 4, 4]; arr.reduce((acc,curr)..

matchMedia 자바스크립트에도 CSS의 미디어쿼리(Media Queries)와 같은 matchMedia 메서드가 존재합니다. CSS에서 사용하는 미디어쿼리 조건을 자바스크립트에서 그대로 사용할 수 있습니다. if (matchMedia("screen and (min-width: 1024px)").matches) { // 1024px 이상에서 사용할 스크립트 } else { // 1024px 미만에서 사용할 스크립트 } Breakpoint에 도달했을 때 처리 CSS처럼 사용자가 화면을 리사이징할 때 미디어 쿼리의 Breakpoint에 도달할 때 처리해야되는 경우가 있습니다. document view의 크기가 변경될 때 발생하는 resize 이벤트로 처리할수도 있겠지만 좀 더 우아한 방법으로 처리할 수 ..

브라우저의 현재 크기(width, height)를 구하고 싶은 경우 사용할 수 있는 방법들입니다. var size = { width: window.innerWidth || document.body.clientWidth, height: window.innerHeight || document.body.clientHeight }; screen 객체로 화면 크기 구하기 screen은 브라우저 정보를 가져오는 객체입니다. screen 객체의 속성은 아래와 같습니다. screen.width // 화면(모니터 해상도)의 너비 screen.availWidth // 모니터 화면의 작업 표시줄을 제외한 너비 screen.height // 화면(모니터 해상도)의 높이 screen.availHeight // 모니터 화면의 작..

아이프레임은 기본적으로 로드를 호스트하는 페이지에 정적인 높이값을 지니게 됩니다. 로드되는 페이지의 높이에 맞춰 값을 조정하기 위해서는 별도의 자바스크립트 코드가 필요합니다. Same-Domain Iframes 동일한 도메인 iframe의 경우 상위 페이지에서만 코드 변경이 필요합니다. iframe 페이지에는 코드 변경이 필요하지 않습니다. iframe이 로드된 후 contentDocument.body.scrollHeight 속성은 전체 높이를 가져 옵니다. contentDocument.body.scrollWidth 속성은 전체 넓이를 가져 옵니다. Cross-Domain Iframes 크로스 도메인 iframe의 경우 iframe과 상위 페이지 모두 코드를 수정 해야합니다. iframe이 로드된 후 사..

json 형식으로 데이터를 불러왔다거나 혹은 직접 배열안의 객체 구조를 만들어 데이터화 하여 사용할 때 특정 값을 가진 객체를 찾아서 그 객체가 가진 다른 값을 가져올 때 사용합니다. var people = [ { "name": "bob", "dinner": "pizza" }, { "name": "john", "dinner": "sushi" }, { "name": "larry", "dinner": "hummus" } ]; 이런 식으로 배열안에 객체가 있다면 여기서 dinner가 sushi 인 사람의 이름을 가져올 때는 아래와 같습니다. var men = people.filter(function (person) { return person.dinner == "sushi" }); console.log(men..

다음과 같은 방법을 통해 자바스크립트로 문자열의 필요한 값을 추출할 수 있습니다. var myString1 = "Hello,World" 문자열의 특정위치를 찾기위한 Hello,World의 위치값을 표기하였습니다. 0H1e2l3l4o5,6W7o8r9l10d11 // 1. substring([시작위치], [종료위치]); var myString1 = "Hello,World" myString1 = myString1.substring(0,5); console.log(myString1); // output Hello // 2. substr([시작위치], [길이]); var myString1 = "Hello,World" myString1 = myString1.substr(6,5) console.log(myString..

아래 코드와 같이 정규식을 사용하면 마지막 쉼표와 그 뒤 공백을 제거 할 수 있습니다. var str = "This, is, test,"; str = str.replace(/,\s*$/, ""); // output "this, is , test" / 정규 표현식 시작과 끝 , 쉼표 일치 \s 공백문자 * 0 이상인 경우 $ 문자열의 끝을 의미 마지막 문자를 자르는 방법 var strNumber = "3623,3635,"; strNumber.substring(0, strNumber.length - 1); // slice strNumber.slice(0,-1); // map var arrData = strNumber.split(','); $.map(arrData, function(value, i) { ret..

async await을 활용하여 반복문에서 비동기 처리를 위해 비동기 완료될 때까지 기다리고 다음 코드로 실행되는 과정입니다. const delay = () => { const randomDelay = Math.floor(Math.random() * 4) * 100 return new Promise(resolve => setTimeout(resolve, randomDelay)) } const list = [1, 2, 3, 4, 5] list.foreach(async data => { await delay().then(() => console.log(data)) }) forEach는 반복문 전체가 종료되는 것에 대한 결과를 기다려주지 않습니다. callback이 동기적으로 실행되면 좋겠지만 forEach는..

video 기능 감지 function supports_video() { return !!document.crealeElement('video').canPlayType; } 비디오 포맷은 Boolean으로 return하지 않고 다음과 같은 문자열을 return 합니다. "probably" : 브라우저는 이 포맷을 재생할 수 있다고 거의 확신합니다. "maybe" : 브라우저는 아마도 이 포맷을 재생할 수 있다고 생각됩니다. " ": 브라우저는 이 포맷을 재생할 수 없다고 확신합니다. 크롬에서 Video태그에 바로 m3u8 포맷이 재생되지 않는 경우가 발생될 수 있습니다. 원인은 크롬 및 기타 디바이스 환경에서 HLS를 완전히 지원하지 않기 때문에 발생합니다. 이 경우 HLS를 지원하는 iOS, Safari..

간혹 윈도우 업데이트 후 터미널에서 npm 명령어를 입력했을 때, 이미 모듈이 설치가 되어 있음에도 불구하고 npm 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 또는 gulp 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라고 오류가 뜨게 됩니다. 이 때 해결 할 수 있는 방법입니다. 내 PC에서 오른쪽 클릭 -> 속성 -> 고급 시스템 설정 환경 변수에 들어가서 시스템 변수 중 PATH 변수를 찾아서 아래 경로를 추가해주면 됩니다. C:\Users\USERNAME\AppData\Roaming\npm\ 여기서 USERNAME에 본인의 사용자 이름으로 바꿔서 입력해주면 됩니다. 이제 다시 해당 명령어를 사용할 수 있게 됩니다.

Youtube 같은 웹사이트는 사용자가 웹페이지를 최소화했거나 다른 탭을 보고 있는지를 체크한 후 재생 중인 동영상의 화질을 낮추거나, 화면은 내보내지 않고 음성만 재생하거나, 자동 재생이 되지 않도록 막아 데이터 전송량을 줄이는 동작을 합니다. visibilitychange 이벤트에 리스너로 등록된 함수는 웹페이지의 visibility 상태가 변하면, 즉 사용자가 탭을 다른 탭으로 변경하거나 원래 탭으로 복귀하는 등의 행동을 취하면 실행되게 됩니다. Page Visibility API는 웹페이지가 visible 또는 hidden 상태를 확인하는 기능을 제공합니다. function handleVisibilityChange() { if(document.hidden) { // the page is hidde..

배열 메서드 중 reduce가 있는데 이는 다른 메서드 보다 더 까다로워서 따로 작성을 하였다. reduce 란? map이 배열의 각 요소를 변형한다면 reduce는 배열 자체를 변형한다. reduce라는 이름은 이 메서드가 보통 배열을 값 하나로 줄이는 데 쓰이기 때문에 붙었다. MDN 으로 reduce 더 자세히 알아보기 reduce를 시각적으로 확인해 보기 array.reduce( callback( accumulator, currentValue [, index [, array ] ])[, initialValue ] ) 현재값 : currentValue (cur , val) 누적값 : acc 현재 인덱스 : inx 원본 배열 : src 대표적으로 아래 코드의 동작을 보다 편리하게 작성하기 위해서 re..