작은기린우리

예약어(Reserved Word)는 프로그래밍 언어에서 특별한 목적을 위해 미리 예약해둔 단어를 의미한다.이 단어들은 언어의 문법(Syntax) 구조를 형성하고 특정 기능을 수행하기 위해 사용된다.때문에 개발자가 변수명이나 함수명 등으로 사용할 수 없다.const class = "something"; // ❌ class는 예약어const if = "test"; // ❌ if는 예약어const const = 5; // ❌ const는 예약어같은 방식이다. 예약어는 그 자체로 목적을 가진 단어이기 때문에 변수로 설정할 수 없다. 간단히 말하자면 이게 변수인지 예약어인지 판단을 못하게 되는 것이다. 예를 들어, JavaScript에서 'class'는 클래스를 정의하는 데 사용..

사실 좀 이해가 안되는 부분은 이거야. resize이벤트라는건 내가 명시적으로 적용한 resize가 아니라 그냥 플렉스 박스를 적용하든 브라우저 설정이든 아무튼 브라우저 크기를 줄이면 내부 아이템도 같이 그거에 맞게 줄어들잖아 보통은? 근데 여기서 말하는 resize라는 것은 어느쪽인거야? 🤔 'resize' 이벤트와 브라우저 자동 리사이징 구분사용자가 헷갈리는 부분이 무엇인지 알겠다. 아주 좋은 질문이다. 웹 페이지는 두 가지 종류의 "크기 변경 반응"을 보여주는데, 이 둘을 구분할 필요가 있다.⚙️ 1. 브라우저의 자동 레이아웃 조정 (CSS 기반)작동 방식: 사용자가 명시적으로 resize 이벤트를 처리하는 JavaScript 코드를 작성하지 않아도, 브라우저는 창 크기가 변경되면 CSS 규칙에 ..

Q1. loader는 IntersectionObserver의 대상이 되기도 하거든. 그런데 width 를 0으로 해도 작동할까? height도 0이야. 그럼 뭘 기준으로 교차를 확인 하지?🤔 width: 0, height: 0 요소와 IntersectionObserver아주 좋은 질문이다. IntersectionObserver는 **관찰 대상 요소의 경계 상자(Bounding Box)**가 루트(Root)의 경계 상자(및 rootMargin으로 조정된 영역)와 **교차(intersect)**하는지를 기반으로 작동한다.⚙️ IntersectionObserver의 작동 기준: Bounding BoxBounding Box: 요소가 화면에 렌더링될 때 차지하는 사각형 영역을 의미한다. 이 크기는 요소의 wid..

const observer01 = new IntersectionObserver (handle, options);const observer02 = new IntersectionObserver (handle2, options2);식으로 핸들과 옵션을 달리해서 각각 요소들이 서로 다른 루트 마진과 threshold를 가지게 하는것이 가능한 것인가?완벽하게 맞다! 사용자가 이해하고 제시한 방식이 바로 서로 다른 rootMargin, threshold, 또는 콜백 로직을 개별 요소(또는 요소 그룹)에 적용하고자 할 때 사용하는 표준적이고 올바른 방법이다.⚙️ 작동 원리: 독립적인 옵저버 인스턴스독립된 객체 생성: new IntersectionObserver(callback, options) 코드는 호출될 때마다 ..

