쑤쑤_CS 기록장

Device Orientation : 중력과의 관계에서 디바이스의 물리적 방향의 번화를 감지할 수 있다. - 이를 이용하면 모바일 디바이스를 회전시켰을 때 이벤트를 감지하여 적절히 화면을 변화시킬 수 있다. 디바이스의 방향 정보를 다루는 자바스크립트 이벤트(2) 1. DeviceOrientationEvent : 가속도계가 기기 방향의 변화를 감지했을 때 발생 2. DeviceMotionEvent : 가속도에 변화가 일어났을 때 발생 DeviceOrientationEvent 디바이스 방향 변화는 3개의 각도(alpha, beta, gamma)를 사용하여 측정 deviceorientation 이벤트에 리스너를 등록하면 리스너 함수가 주기적으로 호출되어 업데이트된 방향 데이터를 제공 window.addEven..

#1. 이벤트(Event) 이벤트 : 어떤 사건 브라우저에서의 이벤트 사용자가 버튼을 클릭했을때, 웹페이지가 로드되었을 때 (DOM 요소) 이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없다 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 대응하는 처리를 호출해 주어야 한다 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지해준다. 이 과정을 통해 사용자와 웹페이지는 상호작용(Interaction)이 가능 이벤트 핸들러 : 이벤트에 대응하는 처리를 기술 이벤트가 발생하면 그에 맞는 반응을 해야 한다. 이벤트는 일반적으로 함수에 연결되며, 함수는 이벤트가 발생되면 실행된다 #2. 이벤트 루프(Event Loop)와 동시성(Concurrency) 브라우저 : 단일 쓰레드(single-t..

동기식 처리 모델(Synchronous processing model) 직렬적으로 task를 수행 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기한다. 서버에서 데이터를 가져와서 화면에 표시할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다. 비동기식 처리 모델(Asynchronous processing model) 병렬적으로 task를 수행 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다. 서버에서 데이터를 가져와서 화면에 표시할 때, 서버에 데이터를 요청한 후 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 태스크를 수행한다. 이후 서버로부터 데이터가 ..

#1. DOM ( Document Object Model ) DOM 브라우저의 렌더링 엔진 : 웹 문서를 로드 -> 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성 ->메모리에 적재 모든 요소와 어트리뷰트, 텍스트를 각각의 객체로 만들고 이를 부자 관계로 표현할 수 있는 트리구조로 구성한 것 DOM API (Application Programming Interface) 웹 문서의 동적 변경을 위해 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트 객체로 제공 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 방법 : DOM 변경 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합 : DOM API - HTML 문서에 대한 모델 구성 : 브라우저는 HTML 문..

고차 함수 (Higher order function) : 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수 - 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. // 함수를 인자로 전달받고 함수를 반환하는 고차 함수 function makeCounter(predicate) { // 자유 변수. num의 상태는 유지되어야 한다. let num = 0; // 클로저. num의 상태를 유지한다. return function () { // predicate는 자유 변수 num의 상태를 변화시킨다. num = predicate(num); return num; }; } // 보조 함수 function increase(n) { return ++n; } // 보조 함수 function dec..

밀집 배열(dense array) 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조 요소는 하나의 타입으로 통일되어 있으며, 서로 연속적으로 인접 인덱스를 통해 임의의 요소에 접근할 수 있다. (이는 매우 효율적이며 고속으로 동작한다.) 단점 정렬되지 않은 배열에서 특정한 값을 탐색하는 경우, 모든 배열 요소를 처음부터 값을 발견할 때까지 차례대로 탐색(선형 탐색(linear search), 시간 복잡도 O(n))해야 한다. 배열에 요소를 삽입하거나 삭제하는 경우, 배열 요소를 연속적으로 유지하기 위해 요소를 이동시켜야 한다. // 선형 검색을 통해 주어진 배열(array)에 주어진 값(target)이 요소로 존재하는지 확인하여 // 존재하는 경우 해당 인덱스를 반환하고 존재하지 않는 경우..

배열(array) 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바스크립트에서 배열은 객체이며 유용한 내장 메소드를 포함하고 있다. Array 생성자로 생성된 Array 타입의 객체이며, 프로토타입 객체는 Array.prototype이다. #1. 배열의 생성 #1.1 배열 리터럴 0개 이상의 값을 쉼표로 구분하여 대괄호([])로 묶는다. 존재하지 않는 요소에 접근하면 undefined 반환한다. const emptyArr = []; console.log(emptyArr[1]); // undefined console.log(emptyArr.length); // 0 const arr = [ 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 's..

String 객체 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String 객체의 프로퍼티와 메소드를 사용할 수 있다. 원시 타입이 wrapper 객체의 메소드를 사용할 수 있는 이유는, 원시 타입으로 프로퍼티나 메소드를 호출할 때 원시 타입과 연관된 wrapper 객체로 일시적으로 변환되어 프로토타입 객체를 공유하게 되기 때문이다. const str = 'Hello world!'; console.log(str.toUpperCase()); // 'HELLO WORLD!' #1. String Constructor String 객체는 String 생성자 함수를 통해 생성할 수 있다 전달된 인..