Promise 기반으로 서버와 HTTP 통신을 할 수 있는 Fetch API에 대한 비동기 통신 예제입니다. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Fetch API </title> 6 </head> 7 <body> 8 <div id="user"&…

async 함수는 함수 안의 await 구문과 함께 비동기 작업을 제어합니다. await 키워드는 반드시 async 함수 안에서만 유효합니다. async 함수의 동작 방식은 다음과 같습니다. 처음 async 함수가 호출되어 await 키워드가 있는 비동기 작업(promise 객체)이 실행되면, 해당 비동기 함수는 이벤트 루프를 통해 비동기로 작업을 처리합니다. 그동안 async 함수는 이러한 비동기 작업이 완료될 때까지 일시 중지 상태로 비동기 작업(promise 객체)의 해결…

하나의 비동기 계산이 다른 비동기 계산의 결과에 의해 처리되어야 하는 경우가 많습니다. Promise가 나오기 이전에는 콜백 패턴을 통해 비동기 처리를 하였고, 중첩된 비동기 코드들을 처리하다 보면 콜백 피라미드 형태의 코드들이 쉽게 나왔었습니다. 이런 비동기 코드들의 조합을 Promise 기반으로 작성하면 명료한 코드를 작성할 수 있고 예외 처리를 손쉽게 할 수 있습니다. Promise의 then 메소드에서 새로운 비동기 코드를 실행하는 Promise를 반환할 수 있는데 다음…

Promise는 객체로써 언젠가 완료될 일(계산)을 나타냅니다. 완료되면 하나의 값을 결과로 반환하는데 실패하여 정상적인 값 대신 실패의 이유를 반환할 수도 있습니다. Promise 객체는 다음과 같은 세 가지의 상태를 가집니다. 대기중(Pending): 아직 결과가 없는 상태입니다. 약속을 했지만 아직 약속에 대한 결과가 나오지 않은 상태를 말합니다. 이행됨(Fulfilled): 비동기 처리가 성공적으로 완료되어 약속을 이행한 상태입니다. 이때 결과로 하나의 값…

클라이언트나 서버의 IP 주소를 검색하는 것은 웹 개발에서 일반적인 요구 사항으로, 분석, 보안 및 사용자 경험 맞춤화에 유용합니다. 여기에서는 JavaScript에서 IP 주소를 가져오는 다양한 기술을 살펴보고, 정확하고 효율적인 IP 주소 검색을 위한 방법을 살펴 봅니다. IP 주소 검색 이해 IP 주소는 클라이언트 측이나 서버 측에서 검색할 수 있습니다. 브라우저의 클라이언트 측 JavaScript는 보안상의 이유로 클라이언트의 IP 주소에 직접 액세스할 수 없지만 외부 …

과거에는 사용자가 파일을 탐색해서 업로드할 파일을 선택하고, 파일 입로드가 완료되어 페이지가 갱신될 때까지 오랫동안(진행 상황을 알려주는 표시나 피드백 없이) 기다려야 했는데 이는 굉장히 불편한 부분일 것입니다. 다행히 XHR은 두 가지 문제를 해결해 줍니다. XHR은 백그라운드로 파일을 업로드하면서 동시에 진행 이벤트도 제공하여 사용자에게 실시간 프로그레스바를 보여줄 수 있다. 주요 브라우저는 XHR을 지원합니다. 기존의 XMLHttpRequest API의 send() 함수…

setInterval 을 이용하면 실시간으로 채팅방을 구현할 수 있습니다. 아래 예제는 매 1초마다 통신을 하며 전송 버튼을 눌러 데이터 재요청을 할 수 있습니다. 멈춤을 누르면 통신을 중지합니다. <script> function getXMLHttps() {   if (typeof XMLHttpRequest != 'undefined') {     return new XMLHttpRequest();   } else {     try {      …

JSON데이터를 ajax 로 받아오는 예제입니다. GET 으로 jsondata.php 에 요청하고, 그 결과 값을 보기좋게 HTML로 출력합니다. jsondata.php 에는 아래 json 으로 구성되어 있을 때의 결과입니다. <?php header("Content-Type: application/json"); ?> { "name":"하보니", "age":20, "job"…

XML 데이터를 ajax 로 받아오는 예제입니다. GET 으로 test.xml 에 요청하고, 그 결과 값을 보기좋게 HTML로 출력합니다. test.xml 에는 아래 xml 로 구성되어 있을 때의 결과입니다. <?xml version="1.0" encoding="utf-8"?> <node> <book>도서1</book> <book>도서2</book> <l…

전송 버튼을 클릭하면 test.php 에 POST 로 name 과 age 값을 함께 전송합니다. 이렇게 전송된 값은 id 속성 "test" 에 결과 값이 출력되는 예제입니다. test.php 파일에는 아래 내용으로 작성되었을 때의 결과입니다. // test.php 내용 <?php print_r($_POST); ?> <script> function getXMLHttps() { if (typeof XMLHttpRequest !…

ajax 는 Asynchronous Javascript and XML의 약자로 비동기 자바스크립트와 XML 을 일컫습니다. 브라우저에서 새로고침 하지 않고도 ajax 를 통해 실시간으로 사용자에게 새로운 정보를 보여줄 수 있습니다. 메소드 설 명 XMLHttpRequest() Ajax 를 초기화 백그라운드에서 서버와의 송신을 위해 사용 open(method, url, as…