JavaScript
-
[JavaScript] 스크롤바 위치감지 이벤트JavaScript 2024. 4. 1. 17:27
스크롤바를 이동하여 최상단으로 이동하는 맨위로 버튼이나, 더보기 이벤트를 동작시키기 위해서는 현재 스크롤바의 위치를 감지하는 로직이 필요하다. 아래 그 예시를 기록으로 남긴다. document.body.addEventListener('scroll', () => { let isScrollDone = document.body.offsetHeight + document.body.scrollTop >= document.body.scrollHeight ? true : false; //총 스크롤 길이보다 스크롤바길이 + 스크롤이동길이가 같거나 크면 스크롤바는 최하단이다. if (document.body.scrollTop > 0) { if (isScrollDone) { this.moreshow = true; } el..
-
[JavaScript] 클로저JavaScript 2024. 1. 17. 10:24
클로저(Closure)는 함수와 해당 함수가 선언된 렉시컬 스코프(Lexical Scope) 사이의 관계를 나타내며, 함수가 정의될 때의 환경(스코프)을 기억하고, 함수가 호출될 때 그 환경을 사용할 수 있도록 하는 개념입니다. 주로 함수 내부에서 함수를 정의하고, 내부 함수가 외부 함수의 변수에 접근할 때 효과가 나타납니다. 이 성질을 통해 내부 함수로부터 외부함수의 변수에 접근할 수 있다. function outerFunc(x){ function innerFunc(y){ return x + y; } return innerFunc; } let closure = outerFunc(10); //외부함수의 변수 x를 10으로 설정 let result = closure(5); //내부함수의 변수 y를 5로 설..
-
[Javascript] 이중배열을 filter로 조건에 해당하는 것 추출하기JavaScript 2023. 10. 27. 09:14
js의 Array가 제공하는 함수 중 filter는 기존 array에서 filter의 조건에 해당하는 새로운 배열을 반환하는 함수이다. 이 filter를 사용할 때 조건을 디테일하게 조절하는 방법을 기록으로 남긴다. 예시) 이중배열 Array a에서 Array b의 값과 일치하는 항목들만 반환하는 방법 const a = [[1,2,3], [4,5,6], [7,8,9]]; const b = [[1,2,3], [4,5,3], [7,8,9]]; const c = a.filter(x => { let temp = x.join(''); let tempCnt = 0; b.forEach(e => { let temp2 = e.join(''); if(temp2 === temp) tempCnt ++; }) if(tempCn..
-
[JavaScript] node.js를 이용한 간단한 WEB SCRAPER만들기JavaScript 2023. 5. 13. 10:37
해당 소스 출처 : https://www.freecodecamp.org/news/web-scraping-in-javascript-with-puppeteer/ Web Scraping in JavaScript – How to Use Puppeteer to Scrape Web Pages Welcome to the world of web scraping! Have you ever needed data from a website but found it hard to access it in a structured format? This is where web scraping comes in. Using scripts, we can extract the data we need from a website for var..
-
[JavaScript] IndexedDB 기초사용법JavaScript 2023. 4. 16. 01:32
IndexedDB는 클라이언트단에서 간단하게 사용할 수 있는 내장DB로, 사용법을 기록으로 남기고자 한다. 1. 사용할 db생성 + 테이블 생성 const DBOpenRequest = window.indexedDB.open('testDB', 1); //db이름, 버전 DBOpenRequest.onerror = (event) => { console.log('Error loading database.'); }; DBOpenRequest.onsuccess = (event) => { console.log('Database initialised.'); db = DBOpenRequest.result; }; DBOpenRequest.onupgradeneeded = (event) => { db = event.targe..
-
[JavaScript] Sleep 기능 구현하기.JavaScript 2023. 2. 23. 22:50
늘 필요한 건 아니지만, 때때로 일정시간동안 기다린 후에 동작시켜야 하는 경우가 있다. 이때, 이 방법으로 Javascript상에서도 sleep기능과 유사한 방식으로 동작시킬 수 있다. async await 과 Promise를 활용한 방법이다. function sleep(ms){ if(!Number.isNaN(ms)){ console.log(`sleep ${ms} ms`); return new Promise(resolve => setTimeout(resolve, ms)); } else return new Promise(resolve => resolve()); } document.addEventListener("DOMContentLoaded", async function(){ console.log('시작 ..
-
[JavaScript] Object와 Map의 차이JavaScript 2023. 2. 13. 16:06
object는 키값으로 integer, strings, symbols만 올 수 있음. map은 어떤 타입이던 키로 사용할 수 있음 - array나 Object도 키로 사용 가능. map은 순서가 유지되지만, object는 유지되지 않는다. (확인 필요. 적절한 샘플이 떠오르지 않음) --------------------------------------------------------------------------------------------------------------- 사용법 차이 let map = new Map([[1, 2], [2, 3]]); //이 map의 경우 3을 키로 가지고 있나 확인할 땐, map.has(3); // false map.set(4, 5); // key ::: 4, v..