분류 전체보기

[JS] 모던 자바스크립트 Deep Dive - 49. Babel과 Webpack

크롬, 사파리, 파이어폭스, 엣지와 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다.그러나 매년 새롭게 도입되는 ES6 이상의 버전과 제안 단계에 있는 ES 제안 사양(ES.NEXT)은 브라우저에 따라 지원율이 제각각이다.📍에버그린 브라우저(evergreen browser)웹 표준을 준수하기 위해 지속적으로 자동 업데이트를 지원하는 모던 브라우저 따라서 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제없이 동작시키기 위한 개발환경을 구축하는 것이 필요하다. 트랜스파일러인 Babel과 모듈 번들러인 WebPack을 이용하여 ES6+/ES.NEXT 개발환경을 구축할 수 있다. Babel구형 브라우저에서는 ES6의 화살표 함수와 ES7의..

[JS] 모던 자바스크립트 Deep Dive - 48. 모듈

모듈(module)어플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다.이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다.자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태이다.즉, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다.모듈은 개별적 존재로서 어플리케이션과 분리되어 존재한다.그러나 어플리케이션과 완전히 분리되어 개별적으로 존재하는 모듈은 재사용이 불가능하므로 존재의 의미가 없다.따라서 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능한데 이를 export라고 한다.공개(ex..

[JS] 모던 자바스크립트 Deep Dive - 47. 에러처리

에러 처리의 필요성에러는 언제나 발생할 수 있고 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.console.log('[Start]');try { foo();} catch (error) { console.error('[에러 발생]', error); // [에러 발생] ReferenceError: foo is not defined }// 발생한 에러에 적절한 대응을 하면 프로그랭이 강제 종료되지 않는다.console.log('[End]');직접적으로 에러를 발생시키지 않는 예외적인 상황이 발생할 수도 있다.따라서 코드를 작성할 때에는 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다. try...catch...finally..

[JS] 모던 자바스크립트 Deep Dive - 46. 제너레이터와 async/await

제너레이터란?코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 1️⃣제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.2️⃣제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.3️⃣제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. 제너레이터 함수의 정의제너레이터 함수는 function* 키워드로 선언하고 하나 이상의 yield 표현식을 포함한다.// 제너레이터 함수 선언문 function* genDecFunc() { yield 1; }// 제너레이터 함수 표현식 const genExpFunc = function* () { yield 1; };// 제너레이터 메서드 const obj = { * genobjMethod() { yiel..

[JS] 모던 자바스크립트 Deep Dive - 45. 프로미스

비동기 처리를 위한 콜백 패턴의 단점✅콜백 헬콜백 함수를 통해 비동기 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 비동기 처리 결과를 가지고 다시 비동기 함수를 호출할 경우 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다.비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다. 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고 상위 스코프의 변수에 할당할 수도 없다.따라서 비동기 함수의 처리 결과(서버의 응답 등..

[JS] 모던 자바스크립트 Deep Dive - 44. REST API

RESTREspresentational State TransferHTTP의 장점을 최대한 활용할 수 있는 아키텍처REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라고 표현한다. 즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이고 REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. REST API의 구성자원(resource), 행위(verb), 표현(representation)의 3가지 요소로 구성된다.REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다.구성요소내용표현 방법자원(resource)자원URI(엔드포인트)행위(verb)자원에 대한 행위HTTP 요청 메서드표현(..

[JS] 모던 자바스크립트 Deep Dive - 43. Ajax

Ajax란?Asynchronous JavaScript and XML자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax의 등장으로 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹 페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고 변경해야하는 부분만 한정적으로 렌더링하는 방식이 가능해졌다.✅ Ajax의 장점변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통..

[TS] TypeScript 조건부 타입

조건부 타입extends와 삼항 연산자를 이용해 조건에 따라 각각 다른 타입을 정의하도록 돕는 문법입력된 제네릭 타입에 따라 타입을 결정한다.extends와 삼항 연산자를 이용해 조건에 따라 각각 다른 타입을 정의한다. number extends string은 number 타입이 string 타입의 서브타입이 아니다.따라서 타입 A는 string 타입이기 때문에 조건문은 거짓이 된다.ObjB는 ObjA의 서브타입이다.따라서 타입 B는 number 타입이므로 조건문은 참이 된다.제네릭 조건부 타입타입 변수에 Number 타입이 할당되면 String 타입을 반환하고 그렇지 않다면 Number 타입을 반환한다.매개변수로 string 타입의 값을 제공받아 공백을 제거한 다음 반환하는 함수매개변수에 undefin..

[TS] TypeScript 클래스와 제네릭

클래스동일한 모양의 객체를 더 쉽게 생성할 수 있도록 도와주는 문법class 키워드를 이용해 선언타입스크립트에서는 클래스의 필드를 선언할 때 타입을 함께 정의해주어야 한다.엄격한 타입 검사 모드일 때 오류가 발생할 수도 있다.타입스크립트의 클래스는 타입으로도 사용할 수 있다.클래스가 타입으로 사용되면 해당 클래스가 생성하는 객체의 타입과 동일한 타입이 된다. class Student { // 필드 name: string = ""; grade: string = ""; age: number = 0; // 생성자 constructor(name: string, grade: string, age: number) { this.name = name; this.gra..

[JS] 모던 자바스크립트 Deep Dive - 42. 비동기 프로그래밍

동기 처리와 비동기 처리함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다.함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문에 함수는 호출 순서대로 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 즉. 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. ✅ 동기 처리(synchronous)현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식장점: 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다.단점: 앞선 태스크가 종료할 때까지 이후 태스크들이 ..