XMLHttpRequest(XHR) : 서버와 상호작용하기 위한 객체 - 전체 페이지를 새로고침 하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있음 - XML데이터 통신으로 오해할 수 있음 - 모든 종류의 데이터를 받아올 수 있음 1. XMLHttpRequest 객체 생성하기 // XMLHttpReques생성자 함수를 호출하여 생성한다. const xhr = new XMLHttpRequest(); 2. 요청 전송하기 1) HTTP메소드와 URL정의 → 클라이언트(브라우저)에서 서버로 요청을 보내기 위해선 HTTP메소드와 URL정의하는 것 부터 시작한다. XMLHttpRequest내장함수인 open()을 사용함 ! xhr.open("GET","/posts"); ☞ open() 함수 : 첫 번째 ..
this 란? : Object(객체)를 참조하는 키워드이다. 1. window객체가 바인딩 된 경우(this는 기본적으로 window를 바라보고 있다.) console.log(this) // window 객체 2. DOM요소가 바인딩 된 경우 → HTML DOM요소에서 onclick, onchange 등의 이벤트가 발생할 때 호출하는 함수의 파라미터로 this를 전달하면이벤트가 발생한 HTML DOM 그 차제가 된다. ❗ 콘솔창을 열어 잘 적용되는지 확인해 보자 ❗ 3. Object(객체)가 바인딩 된 경우 → 함수를 정의할 때 함수 내에서 Object(객체) 내에 정의된 다른 키에 접근하려면 this키워드를 통해 접근할 수 있다. Objec(객체) 내에 이미 키로 선언되어 사용 중인 다른 데이터를 활용..
Rest Parameters (나머지 연산자) : 정해지지 않은 수의 매개변수를 배열로 받을 수 있다. 기본 구문 > function sum(a, b, ...rest) { // 넣고 싶은 구문 } ※ 주의할 점 1) 함수 하나에 하나의 나머지 매개변수만 존재해야 한다. function sum(...rest1, ...rest2, ...rest3) ❌ function sum(a, b, ...rest) ⭕ 2) 나머지 매개변수는 반드시 함수 정의의 마지막 매개변수여야 한다. function sum(...rest, a, b) ❌ function sum(a, b, ... rest) ⭕ 예제 > function sum(...Arrest) { let total = 0; for (const num of Arrest) ..
Class : 객체를 생성하기 위한 틀 1. Class 기본문법 class MyClass { // constructor() : 생성자 함수 constructor() {} // 여러 메소드들을 지정할 수 있음 method1() {} method2() {} } 클래스명은 대문자로 시작하여야 함 클래스는 constructor()이라는 생성자 함수와 같이 쓰임 ▷ constructor() 생성자 함수 : 생성된 객체를 초기화하기 위한 특수한 메소드 (하나의 클래스 안에 하나만 존재할 수 있음) class User { constructor(name,age) { this.name = name; this.age = age; } } ☞ 생성자 함수를 사용하기 위해 new연산자를 사용하여 호출 (하나의 클래스로 여러 개..
1. 배열 구조 분해 할당 let fruits = ["🍇","🍑","🥝","🍓","🍒"]; let [fruit1, fruit2, ...fruit3] = fruits; console.log(fruit1); // 포도가 출력 console.log(fruit2); // 복숭아가 출력 console.log(fruit3); // 키위부터 체리까지의 배열이 출력 // 배열 구조바꿔치기 let str1 = "green"; let str2 = "blue"; // str2에 str1값이 담기고, str1에 str2값이 담김! [str1, str2] = [str2, str1]; console.log(str1); // blue가 출력 console.log(str2); // green이 출력 let strs = ["a","b..