JavaScript
브라우저가 웹페이지를 대상으로 동적인 기능을 수행하도록 만드는 프로그래밍 언어.
기초 개념 정의
Variable
변수는 개발자가 원하는 정보를 담는 컨테이너다.
Strings
문자열은 텍스트 조각이다.
Array
목록을 표현하기 좋은 자료 구조로, 동질적인 데이터를 여러개 저장한다.
Loop
반복 작업을 빠르게 처리하기 위한 구조
Function
재사용 가능한 코드 덩어리. 한가지 작업을 수행하는 코드를 블록안에 저장해두고, 필요할 때마다 호출하여 사용한다.
Object
연관된 데이터와 기능의 모음이며, 다양한 변수와 함수를 그룹화하여 이름을 붙인 것이다. 객체 내부의 변수를 "property", 함수를 "method"라고 부른다.
Events
시스템에서 일어나는 사건에 반응하는 코드를 작성할 수 있도록 구성한 것으로, 이벤트 리스너에 함수를 등록하여 이벤트 객체를 전달받아 처리한다.
유의할 점은, 웹 이벤트 객체는 브라우저 Web API에서 제공하고, 표준 JavaScript 언어와는 별개다. 따라서 JavaScript 런타임 환경에 따라 이벤트 객체가 다르게 구성될 수 있다는 점을 주의해야 한다.
Event Capturing
이벤트 캡처링은 부모 요소에서 시작하여 자식 요소로 이벤트를 전파한다. false가 기본값이다.
Event Bubbling
이벤트 버블링은 브라우저가 이벤트를 처리하는 방식이다. 웹사이트는 요소가 중첩된 구조이기 때문에 이벤트가 발생한 요소에서 시작하여 부모 요소를 거슬러 올라가면서 이벤트를 전파한다.
Event Delegation
실제로 이벤트를 처리할 요소에서 작업하지 않고 부모 요소에게 위임한다는 의미.
이벤트 리스너를 너무 많이 등록하면 발생하는 성능 저하를 막기 위한 방법으로, 하위 요소에서 발생한 이벤트가 버블링 되면 부모 요소에서 이벤트를 처리하는 방식이다. 이렇게 하면 모든 하위 요소에서 이벤트 리스너를 등록하는 대신 부모 요소에서 하나의 이벤트 리스너를 등록하여 처리할 수 있다.
JSON
JavaScript Object Notation의 약자로, JavaScript 객체를 문자열로 표현하는 방법이다. 서버-클라이언트 통신에서 흔하게 사용한다.
Client-Side Web APIs
개발자가 더 복잡한 기능을 쉽게 만들 수 있도록 제공하는 기능으로, 표준 자바스크립트 기능을 제외한 나머지 기능을 의미한다.
JavaScript: 브라우저를 비롯한 자바스크립트 런타임에서 작업을 처리하기 위한 스크립팅 언어
Browser API: 브라우저에서 제공하는 기능으로, 벤더사마다 세부 구현이 다를 수 있다
DOM API: 웹 페이지의 구조를 표현하고 변경하는 Document Object Model 관련 기능
Window API: 브라우저 탭을 관리하는 기능으로 창 크기를 반환하거나,로드된 문서 조작, 클라이언트 측 스토리지에 접근하는 기능 등을 제공
Navigator API: 브라우저(user agent)의 상태 및 신원 정보를 제공하는 기능
Third-party API: 타사 플랫폼(e.g. instagram, twitter)에서 제공하는 기능으로, 기능은 제각각이다
JavaScript Libraries: 웹페이지에 첨부하여 사용하는 커스텀 기능을 제공
JavaScript Frameworks: 라이브러리에서 더 나아가 웹 어플리케이션을 작성하기 위한 구조를 제공
제어의 역전(Inversion of Control)
라이브러리와 프레임워크를 구분하는 핵심 개념으로, 개발자가 라이브러리를 사용할 때는 제어권을 가지고 메서드를 호출하지만, 프레임워크를 사용할 때는 제어권이 반전되어 프레임워크가 개발자의 코드를 호출한다.
Last updated