이번에 회사동기 블로그를 보다가 이게 뭐지 하는게 있어서 한번 정리해본다. contextmenu라는 이벤트인데, MDN에도 한글지원하는 문서가 없어서... 간단히 풀어 말하면 "우클릭 했을 때 생기는 메뉴를 사용자가 컨트롤 하겠다" 라는 이벤트이다. 어려운 건 없으니 바로 샘플코드를 보면서 배워보도록 하자~ 샘플코드 컨텍스트 메뉴 테스트 페이지 우클릭 메뉴 데스크탑 모니터 스피커 마우스 코드를 보면 간단하다. 전체화면을 대상으로 하니 document에 addEventListener를 통해 이벤트를 추가해주고 있다. 우클릭 했을 때 실행하고자 하는 이벤트(메뉴 표출)와, 아무곳이나 좌클릭하면 실행하고자 하는 이벤트(메뉴 숨김).. 그리고 스타일을 주는 정도... 어려운 건 없다. 꼭 메뉴가 아니라도, 우클..
오늘은 ES6에서 추가 된 문법인 전개구문( Spread Syntax )에 대해 알아보자. 배열이나 객체를 복사하여, 새로운 배열 및 객체를 생성 할 때 사용하는 문법으로, 연결 및 복사 할 때 유용하게 쓰이는 문법이다. 1. 배열에서의 Spread Syntax ----------------------------------------------------------------------------------------------------------------------------------- ES6에 추가된 문법으로 기존에는 각 배열을 합쳐 새로운 배열을 생성할 때 concat함수를 이용하고는 했는데, 전개구문이 나오면서 더 깔끔하게 구현할 수 있게 되었다. 1) 배열병합 2. 배열복사 2. 객체에서의..
기존 ES5에서의 indexOf와 비슷하지만, ES6에서 findIndex()라는 메서드를 지원하며 더욱 강력한 배열 검색 기능을 지원하게 되었다. 가장 큰 차이점은 indexOf이 특정값만 찾는 데 사용되었다면, findIndex()는 filter등의 다른 함수와 조합하여 더욱 복잡한 조건의 검색도 가능하다는 점이다. findIndex()이란? ----------------------------------------------------------------------------------------------------------------------------------- Array.prototype.findIndex() : 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니..
문자열이나, 배열에서 특정 값이 있는지 확인 할 때 Includes도 사용하는데, IndexOf도 자주 사용했었다. 정확히 말하면 IndexOf는 true/false를 리턴하는 게 아닌, 값의 위치값을 리턴해주는데.. 값이 없으면 -1을 값이 있으면 0이상을 반환해주기 때문에, -1이 리턴되면 false라고 판단하여 사용을 했었었다.. 함수의 용도는 다르지만, 그때그때 사용자의 방식에 따라 달라지는 것 같다.. IndexOf()란? ----------------------------------------------------------------------------------------------------------------------------------- 문자열 및 배열에 특정값이 있으면 해당 ..
javascript를 이용하다 보면 문자열 및 배열에서 특정값이 있는 지 확인 해야 할 때가 있는데, 그럴 때 Includes()를 활용할 수 있다. Includes()는 ES6에서 추가 된 메서드이다.. MDN에서는 Includes()를 2가지로 나누고 있다. 1. Array.prototype.includes() : 배열이 특정 문자열을 포함하고 있는 지 판별한다. 2. String.prototype.includes() : 하나의 문자열이 다른 문자열에 포함되어 있는 지 판별한다. 결국 판별해주는 함수이기 때문에 둘 다 리턴 되는 값은 true/false이다.. -------------------------------------------------------------------------------..
오늘은 Promise( '이하 프로미스' )에 대해서 정리를 해보려고 한다. Promise 자체가 정리할 게 많기 때문에 1. 프로미스 기본 사용법. 2. 프로미스를 활용한 실제 비동기 통신 이렇게 2단계로 나눠서 정리를 해보려 한다. 프로미스란 무엇일까? ============================================================================ 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미 나는 지금까지 제이쿼리를 활용한 Ajax를 사용해오다가 외부라이브러리를 활용한 Axios, ES6 내장함수인 Fetch..