728x90 반응형 JavaScript25 [JavaScript] 실행 환경 비교 (브라우저 vs node.js) 브라우저 - 주요 목적 : HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것 - 브라우저에서만 제공하는 API · UI 관련 API · window, document 등 객체 - ES 모듈 표준 → import를 이용하여 다른 파일의 코드를 불러옴 node.js - 브라우저에서만 작동하던 JS를 외부 응용 프로그램으로 분리함 → 브라우저 없이 작동할 수 있도록 하는 자체 엔진 - 웹을 벗어나, JS를 활용한 서버 등을 만들 수 있게 됨 - 주요 목적 : 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것 → 서버 개발 환경 제공 - node.js에서만 제공하는 API · 컴퓨터 제어 API (파일시스템 제어 API 등) · 데이터 핸들링 API - CommonJS 모듈 시스템.. 2023. 8. 3. [JavaScript] 비동기 통신 : AJAX # 비동기식 통신 방식을 사용하지 않을 경우 - 웹 페이지에서 사용자 입력을 받고, 서버로 데이터를 전송하여 새로운 페이지를 받아옴 → 화면이 깜빡이는 등의 불편한 경험을 제공하며, 데이터량이 많아지면 더욱 느려짐 → 개선 : AJAX AJAX 통신 (Asynchronous JavaScript and XML) - 자바스크립트를 사용하여 비동기적으로 서버와 데이터를 주고받는 기술 - 웹 페이지에서 동적으로 데이터를 가져오거나, 업데이트하는 기술 - 서버와 비동기적으로 데이터를 주고받음 → 필요한 부분만 화면을 갱신함 → 화면 전환이 발생하지 않음 (화면이 깜빡이지 않음) - 자바스크립트를 사용해서 서버에 요청을 보내고, 이에 대한 응답을 처리함 · XMLHttpRequest 객체를 사용하여 서버와 통신함 .. 2023. 5. 9. [JavaScript] 비동기 통신 기초 : Promise 타입 Promise 객체 - 비동기적으로 실행되는 작업을 처리하고, 그 결과를 콜백 함수 등을 이용해 처리하는 객체 - 어떤 작업의 결과를 반환하는 객체 # Promise의 상태 1) 대기 (Pending) : Promise 객체가 생성되었으나, 아직 처리가 진행되지 않은 상태 2) 이행 (Fulfilled) : Promise 객체가 처리를 완료하여 결과를 반환한 상태 3) 거부 (Rejected) : Promise 객체가 처리를 실패했거나, 오류가 발생한 상태 비동기 작업 처리 - 자바스크립트 엔진은 싱글 스레드로 동작함 ▶ Call Stack : 현재 실행 중인 함수를 기록하는 스택 · Java의 스택 메모리와 유사 ▶ Message Queue (Task Queue) : 비동기 작업이 완료되었을 때 등록되.. 2023. 5. 9. [JavaScript] AJAX 통신을 이용해서 데이터 가져오기 코드더보기1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo.. 2023. 5. 9. [JavaScript] toggle() 활용 예제 코드 12345678910111213141516171819202122232425262728<head> ... <style> .like--heart { font-size: 100px; color: gray; &.. 2023. 5. 8. 이전 1 2 3 4 5 다음 728x90 반응형
