현재 주소에 따라 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..

407 포텐데이X클로바 스튜디오 해커톤에 참여해  HyperCLOVA X 를 활용한 AI 발표 준비 도우미, 또랑또랑을 출시했다.또랑또랑 : https://www.ttorang.site/프로젝트를 진행하면서 마주친 문제 중 하나인 text/event-stream 에 대해 정리해 보았다배경서비스 특성상 사용자 요청이 2~3천 자 이상이면 요청시간이 너무 길어져 Caused by: io.netty.handler.timeout.ReadTimeoutException: null 에러가 발생했습니다. 동기식 처리 방식으로 인해 모든 응답이 완료될 때까지 시간이 너무 길어져 에러가 발생하고 있다고 판단했습니다.이 문제를 해결하기 위해 백엔드에서 적은 리소스로 더 많은 요청을 효율적으로 처리할 수 있는 방식인 Flux..

메모리 누수란?부주의 또는 일부 프로그램 오류로 인해 더 이상 사용되지 않는 메모리를 해제하지 못하는 것이다.자바스크립트의 메모리 관리가비지 콜렉팅 언어(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..

input 태그의 type이 checkbox이고 여러 개 있을 경우 카테고리 중 하나만 선택이 되어야 할 때가 있다. 자바스크립트를 통해 해결할 수 있다. ⭐ 주요 포인트onclick 시 모든 체크바스를 해제하고 선택 한 체크박스 만 체크되도록 한다.구현 방법하나로 묶을 checkbox는 동일한 name 값을 설정한다.checkOnlyOne(this) : 체크박스를 하나만 선택하도록 하는 함수입니다. 이 함수는 체크박스가 클릭되었을 때 호출된다.const checkboxes = document.getElementsByName("cate") : name 속성이 "cate"인 모든 체크박스를 가져와서 변수 checkboxes에 할당한다.checkboxes.forEach((cb) => { cb.checked ..

스크롤이 이벤트 발생 위치에 도달했을 때 쉽게 애니메이션 효과를 줄 수 있는 스크롤 애니메이션 라이브러리인 'AOS' 사용 방법에 대해 정리해 보았다.AOS 라이브러리 공식 홈 AOS - Animate on scroll libraryAOS Animate On Scroll Library Scroll downmichalsnik.github.io AOS 설치head 태그 안에 안내해 준 CDN 소스인 CSS와 JS를 넣는다.AOS 라이브러리 사용을 위한 초기화 스크립트를 작성한다. ...  data-aos 옵션 속성data-aos : 사용할 애니메이션 효과 명data-aos-offset : 애니메이션 효과가 시작될 객체의 위치 설정data-aos-delay : 애니메이션 재생 대기 시간 설정(defau..