Js
-
Promise 객체Js 2023. 5. 9. 23:03
Promise 객체는 JavaScript에서 비동기적으로 실행되는 작업을 처리하기 위한 객체입니다. Promise 객체는 비동기적으로 처리될 작업을 프로미스 생성자 함수의 인자로 전달하여 생성됩니다. Promise 객체는 대기 상태, 이행 상태, 거부 상태 세 가지 상태를 가지며, 대기 상태에서 이행 상태 또는 거부 상태로 전환됩니다. 이때 이행 상태와 거부 상태는 각각 resolve와 reject 함수를 호출하여 전환할 수 있습니다. Promise 객체는 then()과 catch() 메서드를 제공합니다. then() 메서드는 Promise 객체가 이행 상태일 때 호출되며, 콜백 함수를 인자로 받습니다. catch() 메서드는 Promise 객체가 거부 상태일 때 호출되며, 콜백 함수를 인자로 받습니다...
-
flex와 grid의 차이Js 2023. 3. 30. 20:50
flex와 grid는 모두 CSS 레이아웃 모듈입니다. 그러나 두 가지 레이아웃 모듈은 서로 다른 방식으로 작동하며 서로 다른 목적을 가지고 있습니다. Flexbox Flexbox는 1차원 레이아웃 모듈입니다. 즉, 요소를 수평 또는 수직 축으로 정렬할 수 있습니다. Flexbox는 요소를 부모 요소 내에서 유연하게 배치하기 위해 사용됩니다. Flexbox는 각 요소의 크기를 고려하지 않고, 컨테이너를 기준으로 요소의 배치를 결정합니다. 요소를 수평 또는 수직 축으로 정렬해야 할 때 요소가 동일한 크기여야 하거나, 부모 요소의 크기에 맞추어 크기를 조절해야 할 때 요소가 유동적인 크기를 가져야 할 때 요소들의 순서를 변경해야 할 때 작은 화면에서 레이아웃이 변경되어야 할 때 예를 들어, 네비게이션 바, ..
-
프로토 타입 , 클래스, 인스턴스Js 2023. 3. 9. 21:02
프로토타입 (prototype) 객체의 원래 상태 같은 생성자로부터 생성된 객체는 프로토타입을 공유 메모리 절약 1. 자바스크립트 내에 존재하는 생성자함수는 암시적으로 프로토타입 존재 ex) Array() 2. 직접 생성한 생성자함수에서 만든 함수를 공통으로 사용할 경우 명시적으로 프로토타입 생성해야 됨 ex) Info() 프로토타입 체인 최 상위 객체 = null 클래스 (Class) 객체를 생성하기 위한 틀, 객체X 클래스 안에 데이터 X 메모리에 올라가지 X 클래스 사용 Getter 프로퍼티 값을 가져오기 위한 함수 Setter 프로퍼티 값을 설정하기 위한 함수 get 함수명() { return this._변수명; } set 함수명(value) { this._변수명 = value; } class I..
-
thisJs 2023. 3. 6. 23:44
this 함수 호출 방법에 따라 값이 결정 => 바인딩 전역 객체 (global Object) 모든 객체의 최상위 객체 자바스크립트에서는 window 객체 전역 객체에 바인딩 되는 경우 this는 전역 객체(window)에 바인딩 전역 함수 내부 함수 콜백 함수 //내부 함수 function sFoo() { console.log("sFoo ::: " + this); } function mFoo() { console.log("mFoo ::: " + this); sFoo(); // objuct Window } mFoo(); // objuct Window // this는 전역 객체에 바인딩 된다 기본 바인딩 암시적 바인딩 명시적 바인딩 new 바인딩 화살표 함수 바인딩 기본 바인딩 기본 규칙 전역(global..
-
IIFEJs 2023. 3. 6. 22:39
IIFE Immediately Invoked Function Expression 즉시 실행되는 함수 표현식 약자 표현 내부 변수는 외부로부터 접근 불가 IIFE 변수 할당시 자체 저장X 즉시 실행된 함수 결과만 저장O IIFE 사용 이유 불필요한 변수 및 함수 생성X Scope 충돌X 한번만 호출하는 코드의 경우 사용 IIFE 표현식 함수 리터럴을 () 감싼 형태 (function () { //문 })(); 즉시실행함수 예 (function (num1, num2) { return num1 + num2; })(10, 20); (function () { var myAge = 30; })(); document.write(myAge); //Error => myAge is not defined /* var res..
-
호이스팅Js 2023. 3. 6. 22:22
호이스팅 (Hoisting) 선언한 코드를 내부적으로 최상단으로 끌어올림 var와 함수 선언이 대상 선언된 var는 최상단으로 올라간다는 의미 선언된 let, const는 최상단으로 올라갈 수 없음 선언된 함수는 최상단으로 올라간다는 의미 일반적인 코딩 순서 [선언] var myAge; [초기화 or 할당] myAge = 30; [코드 사용] document.write(myAge); 2. 호이스팅 [코드 사용] document.write(myAge); [선언] var myAge; [초기화 or 할당] myAge = 30; 일반적인 코딩 순서 //선언 function sum(num1, num2){ return num1 + num2; } sum(10, 20); //사용 sum(10, 20); //사용 //선..
-
스코프Js 2023. 3. 6. 22:06
스코프 (Scope) 유효 범위 동일한 식별자 충돌 방지 변수나 함수 선언 위치에 따라 스코프 지님 var str = “더하기”; function sum(num1, num2){ str = “sum 함수 스코프”; return num1 + num2; } sum(10, 20); console.log(str); = str함수 출력 x sum 함수 출력 o 함수 레벨 스코프 (function-level scope) 함수 안에 선언한 변수 => 지역 변수 함수 외부에서 해당 변수 호출 시 오류 var str = "전역 스코프"; function fnScopeTest(){ var str = "지역 스코프"; console.log(str); } fnScopeTest(); // 지역 스코프 console.log(str..
-