JavaScript (98) 썸네일형 리스트형 [Deep dive] 49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 - ES6+와 ES.NEXT의 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요 49.1 Babel - ES6+/ES.NEXT로 구현된 최신 사양 소스코드를 IE같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스 파일링) 가능 - npm을 사용하여 Babel 설치 # 프로젝트 폴더 생성 mkdir esnext-project && cd esnext-project # package.json 생성 npm init -y # babel-core, babel-cli 설치 npm install --save-dev @babel/core@babel/cli 1.. [Deep dive] 48장 모듈 48.1 모듈의 일반적 의미 모듈(module) - 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 - 기능을 기준으로 파일 단위로 구분 - 모듈이 성렵하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함 - 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근 불가 - 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재 export - 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개 가능 - 공개(export)된 모듈의 자산은 다른 모듈에서 재사용 가능. 공개된 모듈의 자산을 사용하는 모듈을 모듈 사용자(module consumer)라고 함 import - 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프.. [Deep dive] 47장 에러 처리 47.1 에러 처리의 필요성 - 에러(error)가 발생하지 앟는 코드를 작성하는 것은 불가능. 따라서 에러는 언제나 발생 가능 - 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료됨 - 직접적으로 에러를 발생하지는 않는 예외(exception)적인 상황이 발생할 수 도 있음. 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성이 큼 //DOM에 button 요소가 존재하지 않으면 querySelector 메서드는 에러를 발생시키지 않고 null을 반환 const $butoon = document.querySelector('button'); //null $button.classList.add('disabled'); //TypeError: Cnnot read property 'cl.. [Deep dive] 46장 제너레이터와 async/await 46.1 제너레이터란? 제너레이터(generator) - 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 1) 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다 - 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수코드를 일괄실행 - 제너레이터 함수는 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있음 - 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도(yield)할 수 있음 2) 함수 호출자와 함수의 상태를 주고받을 수 있다 - 일반 함수를 호출하면 매개변수를 통해 함수 외부에서 값을 주입받고 함수 코드를 일괄 실행하여 결과값을 함수 외부로 반환 - 제너레이터 함수는 함수 호출자와 양방향으로 함수의 상태를 주고받을 수 있음 - 제너래이터 .. [Deep dive] 45장 프로미스 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 - get 함수는 서버의 응답 결과를 콘솔에 출력 - get 함수는 비동기 함수이다. -> get 함수 내부의 onload 이벤트 핸들러가 비동기로 동작 -> get 함수를 호출하면 GET 요청을 전송하고 onload 이벤트 핸들러를 등록한 다음 undefined를 반환하고 즉시 종료 -> 비동기 함수인 get 함수 내부의 onload이벤트 핸들러는 get 함수가 종료된 이후에 실행 //GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if(xhr.status .. [Deep dive] 44장 REST API REST(REpresentational State Transfer) - HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐 RESTful - REST의 기본 원칙을 성실히 지킨 서비스 디자인 REST API - REST를 기반으로 서비스 API를 구현한 것 44.1 REST API의 구성 - 자원(resource), 행위(verb), 표현(representations)의 3가지 요소로 구성 구성 요소 내용 표현 방법 자원(resource) 자원 URI 행위 (verb) 자원에 대한 행위 HTTP 요청 메서드 표현(representations) 자원에 대한 행위의 구체적 내용 페이로드 44.2 REST API 설계 원칙 1) URI는 리소스를 표현해야 한다 - 리소스를 식별할 .. [Deep dive] 43장 Ajax 43.1 Ajax 란? Ajax (Asynchronous JavaScript and XML) - 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 - 전통적인 방식의 단점 1) 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로 부터 매번 다시 전송받기 때문에 불필요한 데이터 통신 발생 2) 변경할 필요가 없는 부분까지 처음부터 다시 렌더링. 이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜박이는 현상 발생 3) 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 떄문에.. [Deep dive] 42장 비동기 프로그래밍 42.1 동기 처리와 비동기 처리 - 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성 - 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행 - 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거 - 함수가 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문 - 자바스크립트 엔진은 단 하나의 실행 컨텍스트를 가짐 - 실행 컨텍스트 스택의 최상위 요소인 "실행 중인 실행 컨텍스트"를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크(task) - 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread)방식으로 동작 - 싱글 스레드 방식.. 이전 1 2 3 4 ··· 13 다음
