진행 중인 프로젝트에서 하단으로 이동하는 버튼이 필요해 알아보았다. 하단 버튼은 페이지 총 Height인 document.body.scrollHeight를 scrollTo()함수의 top값에 넣어 주면된다. ⭐ scroll이 이루어진 영역을 기준으로 scrollTo 함수를 실행해야 작동한다.아래 코드는 스크롤이 생기는 window영역으로 기준을 잡아 window.scrollTo() 를 실행시킨다.const Area = document.querySelector(".area");const moveBtn = document.querySelector(".down-btn");moveBtn.addEventListener('click', () => { window.scrollTo({ top: document...

자바스크립트를 활용한 계산, 숫자 관련 method 중 개인적으로 헷갈리는 위주로 정리했다.자바스크립트 사칙연산나눗셈에 대한 나머지 : %• 나눈 나머지의 값을 반환한다.let data = 5 % 2 // 결과 : data -> 1 자바스크립트 Math 메소드거듭제곱 연산Math.pow(number, number)거듭 제곱 연산자(**)첫번째 인수를 밑(base), 두번째 인수를 지수(exponent)로하여 거듭제곱을 반환한다.// Math.pow() 메서드Math.pow(2, 8); // 256// 거듭제곱 연산자(**)console.log(3 ** 3); // 27  Math.sqrt()인수의 제곱근을 반환한다.Math.sqrt(4); // 2Math.sqrt(16); // 4  Math.ra..

프로젝트를 진행하다 보면 데이터를 시간 순으로 정렬 할 때가 있다.일반적으로 날짜, 시간에 따라 내림차 순 오름차 순으로 데이터를 정렬한다. 테스트 데이터const data = [ { user: 1, createDate: '2024-03-10' }, { user: 2, createDate: '2024-02-11' }, { user: 3, createDate: '2024-02-15 }, { user: 4, createDate: '2024-03-09 }, { user: 5, createDate: '2024-03-20 },] 오름차 순과거에서 최신 날짜 순으로new Date()를 사용하여 문자열로 입력된 날짜를 날짜 형태로 변환한 후..

현재 주소에 따라 UI가 변경되는 등 다양한 이유로 사용되어 javascript로 현재 페이지 URL 가져오는 방법에 대해 정리해 보았다.window.location (Location 객체)현재 페이지의 URL을 알기 위해서는 window.location 속성을 사용해야 한다.window.location 속성에 접근하면 Location 객체에 접근할 수 있어 객체의 속성들을 사용해서 현재 페이지의 URL 정보를 알아낼 수 있다. 예시 URL = https://minsunblog.com/blog/2fe9081b-ab37-4c77-a6b6-c319966cc912 window.location.href현재 페이지의 전체 href (URL) 반환한다.window.location.href = "https://min..

메모리 누수란?부주의 또는 일부 프로그램 오류로 인해 더 이상 사용되지 않는 메모리를 해제하지 못하는 것이다.자바스크립트의 메모리 관리가비지 콜렉팅 언어(garbage collected languages) 인 자바스크립트는 이전에 할당된 메모리 영역이 응용프로그램의 다른부분에서 여전히 다시 참조될 수 있는지 주기적으로 확인하여 개발자가 메모리를 관리하는데 도움을 준다.앞서 말한 메모리 누수의 정의에 따르면, 변수 또는 데이터가 더 필요하지 않을 때 이들은 가비지 변수 또는 가비지 데이터가 된다. 만약 그런 데이터가 메모리에 계속 쌓인다면, 결국에는 메모리 사용량을 초과하게 되어 이 시점에서 가비지 데이터를 정리 해야 한다. 주요 자바스크립트 메모리 누수 원인들의도치 않은 전역 변수전역 변수는 항상 루트에..

nodenode에는 element, text, comment 등 여러 항목이 포함되어 있다부모 nodeparentNode : 부모 노드 중 모든 노드를 반환한다.자식 nodechildNodes : 자식 노드 목록을 NodeList 형태로 반환한다.firstChild : 자식 노드 중, 첫 번째 자식 노드를 반환한다.lastChild : 자식 노드 중, 마지막 자식 노드를 반환한다.형제 nodepreviousSibling : 같은 레벨의 노드 중, 이전 노드를 반환한다.nextSibling : 같은 레벨의 노드 중, 다음 노드를 반환한다.See the Pen node by pminsun (@pminsun) on CodePen. elementelement는 여러 node 타입 중 한 종류로 , , 와 같은..

DOMDOM은 HTML의 태그(요소)들을 웹 브라우저의 메모리에 올려서 자바스크립트로 사용하기 위해 만들어진 웹 문서이다. 웹브라우저에서 HTML 파일을 받아 DOM으로 만들면 자바스크립트를 통해 여러 가지 조작이 가능하다.DOM 접근 메서드html 요소들을 이용하기 위해서는 메서드를 통해 특정 태그에 접근해야 한다.document.getElementById("id명") : 해당 id명을 가진 요소 하나를 반환한다.document.querySelector("선택자") : 해당 선택 자를 만족하는 요소 하나를 반환다.document.getElementsByClassName("class명")[순서] : 해당 태그 명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환한다.document.querySele..

현재 블로그에서도 Promise.all()를 사용해 데이터를 불러오고 있어 공부 겸 정리해보았다.Promise.all()Promise.all() 은 여러 개의 Promise 들을 비동기적으로 실행하여 처리할 수 있다.Promise.all() 은 여러 비동기 태스크를 동시에(병렬적으로) 실행하고, 가장 마지막 태스크가 완료될 때 완료 상태의 프라미스를 반환합니다.Promise.all() 은 여러 개의 Promise 들 중 하나라도 reject 를 반환하거나 에러가 날 경우, 모든 Promise 들을 reject 시킨다.Promise.all 내부에서는 태스크들의 순서가 제어되지 않기 때문에, 태스크의 순서가 중요한 경우라면 절대로 Promise.all을 통해 관리해서는 안된다. const foodList =..

페이지 진입 시 특정 이벤트가 발생하길 원하는 경우가 있어 정리 해보았다. HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다.DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않는다.load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다.DOMContentLoaded 이벤트// only documentwindow.addEventListener("DOMContentLoaded", () => { alert..

자바스크립트의 reduce 함수는 배열의 요소를 하나로 줄이는(reduce) 작업을 수행하는 함수이다. reduce 함수로 배열의 각 요소를 순회하면서 누적된 값을 계산하고 최종 결과를 반환할 수 있다. reduce()문법 : arr.reduce(callback[, initialValue]) 파라미터callback function : 4가지의 인수를 가진다.callback함수의 반환 값은 accumulator에 할당되고 순회 중 계속 누적되어 최종적으로 하나의 값을 반환합니다.accumulator accumulator는 callback함수의 반환 값을 누적한다.currentValue 배열의 현재 요소index(Optional) - 배열의 현재 요소의 인덱스array(Optional) - 호출한 배열ini..