잡다구리

URL encode/decode 하는 이유? URL에는 특수문자, 띄어쓰기 등 일부 문자를 그대로 쓸 수 가없다. 이를 해결하기 위해 문자를 URL에서는 인식할 수 있는 문자 조합으로만 변형하는 encoding을 해야 한다. 반대로 원본 문자로 확인하려면 URL decoding을 하면 된다. encode/decode 실제 예시 사용하고 싶은 URL의 특수문자 등의 파라미터를 아래처럼 변형해서 사용한다. 이걸 decoding 하면 다시 위의 원래 문자로 볼 수 있다. 자바스크립트 API 예제 자바스크립트에서 공식 지원해주는 API이다. 그렇기 때문에 Vanilla js 뿐만 아니라 React, Node js에서 모두 사용 가능하다. 또한 따로 import나 require 할 필요 없다. encodeURI ..

🎈includes 배열이 특정 element를 포함하고 있는지 판별한다. return 값은 있으면 true, 없으면 false를 반환 한다. const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3));// true console.log(arr.includes(10));// false const startIndex = 6; console.log(arr.includes(3, startIndex));// false (시작위치를 정할 수 있다.) 🎈indexOf 특정 element를 첫번째 인덱스 값을 return한다. 존재하지 않으면 -1을 return 한다. const arr = [1, 2, 3, 4, 5]; console.log(arr.indexOf(3));//..

💡목표 자바스크립트에는 반복문을 사용하기 위한 방법이 여러가지가 있다. 사용방법을 예시 코드를 보며 이해해보자. 각 특징을 이해하고, 어느 상황에 사용하는지에 대해서 알아보자. 🎈일반 for loop 일반적인 반복문 방법으로 단순하고 속도가 가장 빠르다. const arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 🎈for in object의 key의 이름을 알 수 있으며, object같이 index로 되어 있지 않아 일반 반복문을 사용할 수 없을때 key의 이름을 이용하여 사용한다. let obj = { name: "이름", age: 10, address: "서울" }; for (let key in obj) { ..

🎞Javascript로 유튜브 영상 광고 제거 if (document.querySelectorAll('.ad-showing').length > 0) { const video = document.querySelector('video'); if (video) { video.currentTime = video.duration; } } 🍳개발자 도구 열기 먼저 유튜브 광고 화면이 나온다면 윈도우 크롬기준으로 F12(또는 'ctrl+shift+i')키로 개발자 도구를 열어주자. 개발자 도구 화면이 아래와 같이 나온다면 'Console' 을 선택한다. 🚀Javascipt 코드 입력 위에 적어둔 코드를 입력 후 엔터를 툭 쳐주자. 그러면 유튜브 광고가 주르륵 넘어가는걸 볼 수 있다. 위 코드는 광고가 한번만 제거된다..

🔎일반적인 Element 검색 DOM에서 특정 class, id, tag name, name 을 검색하기 위해서 아래와 같은 API들을 사용할 것이다. document.querySelector('셀렉터') document.querySelectorAll('셀렉터') document.getElementById('아이디') document.getElementsByClassName('클래스명') document.getElementsByName('이름') 🔍포함 단어 검색 특정 단어를 검색하는 것이 아니라 특정 단어가 포함된 요소를 검색하기 위해서는 아래와 같이 사용한다. 어디든 포함되었는지 검색(*) document.querySelectorAll('[class*=포함될단어]') document.querySele..

[JS]비동기 처리1-Callback-자바스크립트/Javascript 어떠한 함수들이 시간이 걸리는 연산(또는 작업)일 때 그냥 순서대로 호출하는 식의 코드를 작성하게 되면, 원하는 순서대로 처리가 되지 않는것을 경험 할 수 있다. 😅실행할때 마다 실행순서 jaegeun.tistory.com [JS]비동기 처리2-Promise-자바스크립트/Javascript 🤓Callback 함수를 Promise로 변경 '비동기 처리 1 - Callback'(https://jaegeun.tistory.com/22)의 방법을 Promise 방법으로 바꾸는 코드는 다음과 같다. function func1() { return new Promise((resolve, rejec.. jaegeun.tistory.com 🤓 Prom..

자바스크립트 비동기 처리 Callback 어떠한 함수들이 시간이 걸리는 연산(또는 작업)일 때 그냥 순서대로 호출하는 식의 코드를 작성하게 되면, 원하는 순서대로 처리가 되지 않는것을 경험할 수 있다. 😅 실행할 때마다 실행 순서 jaegeun.tistory.com 🤓 Callback 함수를 Promise로 변경 '비동기 처리 Callback'의 방법을 Promise 방법으로 바꾸는 코드는 다음과 같다. function func1() { return new Promise((resolve, reject) => { setTimeout(()=>{ console.log('1'); resolve(); }, Math.random()*100); }); } function func2() { return new Prom..

어떠한 함수들이 시간이 걸리는 연산(또는 작업)일 때 그냥 순서대로 호출하는 식의 코드를 작성하게 되면, 원하는 순서대로 처리가 되지 않는것을 경험할 수 있다. 😅 실행할 때마다 실행 순서가 달라요! 아래 코드는 각 함수들의 실행 시간을 Math.random() 함수를 이용하여 랜덤하게 실행되도록 했다. func1(), func2(), func3() 순서대로 호출했지만 실행할 때마다 호출되는 순서가 다른것을 볼 수 있다. * Math.random() : 0~1 사이의 소수 값을 반환해주는 함수 function func1() { setTimeout(()=>{ console.log('1'); }, Math.random()*100); } function func2() { setTimeout(()=>{ cons..

자바스크립트는 절차 지향적 언어들과 달리 으로 동기화되어 실행되지 않는다. 시간이 걸리는 작업은 바로 실행되지 않고 콜백 큐에 넣어두고 다음 코드로 넘어가게 된다. 문제상황 그래서 아래와 같이 배열 요소마다 시간이 걸리는 연산(작업)은 각 연산이 끝날때 까지 기다리지 않고, 콜백 큐에 넣어 두고 넘어간다. 그렇기 때문에 아래와 같이 코드를 짜면, 연산이 끝나지 않은 값이 반환된것을 볼 수 있다. function work() { let arr = [1, 2, 3, 4, 5, 6]; arr.forEach(element=>{ setTimeout(()=>{ element *= 10; }, 100); }); return arr; } console.log("work return: ", work()); 해결 방법 그..