JavaScript10 JS 이벤트 처리 - 8(Ajax Fetch) 학습 목표 1. AJAX에 대해 알아 보자 2. Fetch API란? 3. Fetch API 사용해보기 1. AJAX에 대해 알아 보자 JAX (Asynchronous JavaScript and XML) AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술입니다 전통적인 방식의 문제점: 웹 페이지에서 데이터를 서버로 전송하면 새로운 페이지를 로드해야 했음. 이로 인해 화면이 깜빡이거나, 데이터 양이 많을 경우 웹 사이트가 느려지는 문제가 발생함. AJAX의 장점: 웹 페이지의 특정 부분만을 동적으로 업데이트하여 전체 페이지 리로드 없이 데이터를 갱신. 사용자 경험이 향상되며, 서버 부하 감소로 웹 애플리케이션의 성능 개선 가능. 기술적 세부 사항: 원래 XMLHttpRequest 객체.. 2023. 10. 10. JS 이벤트 처리 - 7(Promise) 학습 목표 1. Promise 타입에 대해 알아 보자. 2. Promise 타입 선언과 활용 1. Promise 타입에 대해 알아 보자. 자바스크립트 Promise는 비동기 작업을 처리하기 위한 객체입니다. Promise는 어떤 작업의 결과를 반환하는 객체로서, 이를 통해 비동기적으로 실행되는 작업을 처리하고 그 결과를 콜백 함수 등을 이용해 처리할 수 있습니다. Promise는 총 3가지 상태를 갖습니다. 대기(pending): Promise 객체가 생성되었으나 아직 처리가 진행되지 않은 상태입니다. 이행(fulfilled): Promise 객체가 처리를 완료하여 결과를 반환한 상태입니다. 거부(rejected): Promise 객체가 처리를 실패하였거나 오류가 발생한 상태입니다. 자바스크립트 엔진은 .. 2023. 10. 10. JS 이벤트 처리 - 1 (기본) 학습 목표 1. HTML 요소에 이벤트 등록하기 2. 이벤트 등록 및 이벤트 핸들러 처리 ( C R U D ) 1. HTML 요소에 이벤트 등록하기 자바스크립트 이벤트는 웹 페이지에서 발생하는 다양한 동작이나 발생 상황을 나타냅니다. 이런 이벤트를 활용하여 사용자의 행동에 반응하는 동적인 웹 페이지를 만들 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때 메시지가 나타나게 하거나, 마우스를 웹 페이지의 특정 부분에 올렸을 때 스타일이 변경되게 할 수 있습니다. 이벤트를 활용하려면, 먼저 HTML 요소에 이벤트를 등록해야 합니다. 이벤트 등록에 대표적인 3가지 방식 Inline Event Handler : HTML 요소 내부에 직접 이벤트를 등록합니다. Element Property : 자바스크립트에서.. 2023. 10. 5. JS - 점검 6(웹 페이지 렌더링 과정) 학습 목표 1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자 2. 연습 문제 - 오류 해결 1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자 웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어집니다 HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성합니다. CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성합니다. 렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성합니다. 레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산합니다. 페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변.. 2023. 10. 5. 이전 1 2 3 다음
