전체 글

이전에 팀원분들과 프로젝트 구조에 관해 논의하던 중 이런 이야기가 나왔습니다.백엔드: 그런데 사실 저는 프론트 서버가 왜 필요한지 모르겠습니다.어차피 백엔드 서버가 있는데 왜 프론트 서버가 따로 필요한건가요?프론트 서버를 거쳐서 백엔드 서버에 접근할 거라면 애초에 백엔드 서버에 접근하는게 더 빠르지 않나요?저는 당시 쉽사리 답변을 해드리지 못했습니다. 저 말만 놓고 보면 틀린 말이 아니니까요.그럼 결국 프론트엔드 서버는 필요 없는걸까요? 1. 전통적인 프론트엔드 개발 방식 (정적 배포)근본적으로 웹 프론트엔드는 HTML, JS, CSS의 세 가지 요소로 이루어져있습니다.브라우저는 위 요소만을 가지고 웹을 구성하게 되죠. 전통적인 프론트엔드의 배포 과정은 아래와 같습니다.리액트 등의 라이브러리, 프레임워크..

ES6에서 비동기 처리를 위한 패턴으로 프로미스를 도입한다.이는 전통적 콜백 패턴이 가진 단점을 보완, 비동기 처리 시점을 명확히 표현할 수 있다는 장점을 가진다.1. 비동기 처리를 위한 콜백 패턴의 단점전통적인 비동기 처리의 예시를 보자.const get = (url, successCallback, failureCallback) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // todos = JSON.parse(xhr.response); successCallback(JSON.parse(xhr.response)); } els..

JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.또한 싱글 스레드 방식으로 동작하기에, 처리에 시간이 걸리는 작업을 수행하는 경우 블로킹 현상이 발생한다.비동기 처리를 수행하는 비동기 함수는 전통적으로 콜백 패턴을 사용한다.비동기 처리를 위한 콜백 패턴은 콜백 헬을 발생시켜 가독성을 저하시키고, 비동기 처리 중 발생한 예외가 곤란하며,여러 비동기를 한 번에 처리하는 데 한계가 있다. 이런 것들에 대해선 프로미스에서 살펴보자.1. 이벤트 루프와 태스크 큐JS의 동시성을 지원하는 것이 이벤트 루프이다. 브라우저 내장 기능 중 하나이다.구글 V8 엔진을 비롯한 대부분의 JS 엔진은 2개의 영역으로 구분 가능하다.콜 스택: 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행..

타이머 함수는 ECMAScript에 정의된 빌트인 함수가 아니지만, 브라우저 환경과 Node.js 환경 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타이머 함수는 호스트 객체이다.JS 엔진은 단 하나의 실행 컨텍스트를 가지며, JS 엔진은 싱글 스레드로 동작한다.이런 이유로 타이머 setTimeout과 setInterval은 비동기 방식으로 동작한다.const timerId = setTimeout(() => console.log('Hey'), 1000);clearTimeout(timerId);const timeoutId = setInterval(() => { console.log(count); if (count++ === 5) clearInterval(timeoutId);}, 1000);s..

1. 이벤트 객체이벤트 발생 시 이벤트 객체가 생성된다.생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.이는 브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인수로 전달하기 때문에, 전달받을 매개변수를 명시적으로 선언해야 하기 때문이다.이벤트가 발생하면 암묵적으로 생성되는 이벤트 객체 또한 생성자 함수에 의해 생성된다.이는 프로토타입 체인의 일원이 된다.Event.prototype에 정의된 이벤트 프로퍼티는 모든 파생 객체에 상속된다.더보기공통 프로퍼티설명타입type이벤트 타입stringtarget이벤트를 발생시킨 DOM 요소DOM 요소 노드currentTarget이벤트 핸들러가 바인딩된 DOM 요소DOM 요소 노드eventPhase이벤트 전파 단계0: 이벤트 없음, 1: 캡처링, 2:..

간단하게 보아서, 브라우저는 다음과 같은 과정으로 렌더링을 수행한다.브라우저가 렌더링에 필요한 리소스를 서버로 요청, 응답을 받는다.브라우저 렌더링 엔진이 응답받은 HTML과 CSS를 파싱해 DOM, CSSOM을 생성하고 이들을 결합해 렌더 트리를 생성한다.브라우저 JS 엔진은 응답된 JS를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환해 실행한다. 이때 JS는 DOM API로 DOM, CSSOM을 변경할 수 있다. 변경된 이들은 다시 렌더 트리로 결합된다.최종 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산해 브라우저 화면에 HTML 요소를 페인팅한다.1. 요청과 응답브라우저는 서버에 렌더링에 필요한 요소들을 요청하고 응답받는다.브라우저의 렌더링 엔진은 HTML..

배열이란 여러 개의 값을 순차적으로 나열한 자료구조다. JS에는 배열 타입이 없으며, 배열은 객체 타입이다.1. JS 배열은 배열이 아니다.일반적인 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조이다.하나의 데이터 타입으로 통일되어 있으며, 이런 배열을 밀집(dense) 배열이라 한다.JS의 배열은 각각 동일한 메모리 공간을 가지지 않아도 되며, 연속적으로 이어져 있지 않을 수 있다.이러한 배열 요소가 연속적으로 이어져 있지 않은 배열을 희소(sparse) 배열이라 한다. (기본적으로 해시테이블이다.)밀집 배열은 인덱스로 요소에 O(1)로 접근이 가능하나, 삽입 삭제가 효율적이지 않다.대부분 모던 JS 엔진은 좀 더 배열처럼 동작하도록 최적화하여 구현했다. 배열..

함수를 일급 객체로 취급하는 함수형 언어에서 공통적으로 사용되는 중요한 특성이다.클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.함수가 선언된 렉시컬 환경은 뭘까. 이것부터 살펴보자.1. 렉시컬 스코프JS 엔진은 함수를 어디서 호출했는지가 아니라 어디서 정의했는지에 따라 상위 스코프를 결정한다.이를 렉시컬 스코프, 정적 스코프라 한다.실행 컨텍스트에서 살펴봤듯이 스코프의 실체는 실행 컨텍스트의 렉시컬 환경으로, 이는 자신의 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된다. 이것이 스코프 체인이다.따라서 “함수의 상위 스코프를 결정”한다는 것은 “렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정"한다는 것과 동치된다. 결국 위 정의는,렉시컬 환경의 “외부 렉시..