Topic

자바스크립트

A collection of 197 posts
자바스크립트

프로미스 Async/Await

기존 프로미스의 사용 방법을 개선하기 위해 ES8에서 소개된 비동기 처리 함수입니다. Async 함수는 내부에서 프로미스를 사용해 비동기 요청 결과를 반환합니다. 프로미스와 다른 점은 일반 동기 함수를 작성하는 것처럼 코드가 구성되기 때문에 기존 코드와 이질감이 없어 가독성이 좋아집니다. Async 함수는 Await 와 쌍을 이루어 사용합니다. 프로미스의 체인 방식 then() ~ catch() 를
3 min read
자바스크립트

타이머를 이용한 지연 실행과 반복 실행

타이머 함수는 이미지 슬라이드, 시계, 타이머, 반응 대기, 로그인 유지를 위한 시그널 전송, 일정 주기의 화면 갱신 등 일정 시간 후에 실행하거나, 반복적으로 자동 재실행하는 웹 기능을 구현하는데 사용합니다. 자바스크립트는 이런 기능을 이한 전역 함수 2개를 제공합니다. setTimeout() 은 지연 시간 후 1번 콜백 함수를 실행하고 종료하며, setInterval() 은 지연
8 min read
자바스크립트

맵(Map)의 이해

맵(Map) 은 키(Key)와 값(Value)을 한쌍으로 해서 저장되는 데이터 저장 구조입니다. 다른 개발언어에 익숙하면 컬렉션(Collection) 이나 딕셔너리(Dictionary) 와 같은 구조입니다. 맵은 자바스크립트의 일반 객체 사용 방식과 동일합니다. 실제 메서드들도 객체의 사용법과 상당히 유사합니다. 자바스크립트 객체와 맵의 결정적인 차이점은 사용할 수 있는 키의 범위입니다. 자바스크립트
5 min read
자바스크립트

프로미스(Promise) 기초

프로미스(Promise)의 배경 프로미스(Promise)를 한 문장으로 표현하면 "비동기 콜백 지옥의 해결책" 라고 할 수 있습니다. XMLHttpRequest 객체로 비동기 통신을 하게되면 콜백 함수를 사용해 응답에 대한 처리를 해야합니다. 만약 XMLHttpRequest 객체로 받은 응답을 기초로 다시 비동기 요청을 한다면 어떻게 될까? 실제로 복잡한 서비스를 구현하는 경우 2~3단계 이상
9 min read
자바스크립트

[javascript] 더 간편한 프로미스(Promise)를 위한 패치(Fetch)

프로미스(Promise) 기반의 AJAX 즉, 비동기 통신을 프로미스 기반으로 간편하게 사용할 수 있도록 구현한 메서드가 패치(Fetch) 입니다. 기존 XMLHttpRequest 객체를 이용하는 AJAX와 기술적으로는 동일합니다.  일종의 프로미스용 래퍼(Wrapper) 라고 이해하면 쉽습니다. 사용 구문이나 구조가 XMLHttpRequest 보다 간단하기 때문에 프로미스를 비동기 통신에 사용하고 있다면, 패치를 이용하는 것을 추천합니다. !주의할 점
5 min read
자바스크립트

반복문 기초2 - while

while 반복문은 조건 체크를 먼저하는 while 과 조건 체크를 나중에 하는 do ~ while 2가지로 나뉩니다. do ~ while 반복문은 조건 체크가 나중에 있는 만큼 무조건 1번은 반복 실행문이 실행되는 차이가 있습니다. 기본적으로는 while 문을 사용하며, 무조건 1번은 실행하는 조건이 있는 반복 처리시 do ~ while 문을 선택적으로 사용합니다. 두 반복문의 구조는 다음과
3 min read
자바스크립트

[javascript] AJAX 와 JSON

AJAX 로 받아오는 대부분의 데이터는 JSON 포맷입니다. AJAX 받아올 수 잇는 데이터 포맷에 제약이 있는 것은 아니지만, 웹에서 오고가는 데이터의 대부분이 JSON으로 표현이 가능하기 때문에 사실상 표준으로 정착해 있습니다. AJAX 응답으로 받은 JSON 데이터는 그냥 사용할 수는 없고 데이터 변환을 해야 합니다. 응답을 받은 XMLHttpRequest 객체에는 responseText 속성이 있고, 속성값으로
3 min read
자바스크립트

[javascript] XMLHttpRequest 객체 호환성 구현

최신의 웹브라우저들은 자바스크립트 XMLHttpRequest 객체를 잘 지원합니다. 국내의 경우 공공기관 등을 통해 아직 인터넷 익스플로러 10/11 과 같은 구 웹브라우저가 적지 않게 사용되고 있습니다. 구 브라우저들은 표준 XMLHttpRequest 객체를 지원하지 않습니다. 특히 인터넷 익스플로러는 독자 규격의 비동기 객체를 사용하기 때문에 표준 자바스크립트 XMLHttpRequest 를 사용할 수 없습니다. 웹브라우저 호환성이
2 min read
자바스크립트

AJAX 비동기 통신 기초(XMLHttpRequest)

비동기 웹 어플리케이션 제작을 위해 개발된 자바스크립트 기술입니다. AJAX 는 Asynchronous Javascript and XML 의 약자입니다. 최초에는 XML/XLST 포맷 데이터를 서버와 비동기로 주고받기 위해 고안된 자바스크립트 기술이었으나, 서버와 주고받는 데이터가 JSON 포맷으로 사실상 표준화 되면서 현재는 JSON 데이터를 주로 주고받는 웹 비동기 기술로 정착했습니다. AJAX는 HTML, XML, JSON 등의
5 min read