전체 글
객체 지향 프로그래밍이란?
객체 지향 프로그램이란 각 객체의 집합으로 프로그램을 구성하는 방법을 의미합니다. 이는 전통적인 명령형 프로그래밍의 절차 지향적 관점을 벗어나는 것입니다. 객체 지향의 의미와 추상화 객체 지향 프로그래밍은 사람이 실생활의 사물이나 개념을 인식하는 방법을 '추상화(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.자바스크립트에는 객체 뿐만 아니라 문자열, 숫자, 불리언, 함수 등을 생성자 함수를 통해 생성할 수 있습니다. ..
div 요소 화면 중앙 정렬하는 방법 ✔️
HTML에서 div 요소를 중앙 정렬해야 할 때가 있습니다. div 내 콘텐츠는 text-align 을 통해 정렬할 수 있지만, div 자체를 페이지 내 중앙으로 정렬하려면 약간의 트릭이 필요합니다다. 1. 다음과 같이 position: abosulte와 left, top 및 transform 속성을 사용하면 요소를 화면 가운데로 정렬할 수 있습니다. See the Pen Div Element Align Center by Jeong (@jeongKR) on CodePen. 2. flex 속성을 이용한 중앙 정렬도 가능합니다. flex 속성에 대한 자세한 내용은 이곳에 정리해보았습니다. .container { display: flex; justify-content: center; align-items: c..
HTML 라디오 버튼 설명
라디오 버튼은 여러 선택지들 중에서 하나를 선택해야 할 때 사용합니다. 라디오 버튼은 보통 여러 개의 라디오 버튼이 존재하는 라디오 그룹을 구성하며 태그에 type="radio" 속성을 부여해 생성합니다. Please select your favorite food: Orange Banana Tomato Submit 이러한 라디오 그룹을 구분하는 기준은 name 속성입니다. 동일한 name인 경우, 같은 라디오 그룹에 속합니다. 라디오 버튼은 하나만 선택할 수 있으며, value 속성을 통해 선택된 라디오 버튼 값을 저장할 수 있습니다. 그러나 위 태그와 속성은 사용자 화면에는 표시되지 않습니다. 따라서 다음과 같이 id와 태그의 for 속성을 사용해야 합니다. Orange 이를 활용해 다음과 같은 라디오..
Ajax란 무엇일까?
Ajax란? Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 통해 브라우저에서 서버로 데이터를 비동기 방식으로 요청하고, 해당 데이터를 사용해 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 의미합니다. Ajax 방식을 사용하면 웹페이지를 새로고침 하지 않고도 필요한 데이터를 갱신할 수 있습니다. 비동기 방식이란? 일반적으로 요청에는 동기(synchronous)와 비동기(asynchronous)가 존재합니다. 동기식 요청은 하나의 프로세스를 마치면 다음 프로세스가 실행되는 순차적인 진행 방식을 의미합니다. 이는 하나의 프로세스가 진행중일 때, 다른 프로세스가 실행될 수 없다는 의미이기도 합니다. 이와 달리 비동기식 요청은 서버와 통신하는 동안 여러 프로세스를 동시에 처리..
자바스크립트 세미콜론은 언제 사용할까?
세미콜론은 언제 사용할까? 자바스크립트에서는 문(statement)의 마지막에 세미콜론 ; 을 원칙적으로 적는다. 자바스크립트 엔진은 이러한 세미콜론을 기반으로 각 문의 종료 위치를 파악한다. 그러나 코드 블록 {...} 뒤에는 세미콜론을 붙이지 않는다. 코드 블록문은 자체적인 종결성을 갖고 있기 때문이다. 따라서 if문, for문, 함수 문 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 반면, 객체를 선언한 중괄호 {} 뒤에는 세미콜론을 붙인다. 이는 코드 블록이 아니라, 객체를 표현하는 리터럴 방식의 값 할당이기 때문이다. 대다수의 개발자들이 세미콜론을 원칙에 맞게 붙이는 것을 지향하지만, 이를 생략해도 무방하다는 주장도 있다. 자바스크립트 엔진에는 각 문의 종료 시점을 판단해 자동으로 이를 삽입..
