웹개발/javascript (24) 썸네일형 리스트형 자바스크립트의 비동기 처리 기본 1 비동기란? 기본개념 일반적으로 코드는 순차적으로 진행된다. 만약 어떤 함수의 결과가 다른 함수에 영향을 준다면, 그 함수가 끝나고 값을 산출할 때까지 기다려야한다(동기). 유저 입장에서 보면 이건 마치 전체 프로그램이 멈춘것처럼 느껴진다(blocking). 이렇게 기다리지 않고 동시에 다른 작업을 수행할 수 있는 것이 비동기의 기본적인 개념이다. blocking 웹 앱이 브라우저에서 특정한 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않아 브라우저가 정지된 것처럼 보이는 현상, 즉 사용자의 입력을 처리하느라 웹 앱이 프로세서에 대한 제어권을 반환하지 않는 현상을 말한다. (이벤트 처리가 일어나는 동안 다음작동을 막아버림) 왜 이런 일이 일어날까? 기본적으로 자바스크립트는 싱글 스레드이기 때문이다. 스.. localStorage & sessionStorage localStorage와 sessionStorage localStorage와 sessionStorage는 브라우저 내에 키-값을 저장할 수 있게 해주는 웹 스토리지 객체(web storage object)이다. 쿠키와 차이점 1. 웹 스토리지 객체는 네트워크 요청시 서버로 전송되지 않는다. 그래서 쿠키보다 더 많은 자료를 보관할 수 있다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다. 2. 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서만 수행된다. 3. 웹 스토리지 객체는 도메인.프로토콜.포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다. 4. 쿠키는 .. 자바스크립트 fetch fetch란? fetch()는 최신 AJAX 요청 문법으로 서버로부터 데이터를 요청하는 API이다. fetch의 기본 문법 let promise = fetch(url, [options]) url – 접근하고자 하는 URL options – 선택 매개변수, method나 header 등을 지정할 수 있다. options에 아무것도 넘기지 않으면 요청은 GET 메서드로 진행되어 url로부터 콘텐츠가 다운로드된다. fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프로미스가 반환된다. fetch(url, [options]).then(callback).catch(callback); 프로미스가 반환되기 때문에 fetch 요청 후에 .then()에서 응답(response) 객체를 받고 catch에서 요청에.. 자바스크립트 async & await async & await 이란? async와 await은 새로운 개념이 추가된 것이 아니라 프로미스의 syntactic sugar이다. (*syntactic sugar: 기존에 존재하는 것을 감싸서 조금 더 간편한 API를 제공하는 것 ex) 클래스 ) 프로미스를 조금 더 간결하고 간편하고 그러고 동기적으로 실행되는 것처럼 보이게 만들어준다. async & await 기본 문법 함수 앞에 async라는 예약어를 붙인다. 그러고 나서 함수의 내부 로직 중 비동기 처리 코드 앞에 await을 붙인다. (일반적으로 await의 대상이 되는 비동기 처리 코드는 axios 등 프로미스를 반환하는 API 호출 함수이다.) async function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환한다. 프.. 프라미스 Promise 란 무엇인가? 프라미스란? 자바스크립트 비동기 처리에 사용되는 객체이다. 비동기 연산이 종료된 이후 결과 값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있어 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 값을 반환하는 것이 아니고 프라미스를 반환해서 미래의 어떤 시점에 결과를 제공한다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 프라미스가 필요한 이유는? 자바스크립트의 비동기 처리의 문제점을 해결하기 위해 사용한다. 프라미스(promise)는 프로듀서와 컨슈머를 연결해 주는 자바스크립트 객체이다. 따라서 정보를 제공하는 프로듀서(producer)와 정보를 소비하는 컨슈머(consumer)를 잘 알아야 한다. 프로듀서(producer) 프라미스는 class이기 때문에 new라는 키워드를 .. 자바스크립트의 비동기처리 & 콜백 함수 동기식 처리 모델(Synchronous processing model) 일(task)을 직렬적, 순차적으로 처리하여 어떤 작업이 수행하는 동안 다음 작업은 대기하게 된다. 비동기식 처리 모델(Asynchronous processing model) 일(task)를 병렬적으로 수행한다. 어떤 작업이 수행하는 동안 다음 작업이 대기하지 않고 수행된다. 즉 자바스크립트에서 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 실행하는 것이다. 자바스크립트의 대부분의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다. ( setTimeout의 콜백함수는 즉시 실행되지 않고 지정 대기 시간만큼 기다리다가 “tick”.. 자바스크립트 JSON 브라우저 위에서 동작하고 있는 웹 애플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지를 정의한 것이 http (Hypertext Transfer Protocal) 이다. 클라이언트가 서버에 하이퍼텍스트를 요청하고 서버가 그 데이터를 응답하는 방식으로 진행이 되는데 여기서 하이퍼 텍스트는 하이퍼링크, 문서나 이미지 파일들을 모두 포함해서 말한다. 이렇게 서버에게 데이터를 요청해서 받아올 수 있는 방법으로는 ajax를 사용하는 방법이 있다. ajax는 Asynchronous JavaScript And XML 의 약자로 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술을 의미한다. 대표적인 예로는 XHR (XMLHttpRequest)라는 오브젝트가 있다. 이것은 브라우저에서 제공하는.. 자바스크립트 데이터 타입 : 오브젝트 Objects 자바스크립트 오브젝트 오브젝트는 자바스크립트의 데이터 타입 중 하나로 연관된 데이터들을 묶어놓은 것으로 키와 벨류로 이루어진다. 오브젝트에는 프리미티브 타입이 들어있는데 프리미티브 타입은 변수 하나당 값을 하나만 담을 수 있고 자바스크립트에서는 클래스가 없어도 바로 오브젝트를 생성할 수 있다. const obj = {}; // 'object literal' syntax const obj1 = new Object(); //'object constructor' syntax function print(person) { console.log(person.name); console.log(person.age); } const bob = { name: "bob", age: 4 }; print(bob); // bob.. 이전 1 2 3 다음