본문 바로가기

javascript/📖 study39

[10주차 스터디]43장-Ajax Ajax Ajax란? Ajax란 Asynchronous JavaScript And Xml 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 이전의 웹페이지는 HTML을 서버로부터 전송 받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작 함 전통적인 방식의 단점 이전 웹페이지와 차이가 없어 변경할 필요 없는 부분까지 포함한 완전한 HTML을 서버로 부터 매번 다시 전송 받기 때문에 불필요한 데이터 통신이 발생 화면 전환이 일어나면서 순간적으로 깜빡이는 현상 발생 클라이언트와 서버와의 통신이 동기방식으로 동작.. 2022. 4. 2.

[스터디 10주차]42장- 비동기 프로그래밍 비동기 프로그래밍 동기 처리와 비동기 처리 실행 컨텍스트 개념 알고 가기 함수 호출 시 코드가 평가 되어 콜스택에 푸시 되고 함수 코드 실행이 종료 되면 함수 실행 컨텍스트는 스택에서 팝되어 제거 됨 함수 코드 평가 과정을 통해 함수 실행 컨텍스트 생성 됨 즉, 콜스택에 함수 실행 컨텍스트 푸시 됨 === 함수 실행의 시작을 의미 함수의 실행 순서는 실행컨텍스트 스텍으로 관리 됨 동기 처리 방식 이해 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택 갖는다 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미 실행 컨텍스트의 최상위 (실행 중인 함수)를 제외하고 모두 실행 대기 중인 태스크(Task) 자바 스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread) .. 2022. 4. 2.

[9주차 스터디]41장-타이머 타이머 호출 스케줄링 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출을 예약하는 것을 호출 스케줄링 이라 함 자바스크립트에서 타이머 함수를 제공 타이머 생성 함수 : setTimeout, setInterval 타이머 제거 함수 : clearTimeout, clearInterval 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니다. Node.js 환경에서 전역 객체의 메서드 즉, 호스트 객체 타이머 함수를 사용해 생성한 타이머가 만료되면 콜백 함수가 호출되는 동작 방식 자바스크립트 엔진은 싱글 스레드(single thread)로 동작하기 때문에 타이머 함수 setTimeout, setInterval은 비동기 처리 방식으로 동작 한다. 타이머 함수 setTimeout/ c.. 2022. 3. 27.

[9주차 스터디]40장-이벤트 이벤트 브라우저는 처리해야 할 특정 사건이 발생하면 이벤트(event)를 발생 시킵니다. 특정 타입의 이벤트에 대해 호출 될 함수를 브라우저에게 알려 호출을 위임 한다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(event handler)라고 함 이벤트가 발생 했을 때 브라우저에게 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라고 한다. 이벤트 핸들러를 통해 사용자와 애플리케이션 간의 상호작용을 제어할 수 있고 이를 이벤트 드리븐 프로그래밍 이라 한다. 이벤트 핸들러 등록 이벤트 핸들러 : 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수 이벤트 핸들러 등록 방법 3가지 인벤트 핸들러 어트리뷰트 방식 HTML 요소의 어트리뷰트 중에 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다. 어트.. 2022. 3. 27.

[8주차 스터디]39장-DOM DOM DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API 즉, 프로퍼티와 메서드를 제공하는 트리 자료구조 이다. 노드 HTML 요소는 HTML 문서를 구성하는 개별 적인 요소를 의미합니다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환 HTML 요소 간에는 중첩 관계를 가질 수 있으며 이러한 관계를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 노드 객체의 타입 노드 객체는 상속 구조를 가지고 총 12개 종류의 노드가 있다. 대표적으로 4가지 중요한 노드 타입을 정리 할 수 있다. 문서 노드(document node) DOM 트리의 최상위에 존재하는 루트 .. 2022. 3. 27.

[8주차 스터디]38장-브라우저 렌더링 브라우저의 렌더링 과정 클라이언트 사이드의 자바스크립트는 브라우저 위에서 동작합니다. 브라우저가 HTML, CSS, javascript 로 작성된 텍스트 문서를 어떻게 파싱하여 렌더링하는지 이해하는 것이 중요합니다. 파싱(parsing) 파싱(구문 분석 syntax analysis)은 텍스트 문서를 읽어들여 실행하기 위해 텍스트 문서의 문자열을 토큰(token)으로 분해(어휘 분석 lexical analysis)하고 토큰의 문법적 의무와 구조를 반영하여 파스 트리(parse tree)를 생성하는 일련의 과정을 말합니다. 파싱이 완료된 이후에는 파스트리를 기반으로 중간언어인 바이트코드를 생성하고 실행합니다. 렌더링(rendering) 렌더링 HTML, CSS 자바스크립트로 작성된 문서를 파싱하여 브라우저에.. 2022. 3. 27.

이전 1 2 3 4 5 ··· 7 다음

티스토리툴바