개발개굴🐸

크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분 ES6 사양을 지원합니다. 하지만 IE 11의 ES6 지원율은 약 11%이고. ES6 이상의 버전(ES6+)과 제안 단계에 있는 ES 제안 사양(ES.NEXT)은 브라우저에 따라 지원율이 다른것을 알 수 있습니다. 따라서 ES6+와 ES.NEXT의 최신 ESCMAScript 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요합니다. 또한 대부분의 프로젝트가 모듈을 사용하므로 ES6 모듈(ESM)외의 별도의 모듈 로더도 필요합니다. IE를 포함한 구형 브라우저는 ESM을 지원X ESM을 사용..

모듈의 일반적 의미 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말합니다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함 모듈의 자산은 기본적으로 캡슐화되어 비공개 상태로 개별적 존재로서 애플리케이션과 분리되어 존재 공개가 필요한 자산에 한정하여 export를 통해 명시적으로 선택적 공개가 가능 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 import로 자신의 스코프 내로 불러들여 재사용 가능 이처럼 모듈은 애플리케이션과 분리되어 기능별로 분리된 개별적 파일로 존재하다가 필요에 따라 다른 모듈에 의해 재사용됩니다. 따라서 모듈은 코드의 단위를 명확히 분리하..

에러 처리의 필요성 에러가 발생하지 않는 코드를 작성하는 것은 불가능합니다. 하지만, 이러한 에러나 예외적인 상황에 대응하지 않으면 프로그램은 강제 종료될 것입니다. 에러나 예외적인 상황은 아래와 같이 다양합니다. // 에러1 console.log('[Start]'); foo(); // ReferenceError: foo is not defined // 발생한 에러를 방치하면 프로그램은 강제 종료된다. // 에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다. console.log('[End]'); // 에러2 const $elem = document.querySelector('#1'); // DOMException: Failed to execute 'querySelector' on 'Do..

제너레이터란? ES6에서 도입된 제너레이터(generator)는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수입니다. 제너레이터와 일반 함수의 차이는 다음과 같습니다. 1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 함수를 호출한 이후 함수 실행을 제어할 수 없는 일반 함수와 달리 제너레이터는 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있습니다. 2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 함수가 실행되고 있는 동안 함수 외부에서 함수 내부로 값을 전달하여 함수의 상태를 변경할 수 없는 일반 함수와 달리 제너레이터 함수는 함수 호출자와 양방향으로 함수의 상태를 주고받을 수 있습니다. 3. 제너레이터 함..

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용합니다. 하지만 전통적인 콜백 패턴은 콜백 지옥(Callback Hell)로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있었습니다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했으며 이는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있습니다. 비동기 처리를 위한 콜백 패턴의 단점 콜백 지옥(Callbak Hell) 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료됩니다. 비동기 함수는 처리 결과를 외부에 반환할 수 없..

REST API(REpresentational State Transfer)란? REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미합니다. *로이 필딩이 자신의 2000년 논문에서 발표 당시 웹 HTTP를 제대로 사용하지 못하고 있는 상황을 보고 소개함 HTTP의 장점을 최대한 활용할 수 있는 아키텍처 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도함 REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현 *로이 필딩 : 아파치 HTTP 서버 프로젝트의 공동 설립자로 HTTP/1.0과 1.1의 스펙 작성에 참여함 REST API의 구성 REST API는 자원(reso..

Ajax란? Ajax(Asynchronous JavaScript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공 이전의 웹페이지는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로, 변경할 필요가 없는 부분까지 다시 렌더링되는 단점이 있었습니다. 하지만 Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했습니다. 서버로부터 웹페이지의 변경에 필요한 데이터만..

호출 스케줄링 함수를 명시적으로 즉시 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 이용해야 합니다. 이를 호출 스케줄링이라 합니다. 자바스크립트는 타이머를 생성/제거할 수 있는 타이머 함수를 제공합니다. 이는 ECMAScrip 사양에 정의된 빌트인 함수가 아니며 브라우저/Node.js 환경에서 전역 객체의 메서드로서 제공하는 호스트 객체입니다. 타이머를 생성하는 setTimeout과 setInterval 타이머 함수는 비동기 처리 방식으로 동작합니다. 타이머 함수 setTimeout / clearTimout setTimeout 함수는 두번째 인수로 전달받은 시간(ms, 1/1000초)으로 단 한 번 동작하는 타이머를 생성하고 이후 타이머가 만료되면 첫 번째 인..