🧠 프로토타입이란?프로토타입은 Javascript 에서 객체들이 서로 메서드나 속성을 공유하도록 하는 메커니즘이다.모든 객체는 자신의 부모 역할을 하는 또 다른 객체를 참조하고, 그 부모 객체를 통해 공통 기능을 상속받는 구조이다. 이 구조를 프로토타입 체인(prototype chain) 이라고 한다. 🧩 함수와 프로토타입의 관계Javascript 에서 모든 함수(Function) 는 기본적으로 하나의 prototype 객체를 자동으로 가지고 있다.함수 생성 시 자동으로 prototype 객체가 생긴다. 1. Obo 라는 함수 생성Obo 함수 생성 시 prototype 객체가 자동으로 생성 2. Obo 프로토 타입 객체의 constructor 멤버변수Obo 함수의 프로토타입 객체는 construc..

Javascript 프로토타입(prototype)

🧠 프로토타입이란?프로토타입은 Javascript 에서 객체들이 서로 메서드나 속성을 공유하도록 하는 메커니즘이다.모든 객체는 자신의 부모 역할을 하는 또 다른 객체를 참조하고, 그 부모 객체를 통해 공통 기능을 상속받는 구조이다. 이 구조를 프로토타입 체인(prototype chain) 이라고 한다. 🧩 함수와 프로토타입의 관계Javascript 에서 모든 함수(Function) 는 기본적으로 하나의 prototype 객체를 자동으로 가지고 있다.함수 생성 시 자동으로 prototype 객체가 생긴다. 1. Obo 라는 함수 생성Obo 함수 생성 시 prototype 객체가 자동으로 생성 2. Obo 프로토 타입 객체의 constructor 멤버변수Obo 함수의 프로토타입 객체는 construc..

2025.10.30

선택적 체이닝(Optional Chaining)중첩된 객체의 프로퍼티나 메서드에 접근할 때, 중간에 null 또는 undefined 가 있을 경우 에러 없이undefined 를 반환문법 : 객체 접근 시 "?." 를 사용null 이나 undefined 일 경우 접근을 중단하고 즉시 undefined 반환 예시const person = { name: "John", address: { city: "New York", zipCode: "10001" }};// 기존 방식 (에러 발생 위험)console.log(person.address.zipCode); // "10001"console.log(person.contact.phone); // 오류: cannot read property 'phone'..

선택적 체이닝(Optional Chaining, ?.), Null 병합 연산자(??), 논리 OR 연산자(||)

선택적 체이닝(Optional Chaining)중첩된 객체의 프로퍼티나 메서드에 접근할 때, 중간에 null 또는 undefined 가 있을 경우 에러 없이undefined 를 반환문법 : 객체 접근 시 "?." 를 사용null 이나 undefined 일 경우 접근을 중단하고 즉시 undefined 반환 예시const person = { name: "John", address: { city: "New York", zipCode: "10001" }};// 기존 방식 (에러 발생 위험)console.log(person.address.zipCode); // "10001"console.log(person.contact.phone); // 오류: cannot read property 'phone'..

2025.10.30

oninput 과 keydown, keyup 은 모두 input 값 변화를 감지할 때 발생 시점과 감지 가능한 키 종류, 사용 권장 여부에차이가 있다. 이벤트 발생 시점 감지 범위 특징 및 주의점 oninputinput의 값이 실제로 변경될 때마다 즉시 발생입력·복사·붙여넣기·삭제 등값이 바뀌면 항상 발생, 실시간keydown키를 누른 순간 발생모든 키문자가 입력되기 전 이벤트 발생keyup키에서 손을 뗄 때 발생모든 키문자가 입력된 후 이벤트 발생 oninput값이 입력될 때마다 즉시 발생하여 실시간으로 변화 감지가 가능하다.oninput 은 키 입력 뿐만 아니라 마우스로 복사·붙여넣기·삭제 등 직접 입력이 아닌 경우에도 동작한다.폼 값 변경을 가장 확실하게 추적할 수 있다.// 실시간 감지 ..

async/await 와 Promise 는 비동기 처리를 위한 Javascript 의 핵심 개념이다. 🧩 Promise란? Promise 는 비동기 작업의 완료(또는 실패)를 나타내는 객체다. Promise 는 3가지 상태를 가진다. ⏳ pending (대기 중) ✅ fulfilled (성공) ❌ rejected (실패) function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("데이터 로드 완료!"); }, 1000); });}getData() .then((result) => console.log(result)) .catch((error) => console.erro..

Jquery 로 .html() 을 사용하여 동적 HTML 삽입 시 기존 노드와 기존 이벤트 리스너가 삭제되지만.on() 으로 등록했던 이벤트 리스너들은 Jquery 가 재 바인딩을 해줘 이벤트를 사용할 수 있었다. 하지만 vanilla JS 의 .innerHTML 을 통해 동적 HTML 삽입 시 기존 노드 및 기존 이벤트 리스너가 삭제된 후.addEventListener() 를 통해 이벤트를 수동으로 재등록 해줘야 사용할 수 있다. 이때 vanilla JS 로 동적 HTML 삽입 시 이벤트 리스너 및 스크립트를 실행할 수 있는 방법은공통 함수를 호출하여 함수 내 스크립트 태그내용을 불러와서 재등록 해주면 된다. 본인은 모달창을 띄울때 모달창 내용을 동적 HTML 삽입하여 띄웠다. const initial..

Javascript 를 사용하여 화면 내 scroll 을 이동 해야해서 찾아봤다. 브라우저 창 너비와 높이브라우저 창 화면에 보이는 너비와 높이를 알려면 document.documentElement 의clientWidth 와 clientHeight 를 사용한다.  사용방법document.documentElement.clientWidthdocument.documentElement.clientHeight 또 다른 확인 방법은 관리자도구(F12) 를 키고 모바일로 봤을 때 확인 가능하다.   window.innerWidth 와 document.documentElement.clientWidth 의 차이점너비와 높이를 구하는 방법중에 window.innerWidth 와 window.innerHeight 도 있다...