![]()
개발 환경 구축의 배경과 필요성현대의 웹 브라우저 환경은 매우 다양하며, 각 브라우저마다 최신 자바스크립트 기능의 지원 범위가 상이하다. 크롬, 사파리, 파이어폭스, 엣지와 같은 에버그린 브라우저들은 ES6 사양을 약 98% 정도 지원하는 반면, IE 11의 ES6 지원율은 11%에 불과하다. 게다가 매년 새롭게 등장하는 ES6+ 버전과 아직 제안 단계에 있는 ES.NEXT 사양은 브라우저별로 지원 정도가 제각각이라는 문제가 있다. 대부분의 모던 프로젝트에서는 모듈 시스템을 사용하는데, ES6의 모듈 시스템(ESM)을 사용할 때 몇 가지 중요한 문제점이 존재한다. 첫째로, IE를 포함한 구형 브라우저들은 ESM을 전혀 지원하지 않는다. 둘째로, ESM을 사용하더라도 코드의 트랜스파일링이나 번들링 작업이 ..
![]()
모듈의 일반적 의미모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리되며, 모듈이 성립하기 위해서는 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 모듈의 특징은 다음과 같다.모듈의 자산(변수, 함수, 객체 등)은 기본적으로 비공개 상태다. 즉, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다.모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있다. 따라서 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다.공개(export)된 모듈의 자산은 다른 모듈에서 재사용할 수 있다. 공개된 모듈의 자산을 사용하는 모듈을..
![]()
에러 처리의 필요성프로그래밍에서 에러가 발생하지 않는 코드를 작성하는 것은 사실상 불가능하다. 에러는 프로그램의 실행 중 언제든 발생할 수 있으며, 이러한 에러를 적절히 처리하지 않으면 프로그램은 강제로 종료된다.console.log('[Start]');foo(); // ReferenceError: foo is not defined// 에러 발생으로 인해 프로그램이 강제 종료된다console.log('[End]'); // 실행되지 않는다이러한 문제를 해결하기 위해 try...catch 문을 사용하면 발생한 에러에 대해 적절하게 대응할 수 있다. 이를 통해 프로그램이 강제 종료되는 것을 방지하고, 계속해서 코드를 실행시킬 수 있다.console.log('[Start]');try { foo();} ca..
![]()
제너레이터란?제너레이터는 ES6에서 도입된 특수한 형태의 함수로, 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 독특한 기능을 제공한다. 일반적인 함수와는 달리, 제너레이터는 함수의 실행 흐름을 세밀하게 제어할 수 있는 다양한 특성을 가지고 있다. 함수 실행 제어권 양도제너레이터 함수의 가장 큰 특징은 함수의 실행 제어권을 함수 외부로 양도할 수 있다는 점이다. 일반 함수는 한번 실행이 시작되면 종료될 때까지 제어권이 함수 내부에 있으며, 함수 호출자는 실행에 개입할 수 없다. 반면 제너레이터 함수는 실행 중간에 제어권을 함수 호출자에게 양도할 수 있어, 함수 호출자가 실행을 일시 중지하거나 재개하는 것이 가능하다. 이러한 특성은 'yield' 키워드를 통해 구현되며, 이는 함수의 실..
![]()
자바스크립트는 비동기 처리를 위한 패턴으로 전통적으로 콜백 함수를 사용해왔다. 그러나 이 콜백 패턴은 몇 가지 심각한 단점을 가지고 있는데, 가장 대표적인 것이 콜백 헬로 인한 코드 가독성 저하다. 또한 비동기 처리 중에 발생하는 에러를 처리하기가 매우 까다롭고, 여러 개의 비동기 작업을 동시에 혹은 순차적으로 처리하는 데에도 한계가 있었다. 이러한 문제들을 해결하기 위해 ES6에서는 프로미스(Promise)라는 새로운 패턴을 도입했다. 프로미스는 비동기 처리 시점을 명확하게 표현할 수 있게 해주며, 콜백 패턴이 가진 단점들을 효과적으로 보완했다. 특히 프로미스는 비동기 처리 상태와 결과를 객체로 관리하면서, 메서드 체이닝을 통한 콜백 헬 해결, 효과적인 에러 처리, 여러 비동기 처리의 조율 등을 가능하..
![]()
REST API 개요REST(REpresentational State Transfer)는 웹의 장점을 최대한 활용할 수 있는 아키텍처로서 2000년에 등장했다. HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩이 자신의 박사학위 논문에서 처음 소개했는데, 이는 당시 웹이 HTTP의 본래 장점을 제대로 활용하지 못하고 있는 상황을 개선하기 위해서였다. 로이 필딩은 HTTP 프로토콜의 의도에 맞게 설계하도록 유도하기 위해 REST를 제안했다. REST의 정의는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현하는데, 이는 해당 서비스가 RE..
![]()
Ajax란?Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. 이는 브라우저가 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작하는데, 이 객체는 HTTP 비동기 통신을 위한 다양한 메서드와 프로퍼티들을 제공한다. XMLHttpRequest를 통해 개발자들은 서버와의 비동기 통신을 쉽게 구현할 수 있게 되었다. Ajax의 역사는 1999년으로 거슬러 올라간다. 마이크로소프트가 XMLHttpRequest를 처음 개발했을 당시에는 이 기술이 큰 주목을 받지 못했다. 하지만 2005년, 구글이 발표한 '구글 맵..
![]()
동기 처리와 비동기 처리자바스크립트 엔진의 기본 동작 원리자바스크립트 엔진은 함수가 호출되면 해당 함수의 코드를 평가하여 함수 실행 컨텍스트를 생성한다. 이렇게 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 순차적으로 푸시되어 실행된다. 함수의 실행이 완료되면 해당 함수의 실행 컨텍스트는 콜 스택에서 팝되어 제거된다. 이러한 구조로 인해 자바스크립트 엔진은 단 하나의 콜 스택만을 사용하며, 이는 함수를 실행할 수 있는 창구가 단 하나라는 것을 의미한다. 결과적으로 자바스크립트는 동시에 2개 이상의 함수를 실행할 수 없는 싱글 스레드 방식으로 동작한다. 동기 처리(Synchronous)의 특징과 동작 방식동기 처리는 현재 실행 중인 태스크가 완전히 종료될 때까지 다음 태스크가 실행되지 않고 ..
![]()
호출 스케줄링일반적으로 함수를 호출하면 코드가 실행되는 즉시 함수가 실행된다. 하지만 개발을 하다 보면 특정 시간이 경과한 후에 함수를 호출해야 하는 상황이 발생한다. 이런 경우에 타이머 함수를 사용하여 함수 호출을 예약할 수 있으며, 이러한 행위를 호출 스케줄링이라고 한다. 자바스크립트는 호출 스케줄링을 위해 두 가지 타이머 생성 함수와 두 가지 타이머 제거 함수를 제공한다. 타이머 관련 함수들타이머 생성 함수setTimeout: 지정된 시간이 경과한 후에 콜백 함수를 단 한 번 실행한다.setInterval: 지정된 시간 간격마다 콜백 함수를 반복적으로 실행한다.타이머 제거 함수clearTimeout: setTimeout으로 생성한 타이머를 제거한다.clearInterval: setInterval로 ..
![]()
이벤트 드리븐 프로그래밍브라우저는 클릭, 키보드 입력, 마우스 이동, 드래그와 같은 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이는 사용자와 애플리케이션 간의 상호작용을 가능하게 하는 핵심 메커니즘이다. 애플리케이션에서 특정 이벤트에 반응하여 어떤 동작을 수행하고 싶다면, 해당 이벤트가 발생했을 때 실행될 함수를 브라우저에게 알려주어 호출을 위임해야 한다. 이벤트의 발생 시점을 개발자가 예측할 수 없기 때문에, 함수의 호출 시점을 브라우저에게 위임하는 방식을 사용하는 것이다. 이는 이벤트 기반 프로그래밍의 기본적인 동작 방식이다. 이러한 메커니즘에서 핵심이 되는 두 가지 개념이 있다.이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수를 말한다. 이벤트에 대한 처리를 담당하며, 이벤트 발생 시..
![]()
DOM(Document Object Model) 개요DOM은 HTML 문서의 계층적 구조와 정보를 표현하고 이를 제어할 수 있는 API를 제공하는 트리 자료구조다. 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성하는데, 이를 통해 자바스크립트가 HTML 요소들을 동적으로 조작할 수 있게 된다. DOM은 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있게 만든 인터페이스라고 할 수 있다. 노드HTML 요소와 노드 객체HTML 요소의 구조와 변환HTML 요소는 HTML 문서를 구성하는 개별적인 요소로, 시작 태그와 종료 태그, 어트리뷰트, 콘텐츠로 구성된다. 시작 태그는 요소의 시작을 나타내고, 종료 태그는 요소의 끝..
![]()
개요웹 애플리케이션을 개발할 때 가장 중요한 것은 브라우저 환경을 제대로 이해하는 것이다. 특히 클라이언트 사이드 자바스크립트는 대부분 브라우저에서 HTML, CSS와 함께 동작하기 때문에, 브라우저의 렌더링 과정을 깊이 이해하면 더 효율적인 프로그래밍이 가능하다. 렌더링 과정을 이해하기 위해서는 먼저 두 가지 핵심 개념을 알아야 한다. 바로 '파싱'과 '렌더링'이다. 파싱(Parsing)의 상세 과정파싱은 단순한 텍스트 분석 이상의 복잡한 과정이다. 프로그래밍 언어로 작성된 텍스트 문서를 읽어 실행 가능한 형태로 변환하는 과정을 말한다. 이는 크게 두 단계로 나눌 수 있다.첫 번째는 어휘 분석(Lexical Analysis) 단계로, 문서의 문자열을 의미 있는 토큰으로 분해한다. 두 번째는 구문 분석(..
![]()
배열 디스트럭처링 할당디스트럭처링 할당(Destructuring Assignment)은 '구조 분해 할당'이라고도 부르며, 배열이나 객체와 같은 구조화된 데이터를 해체하여 각각의 요소나 프로퍼티를 개별 변수에 할당하는 것을 의미한다. 이 기능은 ES6에서 새롭게 도입되었으며, 특히 배열이나 객체 리터럴에서 필요한 값들만 추출하여 변수로 할당하고자 할 때 매우 유용하게 사용할 수 있다. ES5에서 ES6로의 진화기존 ES5에서는 배열의 요소들을 각각의 변수에 할당하기 위해서 배열의 인덱스를 통해 하나씩 접근해야만 했다. 이는 코드가 길어지고 가독성이 떨어지는 결과를 초래했다.// ES5var arr = [1, 2, 3];var one = arr[0];var two = arr[1];var three = ar..
![]()
개요스프레드 문법(Spread Syntax)은 ES6에서 새롭게 도입된 문법이다. 이 문법은 마침표 세 개(...)를 사용하여 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 변환한다. 여러 값을 하나로 뭉친 배열이나 객체와 같은 데이터를 전개해서 개별 값들로 분리할 때 유용하게 사용할 수 있다. 스프레드 문법의 사용 가능 대상스프레드 문법은 모든 데이터 타입에 사용할 수 있는 것이 아니다. for...of 문으로 순회할 수 있는 이터러블 객체에만 사용할 수 있다는 제약이 있다. 구체적으로 다음과 같은 데이터 타입들이 스프레드 문법의 대상이 될 수 있다.Array: 가장 대표적인 이터러블 객체로, 배열의 요소들을 개별 값으로 펼칠 수 있다.String: 문자열도 이터러블이므로 각 문자..
![]()
함수의 구분자바스크립트는 ES6 이전까지 함수를 다양한 목적으로 사용했다. 이는 언어의 유연성을 보여주는 특징이었지만, 동시에 여러 문제를 야기했다. 하나의 함수가 일반 함수, 생성자 함수, 메서드 등 여러 역할을 수행할 수 있었기 때문에 코드의 의도를 파악하기 어려웠고, 예상치 못한 동작을 일으킬 수 있었다. ES6 이전의 함수는 모두 callable이면서 동시에 constructor였다. 이는 함수를 일반적인 방식으로 호출할 수 있을 뿐만 아니라, new 연산자와 함께 사용하여 객체를 생성할 수도 있었다는 것을 의미한다. 이러한 특성은 다음과 같은 코드를 가능하게 했다.var foo = function() { return 1;};foo(); // 일반 함수로 호출new foo(); // 생성자 함수..
![]()
클래스는 프로토타입의 문법적 설탕인가?자바스크립트는 프로토타입 기반 객체지향 언어다. ES5까지는 클래스 없이 생성자 함수와 프로토타입을 통해 객체지향 프로그래밍을 구현했다.var Person = (function () { function Person(name) { this.name = name; } Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); }; return Person;}());var me = new Person('Lee');me.sayHi(); // Hi! My name is LeeES6에서 도입된 클래스는 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있게 한..
![]()
소스코드의 타입ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다.전역 코드(global code): 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다.함수 코드(function code): 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다.eval 코드(eval code): 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드.모듈 코드(module code): 모듈 내부에 존재하는 소스코드. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다.소스코드(실행 가능한 코드)를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기..
![]()
this 키워드객체 지향 프로그래밍에서 객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. const circle = { // 프로퍼티: 객체 고유의 상태 데이터 radius: 5, // 메서드: 상태 데이터를 참조하고 조작하는 동작 getDiameter() { // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면 // 자신이 속한 객체인 circle을 참조..
![]()
자바스크립트 객체의 분류자바스크립트 객체는 다음과 같이 크게 3가지로 분류할 수 있다. 표준 빌트인 객체(standard built-in objects/native objects/global objects)ECMAScript 사양에 정의된 객체로, 애플리케이션 전역의 공통 기능을 제공한다.자바스크립트 실행 환경(브라우저나 Node.js)과 관계없이 언제나 사용할 수 있다.표준 빌트인 객체는 전역 객체의 프로퍼티로 제공되므로 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. 호스트 객체(host objects)ECMAScript 사양에 정의되어 있지는 않지만, 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다.브라우저 환경에서 DOM, BOM, Canvas, XMLHttpRequest, fe..
![]()
개요자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트를 이루고 있는 거의 "모든 것"이 객체이며, 객체 기반의 프로그래밍 언어라고 할 수 있다. 객체지향 프로그래밍객체지향 프로그래밍은 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. 객체지향 프로그래밍에서는 실세계의 실체(사물이나 개념)를 인식하는데, 실체는 특징이나 성질을 나타내는 속성을 가지고 있고 이를 통해 실체를 인식하거나 구별한다. 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라고 한다. 이처럼 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라고 하며, 객체의 상태를 프로퍼티, 동작을 메서드라..