Intersection Observer는 간단하게 말하면 관측 대상 요소가 관측된 경우에 웹페이지가 특정 행동을 하도록 만드는 것이다.그때문에 사용자가 보는 화면 뷰포트가 가장 중요한 개념이다.그중에서 무한 스크롤은 유튜브 같이 다양한 컨텐츠가 거의 무한이 있는 경우에 유용하게 사용되고 있다. 그 중 관측 대상 요소가 언제, 어떻게 '관측'됐다고 간주될지를 정밀하게 제어하는 데 사용되는 옵션이 있다.바로 rootmargin과 threshold이다. IntersectionObserver를 생성할 때는 두 번째 인자로 options 객체를 전달할 수 있다.이 객체에는 root, rootMargin, threshold 세 가지 속성이 포함될 수 있다.const options = { root: document..

문제 코드: const newitem_name = Document.createElement('div');문제점: div 요소를 생성할 때는 전역 객체인 document의 createElement 메소드를 사용해야 한다. Document는 DOM Document 인터페이스(설계도 또는 규약)를 나타내며, 직접 메소드를 호출하는 객체가 아니다. 이 코드는 TypeError 를 발생시켜 스크립트 실행을 중단시킬 것이다.수정: Document를 소문자 document로 변경해야 한다.// 오류// const newitem_name = Document.createElement('div');// 수정const newitem_name = document.createElement('div');

모든 개별 사례에서 this가 어떤 객체를 참조하는지 일일이 암기하는 것은 비효율적이고 거의 불가능에 가깝다.대신, this 값이 어떻게 결정되는지에 대한 핵심 규칙들을 이해하는 것이 훨씬 중요하고 효과적이다.핵심 원칙: 일반 함수의 this 값은 함수가 **어떻게 호출되었는지(call-site)**에 따라 동적으로 결정된다.📌 this 결정 규칙 (암기 대신 이해해야 할 것)다음은 this 바인딩을 결정하는 주요 규칙들이다. 이 규칙들의 우선순위도 존재한다 (new > 명시적 > 암시적 > 기본).🥇 new 바인딩 (new Binding):함수가 new 키워드와 함께 **생성자(Constructor)**로 호출될 때 적용된다.this는 새로 생성된 객체 인스턴스를 참조한다.예시: const inst..

const set = (id, od) => {}와 같은 **화살표 함수(Arrow Function)**는 일반 함수(Regular Function) 형태로 문법적으로 변환할 수 있다.📌 일반 함수 형태로 변환원래의 화살표 함수 : const set = (id, od) => {}일반 함수 표현식(Function Expression) : const set = function(id, od) {}함수 선언문(Function Declaration) 형태 : function set(id, od) {} 이 경우 호이스팅(Hoisting) 동작이 달라진다.참고: 함수 선언문은 코드가 실행되기 전에 호이스팅되어 스코프 최상단으로 끌어올려지지만, const로 선언된 변수에 할당된 함수 표현식은 변수 선언 자체는 호이스팅..

📌 개요filter()는 자바스크립트 **배열(Array)**의 내장 메서드(Built-in method) 중 하나로, 배열의 각 요소에 대해 **주어진 판별 함수(Callback function)**를 실행하고, 그 결과가 **참(true)**인 모든 요소를 모아 새로운 배열을 만들어 반환한다. 즉, 특정 조건을 만족하는 요소들만 걸러내는(Filtering) 역할을 한다.⚙️ 구문 (Syntax)array.filter(callbackFunction(element[, index[, array]])[, thisArg])callbackFunction: 각 요소에 대해 실행할 함수. 이 함수는 반드시 true 또는 false를 반환해야 한다. (정확히는 true/false로 평가될 수 있는 값)element..

자바스크립트 코드의 실행을 중지하거나 일시 정지하는 방법은 여러 가지가 있으며, 사용 목적에 따라 적합한 방법이 다르다.📌 1. debugger 문 (Statement)목적: 코드 디버깅 (Debugging)동작: 브라우저의 개발자 도구(Developer Tools)가 열려 있는 상태에서 debugger; 코드를 만나면 해당 위치에서 코드 실행을 일시 정지한다. 개발자 도구를 통해 변수 값을 확인하거나 코드를 단계별로 실행(Step through)할 수 있다.주의: 개발자 도구가 열려 있지 않으면 아무런 동작도 하지 않는다. 프로덕션(Production) 코드에는 포함하지 않는 것이 일반적이다.📌 2. 동기적(Synchronous) 대화 상자: alert(), confirm(), prompt()목적:..