개발/JavaScript
객체 지향 프로그래밍이란?
객체 지향 프로그램이란 각 객체의 집합으로 프로그램을 구성하는 방법을 의미합니다. 이는 전통적인 명령형 프로그래밍의 절차 지향적 관점을 벗어나는 것입니다. 객체 지향의 의미와 추상화 객체 지향 프로그래밍은 사람이 실생활의 사물이나 개념을 인식하는 방법을 '추상화(asbstraction)'를 통해 구현합니다. 여기서 추상화란 현실 세계의 특정 객체(예를 들면, 자동차)의 여러 속성 중에서 프로그램에 필요한 속성(예를 들면, 차량 모델, 번호판, 가격 등)을 추출해 내는 것을 의미합니다. // 차량번호AA6301, 가격 54000불, 테슬라3 차량의 추상화 const car = { model: tesla3 number: AA6301 price: 54000 }; 객체 지향 프로그램에서는 각 객체의 상태 데이터..
자바스크립트 call, apply, bind 설명
call과 apply 메소드는 기본적으로 함수를 호출하는 역할을 합니다. 그렇다면 기존 함수 호출과 차이점은 무엇일까요? 바로 해당 메소드를 사용해 함수를 '실행'하면, 함수의 첫 번째 인자로 전달하는 객체에 this 를 '바인딩'할 수 있다는 것입니다. 이를 통해 유사 배열 arguments 객체에 배열 메서드를 사용할 수 있습니다. 반면, bind는 첫 번째 인자를 this에 바인딩하지만 함수를 '실행하지 않으며', 새로운 함수를 반환합니다. call call을 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩합니다. function logName (a, b, c) { console.log(this.name); console.log(a + b + c); } const p..
자바스크립트 this 의 개념과 바인딩 설명
자바스크립트 this란 대체 무엇일까요? 그리고 this를 이해하는 일은 유독 어려운 것일까요? 이번 포스팅에서는this의 정의와 바인딩에 대해 살펴보도록 하겠습니다. this의 정의 this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 이웅모 저 정의를 자세히 살펴보면 중간에 '또는'이라는 표현이 사용된 것을 볼 수 있습니다. 이는 this가 고정된 값에 바인딩되지 않기 떄문입니다. this는 '함수가 호출되는 방식'에 따라 '동적'으로 결정됩니다. this라는 대명사를 키워드로 사용한 것도 이러한 맥락에서 이해해볼 수 있습니다. this 의 이해 그렇다면 이러한 ..
자바스크립트 객체 생성자 함수란?
객체 생성자 함수란? 객체 생성자 함수란 객체의 인스턴스를 생성하는 함수입니다. new 연산자를 사용해 다음과 같이 빈 객체를 생성할 수 있습니다. const car = new Object();이처럼 생성자 함수를 통해 생성한 객체를 인스턴스라 합니다. 다음과 같이 생성한 인스턴스에 프로퍼티나 메소드를 추가할 수도 있습니다. car.name = 'K5'; car.start = function () { console.log('Starting up the engine'); }; console.log(car.start()); // Starting up the engine.자바스크립트에는 객체 뿐만 아니라 문자열, 숫자, 불리언, 함수 등을 생성자 함수를 통해 생성할 수 있습니다. ..
Ajax란 무엇일까?
Ajax란? Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 통해 브라우저에서 서버로 데이터를 비동기 방식으로 요청하고, 해당 데이터를 사용해 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 의미합니다. Ajax 방식을 사용하면 웹페이지를 새로고침 하지 않고도 필요한 데이터를 갱신할 수 있습니다. 비동기 방식이란? 일반적으로 요청에는 동기(synchronous)와 비동기(asynchronous)가 존재합니다. 동기식 요청은 하나의 프로세스를 마치면 다음 프로세스가 실행되는 순차적인 진행 방식을 의미합니다. 이는 하나의 프로세스가 진행중일 때, 다른 프로세스가 실행될 수 없다는 의미이기도 합니다. 이와 달리 비동기식 요청은 서버와 통신하는 동안 여러 프로세스를 동시에 처리..
자바스크립트 세미콜론은 언제 사용할까?
세미콜론은 언제 사용할까? 자바스크립트에서는 문(statement)의 마지막에 세미콜론 ; 을 원칙적으로 적는다. 자바스크립트 엔진은 이러한 세미콜론을 기반으로 각 문의 종료 위치를 파악한다. 그러나 코드 블록 {...} 뒤에는 세미콜론을 붙이지 않는다. 코드 블록문은 자체적인 종결성을 갖고 있기 때문이다. 따라서 if문, for문, 함수 문 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 반면, 객체를 선언한 중괄호 {} 뒤에는 세미콜론을 붙인다. 이는 코드 블록이 아니라, 객체를 표현하는 리터럴 방식의 값 할당이기 때문이다. 대다수의 개발자들이 세미콜론을 원칙에 맞게 붙이는 것을 지향하지만, 이를 생략해도 무방하다는 주장도 있다. 자바스크립트 엔진에는 각 문의 종료 시점을 판단해 자동으로 이를 삽입..
자바스크립트 DOM 타겟 이벤트 메소드 활용하기
자바스크립트 DOM에서는 target 이벤트 메소드를 사용하여 이벤트가 발생하는 요소에 접근할 수 있습니다. 아래의 코드는 클릭 시 해당 이벤트를 수신한 클래스 이름을 출력합니다. document.addEventListener('click', function myFunction(e) { console.log(e.target.getAttribute('class')); }) 또는 아래와 같이 target.nodeName을 통해 노드의 이름에 접근할 수도 있습니다. 이외에도 부모 노드(parentNode), 자식 노드 리스트(childNodes), 첫 번째 자식 노드(firstChild), 마지막 자식 노드(lastChild) 등에도 접근할 수 있습니다. document.addEventListener('cli..
[JavaScript] ⑦ 자바스크립트 DOM 이벤트 핸들링
이벤트(event)란 애플리케이션에서 발생하는 사용자의 마우스 클릭 click, 키보드 입력 keydown 등과 같은 활동이며, 이벤트 드리븐 프로그래밍(Event-driven Programming)은 이러한 이벤트를 중심으로 프로그램을 제어하는 방식을 일컫는다. 이벤트 핸들러란? 특정한 이벤트가 발생했을 때, 호출되는 코드(대부분의 경우 함수)를 이벤트 핸들러(Event Handler)라 한다. 아래의 코드는 클릭 시 배경 색상을 임의로 바꾸는 이벤트 핸들러를 구현한 것이다. 이벤트 핸들러 추가는 어트리뷰트 방식, 프로퍼티 방식, addEventListener메서드 방식으로 할당할 수 있는데, 오늘날에는 addEventListener 방식을 가장 많이 사용한다 아래 버튼 클릭 시 이벤트 리스너의 cli..
