PRDEN

1. 비동기 처리 및 콜백 함수 'Promise는 자바스크립트 비동기 처리에 사용되는 객체'라는 말을 이해해야 한다. 1) 비동기 처리란? 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 그 예시로는 제이쿼리의 ajax, setTimeout()이다. 2) 콜백 함수로 비동기 처리 방식의 문제점을 해결할 수 있다. 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다. 3) 콜백 지옥(인코딩, 사용자 인증 등을 처리하기 위해 비동기로 처리하다가 콜백 안에 콜백을 계속 물게 되는 형식) : Promise와 Async를 이용해서 해결 가능. 2. Promise 'Promise는 자바스크립트 비동기 처리에 사용되는 객체..

1. && (A && B) A가 Truthy한 값이면 B가 결과값이 된다. example1 && example2 = example1이 true인 경우 example2을 반환하고 그렇지 않은 경우 example1을 반환 console.log(true && 'hello'); // hello console.log(false && 'hello'); // false console.log('hello' && 'bye'); // bye console.log(null && 'hello'); // null console.log(undefined && 'hello'); // undefined console.log('' && 'hello'); // '' console.log(0 && 'hello'); // 0 console..

1. 변수(var, let, const) var 1) 한 번 선언된 변수를 다시 선언할 수 있다. 2) 선언하기 전에 사용할 수 있다.(hoisting, 호이스팅), 선언은 호이스팅 되지만 할당은 호이스팅 되지 않는다. 아래 예시 // 호이스팅 관련해서 - 호이스팅 기능이 있기 때문에 변수를 선언하기 전에 사용해도 오류가 생기지 않는다. undefined만 뜰뿐(let, const는 이렇게 undefined도 안 나오고 오류 뜬다) -------------------------------------------------------------------------------------------------------------------------- console.log(name); //undefined ..

이벤트나 함수가 실행되는 빈도를 줄여 서버에서 과부하 걸리지 않게 하기 위함 1. Debounce : 여러 번 발생하는 이벤트에서 가장 마지막 이벤트 만을 실행 되도록 만드는 것 예시) 프론트쪽에서 검색할 때 ex) 0.5초 0.5초 안에 이벤트가 일어났으면 초기화 계속하다가 0.5초가 지나도 아무 이벤트 일어나지 않으면 서버에 콜(submit) 날리는 것 2. Throttle: 개념 : 여러 번 발생하는 이벤트를 일정시간 동안 한 번만 실행 되도록 만드는 것. 일정 시간 동안 만 기다리고,이벤트를 실행시킨 후 재차 기다림. ex) 스크롤사용할 때 EventListener 폭주 - 브라우저 죽을 수 있다. 0.5초 동안 EventListener 한 번만 실행하겠다고 하는 것 -> Debounce 는 입력..

1. preventDefault : a 태그나 submit 태그는 고유의 동작이 있다. 예를 들어 페이지 이동 or form안에 있는 input전송 등. preventDefault는 이 기본 동작을 막아준다. a 태그에 preventDefault걸면 href기능 막아준다. 2.stopPrapagation: a 태그가 li, ul 태그에 순차적으로 감싸져 있을 때 a 태그 onclick -> li 태그 onclick -> ul태그 onclick으로 이벤트가 확산되어 감. 이를 막아주는 것이 stopPropagation(이벤트가 상위 엘리먼트에게 전달되지 않도록 막아주는 것) https://ismydream.tistory.com/98 event.stopPropagation(), event.preventDef..

0. BOM과 비교 (Window 객체) https://prde.tistory.com/278 Window 객체 0. Bom 브라우저 객체 모델 자바스크립트를 이용해서 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어한다. 이때 사용할 수 있는 객체 모델이 브라우저 객체 모델(BOM)이다. 브라우 prde.tistory.com 1. DOM이란 ? 문서 객체 모델은 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 자바스크립트를 통해 새로운 HTML요소나 속성을 추가, 제거, 요소변경, 속성변경, CSS스타일변경, HTML이벤트 추가, 이벤트 반응 등의 작업 할 수 있다. 2. Documnet 객..

0. Bom 브라우저 객체 모델 자바스크립트를 이용해서 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어한다. 이때 사용할 수 있는 객체 모델이 브라우저 객체 모델(BOM)이다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니다. 1. Window 객체 window 객체는 웹 브라우저의 창을 나타내는 객체로 대부분의 웹 브라우저에서 지원하고 있다. window 객체는 브라우저의 전역객체이기 때문에 모든 전역 변수 또는 함수는 window 객체로 접근 가능하다. 전역 변수를 정의한 후 window 객체에서 해당 값에 접근 가능하다. 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됩니다. window 객체..

1. Cannot set properties of undefined - 발생하는 여러 경우의 문제 및 해결책 https://bobbyhadz.com/blog/javascript-cannot-set-property-of-undefined Solve - Cannot set property of Undefined in JavaScript | bobbyhadz The "Cannot set property of undefined" error occurs when setting a property on an `undefined` value. To solve the error conditionally check if the value is of the expected type (object or array) or h..

1. 클래스 : const User = function (name, age) { this.name = name; this.age = age; this.showName = function(){ console.log(this.name); } }; //객체 내부에 showName이 있고 const mike = new User("mike", 30); class User2{ constructor(name, age){ this.name = name; this.age =age; } showName(){ console.log(this.name) } } const tom = new User2("tom", 30); //prototype 내부에 showname이 있다. //클래스에서의 상속 extends class Car(..

1. 구조 분해 할당(01:03:24시작) 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 1) 배열 let users = ['Mike', 'Tom', 'Jane']; let[user1, user2, user3] = users; // 위는 let user1 = users[0]; let user2 = users[1]; let user3 = users[2]; let [a,b,c] = [1,2]; //c는 undefined일 경우 기본값을 아래와 같이 셋팅할 때 let[a=3, b=4, c=5] = [1,2]; 2) 객체 let user = {naem : 'Mike', age: 30}; let {name, age} = user; console.log(name); // 'Mike' c..