You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🚀 마우스 wheel & scroll 이벤트 멈춤 감지하기
마우스 휠 & 스크롤 멈춤 감지 방법 사용자가 문서를 스크롤 하면 이벤트를 발생시키는데, 스크롤을 멈추면 이를 감지하여 스크립트 처리를 하고 싶은 상황이 있을 것이다. 마우스 스크롤을 감지하는 이벤트는 두가지가 있는데, 문서를 스크롤하면 발생하는 'scroll' 이벤트와 그냥 마우스 가운데 휠 버튼을 내리면 발생하는 'wheel' 이벤트가 있다. 이 이벤트들에 setTimeout() 메서드와 조합해서 종단 지점을 감지하는 로직을 구현 할수가 있다. let scrolling; // setTimeout() 메서드를 할당하는 전역 변수 window.addEventListener('scroll', (e) => { if (!scrolling) { console.log('start scrolling!'); } //..
🚀 자바스크립트 코드 실행 시간 측정 3가지 방법
console.time() 사용 자바스크립트에는 console.log() 외에도 여러가지 console 메소드들이 있다. 그중에 console.time() 과 console.timeEnd() 는 자바스크립트 코드 실행을 측정하는 함께 쌍을 이루는 함수이다. console.time(); // 측정 시작 for (let i = 0, sum = 0; i < 100000; i++) { sum += i; } console.timeEnd(); // 측정 종료 만일 측정하고자 하는 코드 부분이 여러가지 이면, console.time() 의 매개변수로 문자열을 주면, 어떠한 코드를 측정했는지 네이밍을 지정해줄 수 있다. console.time('반복문 한번 시간 측정'); // 측정 시작 console.time('반복..
🚀 자바스크립트 배열 동등 비교 방법
자바스크립트 배열 동등 비교 숫자나 문자열 비교할때는 == 이나 === 연산자를 이용하면 되지만, 배열이나 객체를 비교할때는 불가능하다. 왜냐하면 reference 타입으로써 값이 비교 되는 것이 아닌 주소값이 비교되기 때문이다. const a = [1, 2, 3]; const b = [1, 2, 3]; // 배열 구성을 비교하는게 아닌 배열 메모리 주소값 비교가 된다 a == b; // false a === b; // false 따라서 배열 구성 요소를 동등 비교하기 위해서는 직접 하드 코딩하여 비교하는 수밖에 없다. 여러가지 방법이 있는데 몇가지 사례를 소개해 본다. JSON.stringify JSON.stringify() 메소드로 배열을 직렬화(문자열) 하여 문자열 비교 const equals = ..
🚀 객체로 구성된 배열 정렬 방법
자바스크립트 객체 배열 정렬 배열의 객체 요소들을 정렬하기 위해서는 객체 내의 속성을 키(key)로서 잡고 기준으로 정렬할지를 지정해야 한다. const user = [ { name: '홍길동', age: 40 }, { name: '임꺽정', age: 12 }, { name: '주몽', age: 23 }, { name: '척준경', age: 88 }, ]; 다음 user 라는 객체 배열을 정렬할 것인데, 각 원소의 객체 속성들을 보면 age 라는 넘버 값과 name이라는 스트링값이 있다. 이 age 와 name 속성을 기준으로 각각 나이순, 이름순으로 객체들을 정렬할 수 가 있다. // 나이순 오름차순 const result1 = user.sort((a, b) => a.age - b.age); conso..
🚀 배열을 문자열로 변환하는 3가지 방법
자바스크립트 배열 → 문자열 변환 자바스크립트 배열 타입을 mysql 같이 외부에 저장하기 위해서는 따로 배열 자료형을 지원하지 않는한 문자열로 변환시켜 삽입하는 방법을 취해야 한다. JSON.stringfy() 사용 보통 자바스크립트 객체를 문자열로 변환할때 사용하는 api지만, 사실 자바스크립트 배열도 자바스크립트 객체의 일종이라 통한다. const arr = ['Apple', 'Banana', 'Orange']; JSON.stringify(arr); // '["Apple","Banana","Orange"]' join() 사용 배열의 원소들을 구분자(separator)로 나열된 문자열로 변환해서 저장하는 방법도 존재한다. const arr = ['Apple', 'Banana', 'Orange']; c..
🚀 자바스크립트 16진수, 10진수, 8진수, 2진수 변환
자바스크립트 진수 변환하기 자바스크립트네선 toString() 과 parseInt() 를 이용해 손쉽게 숫자 진수들을 변환 할 수 있다. 10진수 ➜ 16진수 var dec = 123; var hex = dec.toString(16); // === "7b" 10진수 ➜ 2진수 var dec = 123; var bin = dec.toString(2); // === "1111011" 16진수 ➜ 10진수 var hex = "7b"; var dec = parseInt(hex, 16); // === "123" 16진수 ➜ 2진수 10진수로 바꿨다가 다시 2진수로 바꾼다 var hex = "7b"; var bin = parseInt(hex, 16).toString(2); // === "1111011" 2진수 ➜ ..
![🚀 console.log의 [ Object ] 를 객체로 출력하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKFbzE%2FbtrAtafizGS%2FeVIrzb8CDma1hZ2DlUX2G0%2Fimg.png)
🚀 console.log의 [ Object ] 를 객체로 출력하기
콘솔 로그 [object Object] 출력하기 console.log 혹은 alert 로 이중, 삼중 객체로된 데이터를 응답받아 출력해보면 다음과 같이 [ Object ] 스트링으로 출력될 것이다. { eventVersion: '2.1', eventSource: 'aws:s3', awsRegion: 'ap-northeast-2', eventTime: '2022-04-25T10:21:51.904Z', eventName: 'ObjectCreated:Put', userIdentity: [Object], requestParameters: [Object], responseElements: [Object], s3: [Object] } 브라우저 콘솔탭에서는 객체 안의 객체를 볼수 있는 기능이 내장되어 있어 안의 객체..
🚀 이벤트 핸들러 등록 되어있는지 검사 방법
자바스크립트 이벤트 핸들러 등록 체크 만일 addEventListener 를 버튼을 누르거나 사용자 행동에 따라 동적으로 이벤트를 등록하는 로직을 사용할 경우, 처리를 잘못 할 경우 중복으로 이벤트 핸들러를 여러번 바인딩되어 이벤트 콜백이 여러번 발생되는 현상이 생길 수 있다. 이럴때 조건문으로 해당 엘리먼트 요소가 특정 이벤트 바인딩이 되어있는지 검사를 하고 분기를 할 필요가 있는데, 구글링을 해보면 getEventListeners() 라는 api 라는게 나온다. 하지만 getEventListeners() 는 크롬 개발자 도구 콘솔창 용 api지 자바스크립트 표준 메소드가 아니기 때문에 스크립트에서 사용할수가 없다. [ERROR] ⚠️ ReferenceError: getEventListeners is ..
🚀 모듈 분리하면 DOMContentLoaded 작동 안되는 현상 해결
DOMContentLoaded 이벤트 외부 로드 html문서에 인라인으로 DomcontentLoaded 이벤트를 걸어놓으면 잘 작동한다. 하지만 자바스크립트 부분을 외부 모듈로 빼내면 이상하게 제대로 작동이 안되는 현상을 경험할 수 있을 것이다. 이럴땐 따로 document의 readyState를 검사해서 콜백을 실행해주는 식의 처리를 외부 모듈 자바스크립트에서 적용해 주어야 한다. // 기존의 인라인 DOMContentLoaded 이벤트 리스너 코드 window.addEventListener('DOMContentLoaded' function () { // 코드내용 }) var DOMReady = function(callback) { document.readyState === "interactive" |..
🚀 스크롤 내려서 특정 영역 감지하기
스크롤 내려서 특정 영역 감지하기 제이쿼리를 이용해 스크롤을 내리면 이를 감지해서 이벤트를 한번 발생시키는 스크립트이다. 스크롤 내려서 파랑 영역이 나올때까지 내려보세요 function checkVisible( element, check = 'above' ) { const viewportHeight = $(window).height(); // Viewport Height const scrolltop = $(window).scrollTop(); // Scroll Top const y = $(element).offset().top; const elementHeight = $(element).height(); // 반드시 요소가 화면에 보여야 할경우 if (check == "visible") return ((..
🚀 자바스크립트 reduce() 에 break 거는 법
How to early break reduce() 자바스크립트의 reduce() 루프 고차함수를 중간에 break하는 방법이다. 일반적인 break문법은 고차함수에는 지원하지 않기 때문에, reduce의 반복조건을 범위밖 값으로 설정하는 식으로 끊어 내는 수 밖에 없다. const array = ['9', '91', '95', '96', '99']; const x = array .slice(0) // array를 복사한다. slice(0)하면 그대로 복사된다. .reduce((acc, curr, i, arr) => { if (i === 2) arr.splice(1); // 인덱스 1 이후의 모든 요소를 삭제한다. 따라서 더이상 순회할 요소가 없어서 break되는 원리이다 // 다만 기존 배열이 삭제될수 ..
🚀 async 함수 병렬 처리하여 최적화 하기
async 함수 병렬 처리 최적화 되지 않는 코드 getApple()과 getBanana() 라는 비동기 함수가 있고, 각 함수들은 1초를 기다리고 실행된다. 다음 코드는 await을 두번을 써서 2초를 기다리게 된다. 만일, getApple()과 getBanana() 비동기 함수가 서로 연관이 없다고 가정을 할때, 시간 낭비인 셈이다. function delay(){ return new Promise( (resolve, reject) => { setTimeout(() => resolve(), 1000); }) } async function getApple(){ await delay(); return "apple"; } async function getBanana(){ await delay(); retu..
