쑤쑤_CS 기록장

#1. SPA(Single Page Application) 단일 페이지 애플리케이션(Single Page Application, SPA) 모던 웹의 패러다임 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 한다. 이후 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신단다. 핵심 가치 : 사용자 경험(UX) 향상 단점 : 초기 구동 속도, 검색엔진 최적화 문제 #2. Routing 라우팅 출발지에서 목적지까지의 경로를 결정하는 기능 사용자가 태스크를 수행하기 위해 어떤 화면에서 다른 화면으로 전환하는 내비게이션을 관리하기 위한 기능 사용자가 요청한 U..

#1. Ajax (Asynchronous JavaScript and XML) 브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 갱신이 발생한다. 이는 브라우저와 서버와의 통신에 의한 것이다. 서버로부터 웹페이지가 반환되면 클라이언트(브라우저)는 이를 렌더링하여 화면에 표시한다. Ajax(Asynchronous JavaScript and XML) : 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식 서버로부터 웹페이지가 반환되면 화면 전체를 갱신하지 않고, 페이지 일부만을 갱신하여 동일한 효과를 볼 수 있도록 한다. 페이지 전체를 로드하여 렌더링 할 필요가 없고, 갱신이 필요한 일부만 로드하여 갱신한다 빠른 퍼포먼스와 부드러운 화면 표시..

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)이 요소로 존재하는지 확인하여 // 존재하는 경우 해당 인덱스를 반환하고 존재하지 않는 경우..