모듈이란?애플리케이션이 커질수록 코드를 하나의 파일에 전부 담아버리면 유지보수가 어렵고, 같은 변수 이름이 충돌하고, 어느 코드가 어디에 영향을 미치는지 파악하기 어려워진다. 모듈은 이런 문제를 해결하기 위해 코드를 기능 단위로 파일에 분리하는 방식이다. 각 파일이 독립적인 스코프를 가지고 다른 파일에서 필요한 것만 골라서 내보내고 가져다 쓸 수 있다.모듈의 핵심 조건: 1. 자신만의 파일 스코프를 가져야 함 (캡슐화) 2. 필요한 것만 선택적으로 공개할 수 있어야 함 (export) 3. 다른 모듈이 공개된 것을 가져다 쓸 수 있어야 함 (import) 이 세 가지를 갖춰야 진짜 모듈이라고 할 수 있다.자바스크립트는 원래 모듈이 없었다초기 자바스크립트는 모듈 시스템이 없었어서 여러 개의 파일로 분..

오늘은 비동기 처리와 관련된 개념들을 쭉 정리해봤다. REST API 설계 원칙부터 시작해서 Promise가 왜 필요했는지, 그리고 제너레이터를 거쳐 async/await까지 이어지는 흐름으로 써보려고 한다. REST APIREST API는 HTTP를 제대로 활용하지 못하는 상황들이 많아지면서, HTTP 프로토콜의 스펙에 맞게 API를 설계하도록 만든 아키텍처 스타일이다. 그리고 이 원칙을 충실히 지켜서 만든 서비스를 RESTful하다고 표현한다.REST API는 자원, 행위, 표현이라는 세 가지 요소로 구성된다. 이 세 가지가 조합되면 자체 표현 구조를 갖게 되어서, HTTP 요청 메시지만 보고도 이게 무슨 요청인지 바로 이해할 수 있게 된다. 예를 들어 아래 두 요청을 비교해보면 이해가 쉽다.GET ..

타이머자바스크립트에서 함수를 일정 시간 이후에 호출하도록 예약하는 걸 호출 스케줄링이라고 부른다. 이때 사용하는게 타이머 함수이고 이 함수들은 ECMAScript 사양에 정의된 빌트인이 아니다. 그러니 브라우저와 Node.js 환경이 각자 전역 객체의 메서드로 제공해주는 호스트 객체라고 보면 된다. 종류는 대표적으로 두 가지가 있다. setTimeout / clearTimeout은 콜백을 타이머 만료 시 딱 한 번만 호출한다. 호출하면 생성된 타이머를 식별할 수 있는 고유한 타이머 ID를 반환하는데 브라우저 환경에서는 숫자, Node.js 환경에서는 객체 형태로 반환해준다. 그리고 만약에 취소하고싶으면 clearTimeout을 호출하면 스케줄러에서 뺄 수 있다. setInterval / clearInte..

자바스크립트로 만드는 거의 모든 인터랙션은 이벤트에서 시작한다고 볼 수 있다. 버튼을 클릭하고, 키를 누르고, 화면을 스크롤하는 모든 동작이 이벤트다. 이번에는 이벤트가 어떻게 동작하고 어떻게 처리하는지에 대해 정리해봤다.이벤트란?브라우저는 사용자가 어떤 행동을 하거나 특정 상황이 발생하면 이를 이벤트로 감지한다. 그리고 미리 등록해둔 함수(이벤트 핸들러)를 실행한다. 이벤트의 종류는 이벤트별로 아래처럼 엄청 많다.mouseclick요소 클릭mousedblclick더블 클릭mousemousedown마우스 버튼 누름mousemouseup마우스 버튼 놓음mousemousemove마우스 이동mousemouseenter요소 안으로 진입 (버블링 없음)mousemouseleave요소 밖으로 나감 (버블링 없음)m..

CSS 레이아웃은 요소들을 화면에 어떻게 배치할지 결정하는데에 사용된다. Flexbox와 Grid 등 제대로 이해하지 못하면 레이아웃이 이상한 곳에 배치되거나 겹쳐버리는 문제가 발생한다. 이번에는 좀 더 잘 알고 사용할 수 있도록 정리해봤다.display 속성모든 레이아웃은 display 속성에서 시작한다. 이 속성으로 요소가 어떤 방식으로 공간을 차지하는지를 결정한다.block블록 요소는 항상 새로운 줄에서 시작하고 가로 전체를 차지한다.div, p, h1, section /* 기본이 block인 태그들 */[ div (전체 너비 차지) ][ p (전체 너비 차지) ][ h1 (전체 너비 차지) ]inline인라인 요소는 줄 안에서 내용물 크기만큼만 차지..

자바스크립트로 화면을 동적으로 바꿀 수 있는 건 DOM 덕분이다. 버튼 누르면 텍스트가 바뀌고 데이터를 받아서 목록이 생기고 모달이 나타나고 사라지는 이런 동작의 기반이 바로 DOM 조작이다. 이번에는 DOM이 무엇인지부터 실제로 노드를 탐색하고 조작하는 방법까지 정리해봤다.DOM이란?브라우저가 HTML 문서를 파싱해서 만들어낸 트리 형태의 자료구조다. HTML 문서의 계층 구조와 정보를 표현하고 자바스크립트로 이를 읽고 변경할 수 있는 API(프로퍼티와 메서드)를 제공한다. 안녕하세요 이 HTML이 파싱되면 밑에 트리 구조가 만들어진다.document └── html ├── head │ └── title │ ..