본문 바로가기

programming study

 (889)
45장. 프로미스(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 45.0 프로미스란? 전통적인 비동기 처리 방식인 콜백 함수는 콜백 헬을 야기 나쁜 가독성 에러 핸들링의 문제 프로미스 ES6 콜백 패턴의 단점 보완 비동기 처리 시점을 명확하게 표현 비동기 함수 코드가 완료되지 않아도 기다리지 않고 즉시 종료 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료됨 처리 결과를 외부에 반환 불가 상위 스코프의 변수에 할당 불가 후속 처리는 비동기 함수 내부에서 수행해야 함(콜백 함수) 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 비동기 함수는 처리 결과를 외부에 반환 불가 태스크 큐에 저장되어 대기 -> 콜스택이..
44장. REST API 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 44.0 REST API란 HTTP의 장점을 최대한 활용할 수 있는 아키텍처 REST HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API REST를 기반으로 서비스 API를 구현한 것ㅇ RESTful REST의 기본 원칙을 성실히 지킨 서비스 디자인 44.1 REST API의 구성 자원, 행위, 표현의 3가지 요소로 구성 자원: URI(엔드포인트) 행위: HTTP 요청 메서드 표현: 자원에 대한 행위의 구체적 내용 44.2 REST API 설계 원칙 URI는 리소스를 표현 HTTP 메소드는 행위에 대한 정의 44.3 HTTP 메소드 GET : 자원을..
43장. Ajax(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 43.3 XMLHttpRequest 자바스크립트를 사용하여 HTTP 요청을 전송할 수 있는 객체 Web API HTTP 요청 전송, HTTP 응답 수신을 위한 메세드 제공 43.3.1 XMLHttpRequest 객체 생성 XMLHttpRequest 생성자 함수를 호출하여 생성 Web API이므로 브라우저 환경에서만 정상 실행 const xhr = new XMLHttpRequest(); 43.3.2 HTTP 요청 전송 XMLHttpRequest.prototype.open 메서드로 HTTP 요청을 초기화 XMLHttpRequest.prototype.setRequestHeader 메서드로 HTTP ..
43장. Ajax(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 43.1 Ajax란? Asynchronous JavaScript and XML 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 동적으로 갱신하는 프로그래밍 방식 XMLHttpRequest 객체를 기반으로 동작 HTTP 비동기 통신을 위한 메서드와 프로퍼티 제공 이전의 웹 페이지는 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 렌더링 불필요한 데이터 통신 발생 처음부터 다시 렌더링하여, 화면이 순간적으로 깜빡거리는 현상 발생 동기 방식으로 동작하여 다음 처리는 블로킹 Ajax는 전통적인 패러다임을 획기적으로 전환 웹 페이지 변..
Vue.js - 엑시오스 인터셉터 1. 엑시오스 인터셉터 서버로 요청 또는 서버로부터의 응답을 처리하기 전에 로직을 정의할 수 있음 axios.interceptors.request.use axios.interceptors.response.use 2. 엑시오스 인터셉터를 활용한 HTTP Header Authorization 토큰 설정 엑시오스 인스턴스를 생성할 때 HTTP Header Authorization 토큰을 지정하여도, 처음 초기화 시점에서는 토큰이 없기 때문에 로그인 이후에도 토큰이 Header에 실리지 않음 엑시오스 인터셉터를 활용해서 Vuex에 token이 있을 때 HTTP Header Authorization 지정 api/common/interceptors.js 엑시오스 인터셉터 모듈 부분을 모듈화 // 스토어 가져오기 i..
Vue.js - 토큰 1. 토큰 유저가 유효한 권한을 가지고 있는지를 판별하기 위한 값 401 Error: api를 요청하였을 때, 유저가 유효한 권한이 없을 경우에 발생 주로 로그인 이후에 서버로부터 부여받음 JWT JSON Web Token JSON Object로 표현되는 토큰 HMAC, RSA 등의 알고리즘에의해 암호화될 수 있음 2. HTTP 헤더에 토큰 값을 싣기 axis 인스턴스를 생성할 때, HTTP Header Spec인 Authorization을 지정할 수 있음 token을 지정하여 API 호출 시, 권한을 인증 import axios from 'axios'; ​ const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, // HTTP Head..
42장. 비동기 프로그래밍 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 42.1 동기 처리와 비동기 처리 함수의 실행 순서는 실행 컨텍스트 스택으로 관리 함수가 실행되면 함수 실행 컨텍스트가 생성 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시 함수 실행의 시작 함수 코드가 실행 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에 팝되어 제거 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가짐 함수를 실행할 수 있는 창구가 단 하나 동시에 2개 이상의 함수를 실행 불가 싱글 스레드 한 번에 하나의 태스크만 실행 가능 블로킹 작업 중단 처리에 시간이 걸리는 태스크를 실행하는 경우 동기 처리 실행 중인 태스크가 종료할 때까지 실행될 태..
41장. 타이머 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 41.1 호출 스케줄링 호출 스케줄링 : 함수를 일정 시간이 경과된 이후에 호출되도록 하려면, 타이머 함수를 사용 setTimeout : 일정 시간이 경과된 이후 콜백 함수가 호출되도록 함 clearTimout : 등록된 타이머를 제거 setInterval : 일정 시간 마다 콜백 함수가 호출되도록 함 clearInterval : 등록된 인터벌을 제거 JavaScript는 하나의 실행 컨텍스트 스택을 가지므로 두 가지 이상의 태스크를 동시에 실행할 수 없음 싱글 스레드로 동작 때문에, 타이머 함수들은 비동기 처리 방식으로 동작 41.2 타이머 함수 41.2.1 setTImeout / clear..

티스토리툴바