2023.03.05 자바스크립트 스터디 8회차 공부 사이트: https://poiemaweb.com/ 31. 동기식/비동기식 처리 모델 1) 동기식 처리 모델 태스크가 순차적으로 실행되며, 어떤 작업이 수행 중이면 다음 작업은 대기한다. 서버에서 데이터를 가져와서 화면에 표시할 때, 서버가 응답할 떄까지 이후 태스크들은 블로킹된다. // 동기식으로 동작 function func1(){ console.log('func1'); func2(); } function func2(){ console.log('func2'); func3(); } function func3(){ console.log('func3'); } func1(); 2) 비동기식 처리 모델 태스크가 종료되지 않은 상태더라도 다음 태스크를 실행한다...

2023.03.05 자바스크립트 스터디 8회차 공부 사이트: https://poiemaweb.com/ 30. DOM 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재한다. 이를 DOM이라 한다. → 모든 요소, 요소의 속성, 텍스트를 각각 객체로 만들고 트리구조로 구성한 것이 DOM이다 DOM은 자바스크립트를 통해 동적으로 변경할 수 있다. DOM에 접근하고 수정할 수 있는 프로퍼티/메소드를 갖는 자바스크립트 객체를 DOM API라 한다. 1) DOM tree 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. (객체 트리로 구조화) 노드 설명 Document Node (문서 노드) 트리의 최상위에 존재. E..

2023.03.05 자바스크립트 스터디 8회차 공부 사이트: https://poiemaweb.com/ 29. 배열 고차 함수 고차 함수 - 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수. - 인자로 받은 함수를 필요한 시점에 호출하거나, 클로저를 생성하여 반환한다. - 자바스크립트는 고차 함수를 다수 지원하고 있으며, 특히나 Array 객체에서 유용한 고차 함수들을 제공 function makeCounter(predicate){ let num = 0; return function() { //클로저, num의 상태 유지 num = predicate(num); return num; }; } function increase(n) { return ++n; } function decrease(n){ ret..

2023.03.05 자바스크립트 스터디 8회차 공부 사이트: https://poiemaweb.com/ 27. 배열 1) 배열 생성 방법 ① 배열 리터럴 const empptyArr = []; console.log(emptyArr.length); const arr = ['zero','one','two','three','four','file']; console.log(arr[1]); console.log(arr.length); 배열 리터럴은 객체 리터럴과 달리 property key가 없고, property value만이 존재한다. value에 접근하기 위해 대괄호 표기법을 사용하며 대괄호 내에 접근하고자 하는 요소의 인덱스를 넣어준다. (객체는 대괄호 표기법/마침표 표기법 사용) 배열 리터럴의 프로토타입 ..

2023.02.26 자바스크립트 스터디 7회차 공부 사이트: https://poiemaweb.com/ 25. 정규표현식 문자열에서 특정 내용을 찾는 데 사용한다. 1) 정규표현식 ① 관련 메소드 메소드 설명 RegExp.prototype.exec 문자열에서 일치하는 항목에 대한 검색 수행, 배열 반환 RegExp.prototype.test 정규식과 문자열이 일치하는지 검사. true/false 반환 String.prototype.match 문자열과 매치되는 부분 검색 후 반환 String.prototype.replace 일치하는 부분을 대체한 후 새로운 문자열 반환 String.prototype.search 문자열에서 일치하는 부분을 검색. 첫 번째 인덱스 반환(위치) String.prototype.sp..

2023.02.26 자바스크립트 스터디 7회차 공부 사이트: https://poiemaweb.com/ 22. Number 래퍼 객체 변수 또는 객체의 프로퍼티가 숫자를 값으로 가지고 있다면 Number 객체의 별도 생성 없이 Number 객체의 프로퍼티/메소드를 사용할 수 있다. 원시 타입 number가 레퍼 객체의 메소드를 사용할 수 있는 이유는 원시 타입으로 메소드 호출 시 원시 타입과 연관된 래퍼 객체로 일시적으로 변환되어 프로토타입 객체를 공유하기 때문이다. var num = 1.5; console.log(num.toFixed()); //2 - Number.prototype.toFixed([digits]) : 소수점 자릿수 지정, 디폴트 0 1) Number Property 정적 프로퍼티. Num..

2023.02.18 자바스크립트 스터디 6회차 공부 사이트: https://poiemaweb.com/ 21. 전역 객체(Global Object) 모든 객체의 유일한 최상위 객체를 의미한다. (브라우저에서는 window 객체, Node.js에서는 global 객체) [특징] ◼ 전역 객체는 실행 컨텍스트에 컨트롤이 들어가기 이전에 생성됨 ◼ constructor가 없음 → new 연산자로 생성 불가능 → 개발자가 전역 객체 생성하는 것 불가능 ◼ 전역 스코프를 가짐 ◼ 전역 객체의 자식 객체 사용 시 전역 객체 생략 가능 (window.document...라고 쓸 필요 없이 document..) ◼ 전역 변수/함수를 프로퍼티로 가짐 ◼ 표준 빌트인 객체(ex. alert...)는 전역 객체의 자식 객체 ..

2023.02.18 자바스크립트 스터디 6회차 공부 사이트: https://poiemaweb.com/ 20. 빌트인 객체 자바스크립트의 객체를 크게 3가지로 나누면 다음과 같다. - Native Object - Host Object - User-defined Object 1) 네이티브 객체(Native Object) 네이티브 객체는 애플리케이션의 환경과 관계없이 언제나 사용할 수 있다. EX) Object. String, Number, Function, Array .... 네이티브 객체를 Global Objects라고 부르기도 한다. 이는 전역객체(Global Object)와는 다른 의미로 사용된다. 객체 설명 Object ◼ Object() 생성자 함수는 객체를 생성함. ▪ 인수 값이 null / un..