프론트엔드 개발자의 기록 공간

✍ Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분 ES6 사양을 지원한다. 하지만 IE 11의 지원율은 11%다. 그리고 매년 새롭게 도입되는 버전은 브라우저에 따라 지원율이 제각각이다. 따라서 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경 구축이 필요하다. ✍ Babel Babel은 자바스크립트 컴파일러이다. Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+(이상)의 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구이다. 다음 예제에서는 ..

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

에러가 발생하지 않은 코드를 작성하는 것을 불가능하다. 따라서 에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. console.log('[Start]'); foo(); // ReferenceError: foo is not defined // 발생한 에러를 방치하면 프로그램은 강제 종료된다. // 에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다. console.log('[End]'); 직접적으로 에러를 발생하지 않는 예외적인 상황이 발생할 수도 있다. 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성이 크다. // DOM에 button 요소가 존재하지 않으면 querySelector 메서드는 에러를 발생시키지 않고 null을..

ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제터레이터와 일반 함수의 차이는 다음과 같다. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 실행한다. 즉, 함수 호출자는 함수를 호출한 이후 함수 실행을 제어할 수 없다. 제너레이터 함수는 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있도록 제어권을 가진다. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 일반 함수를 호출하면 매개변수를 통해 값을 받고 함수 코드를 실행하여 결과값을 반환한다. 즉, 함수가 실행되고 있는 동안에는 함수 외부에서 함수 내부로 값을 전달하여 함수의..

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가곤란하며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. ✍ 비동기 처리를 위한 콜백 패턴의 단점 GET 요청을 위한 함수 예시 // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onloa..

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