잡다구리

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

📢이 글에서 구현할 내용 우리는 먼저 특정 URL을 Seed(시작 위치)로 입력받는다. 해당 URL의 HTML을 긁어온다. 긁어온 페이지에 있는 URL들을 수집한다.(URL은 중복 제거한다.) 깊이 우선 탐색 또는 넓이 우선 탐색 방법으로 "2."와 "3."을 반복한다. 시작 위치와 연관되지 않는다고 판단되면 더는 진행하지 않는다. 기어 다니는(크롤링) 행위를 다하고 나서 정리한 URL 테이블을 하나씩 방문해서 HTML 정보를 받아온다. 형태소 분석기를 사용해서 HTML에서 단어들을 추출하여 정리한다. 위 순서는 "웹 크롤러 만들기 0"에서 정리한 내용이다. 파란색으로 칠한 부분을 이번 글에서 구현해보자. 🧨프로젝트 초기 생성 $ mkdir crawler $ cd crawler $ npm init 모듈 ..

🎈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 코드 입력 위에 적어둔 코드를 입력 후 엔터를 툭 쳐주자. 그러면 유튜브 광고가 주르륵 넘어가는걸 볼 수 있다. 위 코드는 광고가 한번만 제거된다..

https://nodejs.org/dist/latest-v14.x/docs/api/readline.htm 자세한 내용은 위 링크의 공식 문서를 읽어보면서 적용하는게 좋습니다. 간단하게 적용할거면 아래 예제들을 적용해보세요. 🌈콘솔 입력 예제 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); rl.question("아무거나 입력하세요: ", (input) => { //TODO: 입력 받은 후 할 작업 작성 console.log(`입력한 내용 : ${input}`); rl.close();//close()를 호출하지 않으면 무한 반복 }..

🔎일반적인 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..