Javascript

Promise.all() Promise.all() - JavaScript | MDNPromise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫developer.mozilla.org Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환한다.const p1 = Promise.resolve('하나')const p2 = Promise.resolve('둘')const p3 = Promise.resolve('셋')const result = Promise.all([p1,..

문자 키를 눌렀을 때만 발생하던 keypress 이벤트가 deprecated 됐기 때문에 keydown 이나 keyup 이벤트를 통해 문자 입력 이벤트를 감지해야 한다.이때 keydown과 keyup 사이에는 차이점이 조금 존재하기 때문에 쓰임새에 맞춰 적절한 이벤트를 선택하는 것이 필요하다.  keydown키를 눌렀을 때 발생모든 키문자, 숫자, 특수 문자, enter 키를 눌렀을 때는 연속적으로 발생그 외의 키는 한 번만 발생 keyup누르고 있던 키를 놓았을 때 한 번만 발생모든 키 목적검색 입력 값만 따로 추출 이때 KeyboardEvent의 key 프로퍼티를 활용하고자 했다. KeyboardEvent: key property - Web APIs | MDNThe KeyboardEvent inter..

const data = [ { name: 'a', value: 'b' }, { name: 'c', value: 'd' },];이런 형태의 데이터를{ "a": "b", "c": "d"}이렇게 만들고 싶을 때 ⬇️ const dataArr = data.reduce((acc, item) => { acc[item.name] = item.value; return acc;}, {});const jsonString = JSON.stringify(dataArr, null, 2);1. 배열 고차 함수인 reduce를 이용해 {a: 'b', c: 'd'} 형태의 객체로 먼저 변환2. JSON.stringify를 실행하여 JSON으로 변환  🔎 Array.prototype.reducereduce 메서드는 자신을..

ES6에서는 상당히 많은 부분의 변화가 있었는데 그 중에서도 객체를 다루는 방법이 상당히 편리해졌다.알아두면 자바스크립트 코드를 짜는데 매우매우매우매우 유용하다.  1. 속성명 축약객체를 정의할 때 key에 할당하는 변수의 이름이 같으면 축약이 가능하다.var student = ['Lee', 'Kim', 'Cho'];var teacher = ['Yoo', 'Choi'];// ES5var school = { student: student, teacher: teacher,}// ES6+const school = { student, teacher,}※ ES6에서는 호이스팅 개선을 위해 let, const 선언자가 추가되었다.    2. 메서드명 축약메서드 선언 시 function 키워드를 생략 가능하다.// ..

1) 모듈의 일반적 의미모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다.모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. 이를 import라 한다. 모듈은 기능별로 분리되어 개별적인 파일로 작성된다. 따라서 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고, 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다.  2) 자바스크립트와 모..

1) 에러 처리의 필요성에러가 발생하지 않는 코드를 작성하는 것은 불가능하다. 따라서 에러는 언제나 발생할 수 있다. 발생한 에러에 대처하지 않고 방치하면 프로그램은 강제 종료된다.직접적으로 에러를 발생하지는 않는 예외적인 상황이 발생할 수도 있다. 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성이 크다.따라서 우리가 작성한 코드에서는 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다.   2) try … catch .. finally 문기본적으로 에러 처리를 구현하는 방법은 크게 두 가지가 있다.예외적인 상황이 발생하면 반환하는 값(null 또는 -1)을 if 문이나 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방..

1) 제너레이터란?ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. (ES6 도입) 제너레이터와 일반 함수의 차이는 다음과 같다.제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 즉, 함수 호출자는 함수를 호출한 이후 함수 실행을 제어할 수 없다.제너레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 다시 말해, 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있다. 이는 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도할 수 있다는 것을 의미한다.제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.일..

1) 비동기 처리를 위한 콜백 패턴의 단점콜백 헬 (callback hell)비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다. 즉, 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없다. 따라서 비동기 함수의 처리 결과(서버의 응답 등)에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한다. 이때 비동기 함수를 범용적으로 사용하기 위해 비동기 함수에 비동기 처리 결과에 대한 후속 처리를 수행하는 콜백 함수를 전달하는 것이 일반적이다. 필요에 따라 비동기 처리가 성공하면 호출될 콜백 ..

REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다.  1) REST API의 구성REST API는 자원(resource), 행위(verb), 표현(representations)의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다.구성 요소내용표현 방법자원(resource)자원URI(엔드포인트)행위(verb)자원에 대한 행위HTTP 요청 메서드표현(representations)자원에 대한 행위의 구체적 내용페이로드 ➡️ REST의 핵심 아이디어는 자원(HTTP URI를 통해 자원을 명시하고 HTTP Method를 통..

1) Ajax란?Ajax(Asynchronous Javascript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했다. 즉, 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해진 것이다.⇒ 빠른 퍼포먼스와 부드러운 화면 전환이 가능해짐 Ajax는 전통적인 방식과 비교했을..