본문 바로가기

Languages/JavaScrit

(16)
[JavaScript] Math() ● Math() ● - 수학적인 연산을 위한 속성값과 메서드를 제공하는 객체 - Math는 생성자 함수가 아님 Math.max : 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반 console.log(Math.max(1, -1)); // 1 console.log(Math.max(1, -1, 5, 23, 17, -4)); // 23 let nums = [1, -1, 5, 23, 17, -4] console.log(Math.max.apply(null, -nums)); // 23 console.log(Math.max(...nums)); // 23 Math.min : 주어진 숫자들 중 가장 작은 값을 반 console.log(Math.min(1, -1)); // -1 console.log(Math.mi..
[JavaScript] Set() ● Set() ● - value만을 저장하며 중복을 허용하지 않는 Collection new Set() : 생성자 let set = new Set(); let num = new Set([1, 2, 3, 4, 5]); let str = new Set("Hello!"); console.log(str); console.log(set); // set(0) {} console.log(num); // set(5) {1, 2, 3, 4, 5} console.log(str); // set(5) {'H', 'e', 'l', 'o', '!'} 중복된 값은 제거 Set.size :이 집합의 (고요한) 요소의 개수 반 Set.add(value) : set 개체의 맨 뒤에 주어진 vaule의 새 요소를 추가 let set = ..
[JavaScript] Map( ) ● Map( ) ● - 다양한 자료형의 key를 허용하고, key-value 형태의 자료형을 저장 가능 할 수 있는 Collection - Map은 object 대비 비교하면 다양한 key의 사용을 허용하고, 값의 추가/삭제 시 메서드를 통해 수행이 필요함 - 키-값 쌍과 키의 원래 삽입 순서를 기억함 - 모든 값(객체 및 원시 값 모두)은 키 또는 값으로 사용될 수 있음 new Map() : 생성자 const map = new Map(); // Map(0) {} Map.set(key, value) :요소 추가 map.set("name", "lala"); map.set(123, 456); map.set(true, "bool_type"); console.log(map); //Map(3) {'name' =>..
[JavaScript] createElement( ), appendChild( ) ● createElement( ) ● - HTML 문서에서 지정한 tagName의 HTML 요소를 만드는 메서드 const hello = document.createElement("h1") // 코드가 생성 하지만 요소를 만들기만 해서 사용할 수는 없음. 이유는? HTML에 없기 때문이다. 그래서 다른 요소에 집어 넣을 수 있는 메서드가 appendChild( ) 이다. ● appendChild( ) ● - 한 노드를 특정 부모 노드의 자식 노드 리스트중 마지막 자식으로 붙인다. - 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild( ) 메소드는 노드를 현재위치에서 새로운 위치로 이동시킨다. document.body.appendChild(hello); // 태그 코드를..
[JavaScript] Infinite Scroll (무한 스크롤) ● Infinite Scroll ● - Infinite Scroll(무한 스크롤)이란 사용자가 특정 페이지 하단에 도달했을때, API가 호출 되며 콘텐츠가 끊기지 않고 계속 로드 되는걸 무한 스크롤 이라고 한다. 페이지를 클릭하면 다음 페이지 주소로 이동하는 페이지네이션과 달리 한 페이지에서 스크롤만으로 새로운 콘텐츠를 보여주게 되므로 많은 양의 콘텐츠를 스크롤하여 볼 수 있는 장점이 있다 IntersectionObserver API : IntersectionObserver 인터페이스는 대상 요소와 상위요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지 할 수 있는 수단을 제공합니다. // 주어진 뉴스 리스트 요소를 스크롤하려 새로운 뉴스를 가져오고..
[JavaScript] 이벤트 위임, event.target ● 이벤트 위임 ● : 이벤트 위임이란 비슷한 방식으로 여러 요소를 다뤄야 할때 사용된다. : 에빈트 위임을 사용하면 요소마다 핸들러를 할당하지않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다. 이벤트 위임을 사용하지 않은 코드 1 2 3 : ul 내부에 있는 각각의 li 요소에 이벤트 리스너를 등록 : 새로운 li가 추가되는 경우, 새로 추가된 li에는 이벤트 리스너를 새로 등록해야한다. 이벤트 위임을 사용한 코드 1 2 3 : 자식 요소인 li에 이벤트 리스너를 등록 하는 대신 그들의 부모요소인 ul에 이벤트 리스너를 등록 : li요소가 많아져도 간편하게 이벤트 리스너를 등록 할 수 있음 : 새로운 이벤트 리스너를 등록할 필요없이 알아서 등록함 ▶ 이벤..
[JavaScript] import ● import ● : 다른 모듈에서 내보낸 바인딩을 가져올때 사용 기본값 가져오기 import myModule form "my-module.js"; : myModule = 모듈에서 가져온 기본 내보내기를 가리킬 이름 : "my-module.js" = 가져올 대상 모듈, 모듈을 담은 .js 파일로의 절때 또는 상대 경로, 따옴표(' ')와 쌍따옴표(" ") 문자열만 사용 가능 모듈 전체 가져오기 import * as myModule from "myModule.js"; 하나의 멤버 가져오기 import {myMember] from "myModule.js"; 여러개의 멤버 가져오기 import {foor, bar} from "myModule.js"; 다른 이름으로 멤버 가져오기 import { reallyR..
[JavaScript] insertAdjacentHTML ● insertAdjacentHTML 란? ● - DOM (문서 객체 모델) 요소에 새 HTML을 삽입하는 메서드입니다. 이 메서드는 주어진 HTML 문자열을 사용하여 지정된 위치에 새 HTML을 추가함 - 삽입 지점을 정확히 지정할 수 있으므로, 새 HTML을 추가할 때 유용함 - position : 요소와 상대적인 위치를 나타내는 문자열이며 다음 문자열 중 하나여야 합니다. insertAdjacentHTML(position, text) `"beforebegin"` : 해당 요소의 이전에 HTML 삽입 `"afterbegin"` : 해당 요소의 첫 번째 자식으로 HTML 삽입 `"beforeend"` : 해당 요소의 마지막 자식으로 HTML 삽입 `"afterend"` : 해당 요소 이후에 HTML 삽..