문돌이 Theo

Axios ref : https://axios-http.com/docs/intro Promise based HTTP client for the browser and node.js 브라우저를 위한 Promise 기반의 클라이언트 원래 'XHR'이라는 브라우저 내장 객체를 활용해 AJAX 요청을 처리하는데, 이보다 편리한 AJAX 요청이 가능하도록 도와주는 기능 확장 가능한 인터페이스와 함께 패키지로 사용이 간편한 라이브러리를 제공 Installing npm 사용 시 $ npm install axios CDN 사용 시 jsDelivr CDN unpkg CDN Axios 예시 const URL = 'https://jsonplaceholder.typicode.com/todos/1/'..

Promise Promise object 비동기 작업의 최종 완료 또는 실패를 나타내는 객체 미래의 완료 및 실패와 그 결과 값을 나타냄 미래의 어떤 상황에 대한 약속 성공(이행)에 대한 약속 .then() 실패(거절)에 대한 약속 .catch() Promise의 상태 대기 (pending) 이행하거나 거부되지 않은 초기 상태 이행 (fullfilled) 연산이 성공적으로 완료됨 거부 (rejected) 연산이 실패함 Promise methods .then(callback) 이전 작업(이 또한 promise 객체)이 성공했을 때(이행했을 때) 수행할 작업을 나타내는 콜백 함수 각 콜백 함수는 이전 작업의 성공 결과를 인자로 전달 받음 따라서 성공했을 때의 코드를 콜백 함수 안에 작성 .catch(call..

Callback Function (콜백 함수) & Promise 다른 함수에 인자로 전달된 함수 외부 함수 내에서 호출되어 일종의 루틴 또는 작업을 완료함 동기식, 비동기식 모두 사용됨 비동기 작업이 완료된 후 코드 실행을 계속하는데 사용되는 경우 비동기 콜백이라고 함 JS의 함수는 "일급 객체" 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체(함수) 일급 객체의 조건 인자로 넘길 수 있어야 함 함수의 반환 값으로 사용할 수 있어야 함 변수에 할당할 수 있어야 함 Async callbacks (비동기 콜백)로 활용 백그라운드에서 코드 실행을 시작할 함수를 호출할 때 인자로 지정된 함수 백그라운드 코드 실행이 끝나면 콜백 함수를 호출하여 작업이 완료되었음을 알리거나, 다음 작업을 실행하게 할 수 있음..

Asynchronous JS 동기(Synchronous)와 비동기(Asynchronous) 동기식 순차적, 직렬적 테스트 수행 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐 (blocking) 비동기식 병렬적 태스크 수행 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐 (non-blocking) 즉, 요청을 보내놓고 다음 태스크로 진행 왜 비동기(Asynchronous)를 사용하는가? 사용자 경험 예를 들어 데이터를 구동하고 실행되는 앱이 있으며 이 데이터의 크기가 굉장히 크다고 가정 동기식 코드라면 데이터를 모두 로드한 뒤에야 앱이 실행되기 때문에, 로드되는 동안 우리는 앱을 사용할 수 없는 상태로 얼마나 걸릴지 모르는 로딩 시간을 기다려야함 즉, 앱이 멈춘 것처럼 보임 이처럼 동기식..

AJAX Asynchronous Javascript And XML (비동기식 js와 xml) 서버와 통신하기 위해 XMLHttpRequest 객체를 활용 XMLHttpRequest는 동기식과 비동기식 통신을 모두 지원 페이지 전체를 reload를 하지 않고서도 수행되는 "비동기성" 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라는 장점 때문에 JSON을 더 많이 사용 2005년 Google Maps & Gmail 등에 활용되는 기술을 설명하기 위해 AJAX라는 용어를 최초로 사용 AJAX는 특정 기술이 아닌 기존의 여러 기술을 사용하는 새로운 접근법을 설명하는 용어 Google 사용 예시 ..

Arrays (배열) 배열의 정의와 특징 파이썬의 리스트와 비슷한 참조 타입의 객체 순서를 보장하는 특징이 있음 주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에접근 가능 배열의 길이는 array.length의 형태로 접근 가능 배열의 마지막 원소는 array.length -1로 접근 배열 관련 주요 메서드 (기본) 메서드설명비고 reverse원본 배열의 요소들의 순서를 반대로 정렬 push & pop배열의 가장 뒤에 요소를 추가 또는 제거 unshift & shift배열의 가장 앞에 요소를 추가 또는 제거 includes배열의 특정 값이 존재하는지 판별 후 참/거짓 반환 indexOf배열의 특정 값이 존재하는지 판별 후 인덱스 반환요소가 없을 경우 -1 반환join배열의 모든..

Functions (함수) 함수 in JavaScript 참조 타입 중 하나로써 function 타입에 속함 자바스크립트에서 함수를 정의하는 방법은 주로 2가지로 구분 함수 선언식 (function declaration) 함수 표현식 (function expression) 자바스크립트의 함수는 일급 객체에 해당 일급 객체 : 다음 조건들을 만족하는 객체를 의미함 변수에 할당 가능 함수의 매개변수로 전달 가능 함수의 반환 값으로 사용 가능 함수 선언식 (function statement, declaration) 함수의 이름과 함께 정의하는 방식 3가지 부분으로 구성 함수의 이름 (name) 매개변수 (args) 몸통 (중괄호 내부) 함수 표현식 (function expression) 함수를 표현식내에서 정..

Conditions (조건문) 조건문의 종류와 특징 if statement 조건 표현식의 결과값을 Boolean 타입으로 변환 후 참/거짓을 판단 switch statement 조건 표현식의 결과값이 어느 값(case)에 해당하는지 판별 주로 특정 변수의 값에 따라 조건을 분기할 때 활용 조건이 많아질 경우 if문보다 가독성이 나을 수 있음 if statement 조건문 if, else if, else 조건은 소괄호 ()안에 작성 실행할 코드는 중괄호 {} 안에 작성 블록 스코프 생성 switch statement 조건문 switch 표현식의 결과값을 이용한 조건문 표현식의 결과값과 case문의 오른쪽 값을 비교 break 및 default 문은 [선택적]으로 사용 가능 break문이 없는 경우 brea..

Types (데이터 타입) 데이터 타입 종류 자바스크립트의 모든 값은 특정한 데이터 타입을 가짐 크게 원시 타입(Primitive type)과 참조 타입(Reference type)으로 분류됨 원시 타입 (Primitive type) 객체 (object)가 아닌 기본 타입들을 말함 변수에 해당 타입의 값이 담김 다른 변수에 복사할 때 실제 값이 복사됨 숫자 (Number) 타입 정수, 실수 구분 없는 하나의 숫자 타입 부동소수점 형식을 따름 NaN (Not-A-Number) 계산 불가능한 경우 반환되는 값 문자열 (String) 타입 텍스트 데이터를 나타내는 타입 16비트 유니코드 문자의 집합 작은따옴표또는 큰따옴표 모두 가능 템플릿 리터럴 (Template Literal) ES6부터 지원 따옴표 대신 ..

Variables & Identifiers (변수와 식별자) 식별자 정의와 특징 식별자(identifier)는 변수를 구분할 수 있는 변수명을 말함 식별자는 반드시 문자, 달러($) 또는 밑줄(_)로 시작 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작 예약어 사용 불가능 예시: for, if, case 등 식별자 작성 스타일 카멜 케이스(camelCase, lower-camel-case) 변수, 객체, 함수에 사용 파스칼 케이스(PascalCase, upper-camel-case) 클래스, 생성자에 사용 대문자 스네이크 케이스(SNAKE_CASE) 상수에 사용 상수 : 개발자의 의도와 상관없이 변경될 가능성이 없는 값 // 카멜 케이스 const userInfo = { name: 'Theo',..