오늘의 CODE

자바스크립트의 비동기 처리는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드 먼저 실행하는 자바스크립트의 특성을 의미한다. 비동기 처리 사례 1. Ajax Web API 요청 : 서버쪽에서 데이터를 받아와야 하는 경우 function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }) return tableData; } console.log(getData()); // undefined $.get()은 jquery의 ajax 통신 부분으로 url로 HTTP GET 요청을 날려 1번에 대한 정보를 요청하는 코드이다. 이렇게 서버에서 받아온 ..

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이 때 생성된 함수 실행 컨텍스트는 콜스택에 추가되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 콜스택에서 제거된다. 함수의 실행 순서는 실행 컨텍스트 스택으로 관리하며 이는 뒤이어 설명할 동기, 비동기와도 밀접하게 연관되어 있다. 실행 컨텍스트(execution context) 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보를 모아놓은 객체이다. 실행 컨텍스트가 활성화되는 시점에는 다음과 같은 현상이 발생한다. 호이스팅이 발생한다.(선언된 변수(var)를 위로 끌어올린다) 외부 환경 정보를 구성한다. this의 값을 설정한다. 실행 컨텍스트의 구성 실행 컨텍스트는 코드를 실행할 때 필요한 환경 정보를 ..

MDN의 공식문서에 따르면 REST는 효율적, 안정적이며 확장 가능한 분산 시스템을 구현하는 소프트웨어 아키텍처 설계 제약의 모음을 나타낸다고 하며, 그 제약들을 준수했을 때 그 시스템은 RESTful하다고 일컬어진다고 한다. REST에 대한 설명 글은 많이 있지만, 사실 딱하니 머리속에 박히지 않았다. 알것도 같고 모를 것도 같고... 그러다 찾은 설명으로 REST는 HTTP URI를 통해 자원(resource)를 명시하고 HTTP Method(POST, GET.. etc)를 통해 해당 자원에 대한 CRUD operation을 적용하는 것으로 REST의 중심에 자원(resource)이 있고 HTTP Method를 통해 자원을 처리하도록 설계된 아키텍처를 의미한다고 했다. 웹에 존재하는 모든 자원(이미지..

JavaScript 객체의 분류 1) 표준 빌트인 객체 (standard built-in objects/native objects/global objects) ECMAScript 사양에 정의된 객체로 전역의 공통 기능을 제공한다. 표준 빌트인 객체(표준 내장 객체)는 전역 객체의 프로퍼티로 제공되며 별도의 선언없이 전역 변수처럼 언제나 참조할 수 있다. 2) 호스트 객체 (host objects) 자바스크립트 환경(브라우저 or Node.js 환경)에서 추가로 제공하는 객체를 말한다. 브라우저 환경에서는 클라이언트 사이트 Web API를 호스트 객체로 제공한다. (Web API 예시 - DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SV..

Promise의 3가지 상태 (states) Pending(대기) - 비동기 처리 로직이 아직 완료되지 않은 상태 Fullfilled(이행) - 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) - 비동기 처리가 실패하거나 오류가 발생한 상태 대기(Pending) 중인 promise는 값과 함께 이행할 수도, 어떤 이유(error)로 인해 거부 될 수도 있다. 이런 경우, promise의 then 메서드에 의해 대기열(큐)에 연결된 관련 이벤트가 호출된다. 해당 핸들러가 연결될 때 promise가 이미 이행됬거나 거부된 경우, 핸들러가 호출되므로 비동기 작업 완료와 연결 중인 핸들러 사이에 경합 조건은 없다. Promise.prototype.then() 및 Promise...

*비동기 처리 - 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행함. Promise 객체는 ES6에 도입된 기능으로 비동기 작업에 대한 결과(실패, 성공)를 나타내는 객체이다. 기본적으로 Promise는 함수에 콜백을 전달하는 대신 콜백을 첨부하는 방식의 객체이다. const myPromise = new Promise((resolve, reject) => { // code here }) [예시1] 비동기로 음성파일을 생성해주는 createAudioAsync(음성 설정 정보, 음성파일 생성 시 콜백함수, 음성파일 생성 실패 시 콜백함수)라는 함수가 있다고 가정해보자. // createAudioAsync() - 비동기로 음성 파일을 생성해주는 함수 // audioSetting(음성 설..

ES6 부터 등장한 Spread Operator는 점 3개가 연달아 붙어 있는 표시로 mdn에서는 전개구문으로 검색 시 결과를 확인할 수 있으며, 배열, 함수, 객체 등을 다루는 데 있어서 새로운 기능을 제공한다. 기본 문법 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체(Iterable Object)를 개별요소로 분리할 수 있다. // Number const arr1 = [1, 2, 3, 4, 5]; const arr2 = [...arr1, 6, 7, 8, 9]; console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9] // String const str1 = "bitter sweet"; const str2 = [...str1]; console.lo..

필터(Filter)로 배열 중복 제거 filter()를 이용해서 조건에 맞는 요소만을 반환받는 방식으로 중복 요소 없는 배열을 만들 수 있다. filter는 배열 요소의 선택 조건을 직접 정할 수 있기 때문에 중복 제거가 아니어도 다양한 조건에 맞는 배열을 얻을 수 있다. const arr = ['Ryan', 'Amy', 'Ted', 'Lily', 'Ryan', 'Rick']; const arrUnique = arr.filter((val, idx) => { return arr.indexOf(val) === idx; // 값이 처음 나오는 배열 인덱스와 현재 인덱스가 같으면 포함 }); console.log(arrUnique); // ['Ryan', 'Amy', 'Ted', 'Lily', 'Rick] * ..

사용법 let regexp = /^[0-9]*$/, val = document.querySelector('input).value; if( !regexp.test(val) ) { alert("숫자만 입력하세요"); val = val.replace(regexp,''); } 정규식 모음 1. 한글만 /[a-z0-9]|[ \[\]{}()?|`~!@#$%^&*-_+=,.;:\"'\\]/g 2. 자음/모음 불가 /([^가-힣\x20])/i 3. 자음/모음 가능 /([^가-힣ㄱ-ㅎㅏ-ㅣ\x20])/i 4. 이메일 // 기본체크 /^[-A-Za-z0-9_]+[-A-Za-z0-9_.][@]{1}[-A-Za-z0-9_]+[-A-Za-z0-9_.][.]{1}[A-Za-z]{1,5}$/ /^([a-z0-9_\.-]+)@([\..

자바스크립트 정규식 생성 // 리터럴 방식 const regex = /abc/; // 생성자 방식 const regex = new RegExp("abc"); /패턴(pattern)/플래그(flag) 정규식 플래그(Flags) Javascript에서 정규식을 생성할 때 고급 검색을 위한 옵션을 정할 수 있도록 플래그를 지원한다. 플래그는 리터럴 방식인지 생성자 방식인지에 따라 설정하는 방식이 다르다 // flags에 필요한 설정값이 들어감 const regex1 = /abc/flags; const regex2 = rew RegExp(/abc/, flags); Flag Meaning Description i Ignore Case 대소문자를 구별하지 않고 검색 g Global 문자열 내의 모든 패턴 검색 m ..