CSS flex의 이해 CSS flex는 크게 컨테이너와 아이템으로 구성됩니다. flex 속성을 통해 아이템을 정렬하려면, 컨테이너가 필수적입니다. 즉, 기본적으로 부모 태그에 display: flex; 또는 display: inline-flex 속성이 적용되어 있어야 합니다. 두 방식의 차이점은 컨테이너의 수직 추가, 수평 추가의 차이입니다. 부모 요소에 flex 속성을 추가하면, 자식 요소에는 자동으로 해당 속성 효과가 부여됩니다. flex속성은 컨테이너와 아이템 즉, 부모 요소와 지식 요소를 함께 사용합니다. 아이템 정렬은 주축(main-axis)에 의해 결정됩니다. 기본 값은 row이며, 이는 왼쪽에서 오른쪽으로 아이템이 정렬됨을 의미합니다. 이를 column으로 변경시 주축 방향이 위에서 아래로..

자바스크립트의 모든 함수는 함수가 선언된 당시의 주변 환경을 기억합니다. 여기서 주변 환경이란 함수가 정의된 상위 스코프, 즉 실행 컨텍스트를 의미합니다. 이는 함수를 호출하는 위치가 아닌, 선언된 위치에 따라 결정되며, 따라서 함수는 언제나 상위 스코프의 식별자를 참조하고, 이에 할당된 값을 변경할 수 있습니다. 클로저란? 클로저는 함수와 해당 함수가 참조하고 있는 주변 환경(렉시컬 환경)과의 조합이다. 다른 말로 하자면, 클로저 기능은 내부 함수에서 외부 함수 스코프에 접근할 수 있게 하는 것이다. 자바스크립트에서 클로저는 함수가 생성될 때마다, 함수가 생성되는 시점에 생성된다. A closure is the combination of a function bundled together (enclose..

'use strict';는 자바스크립트에서 코드를 엄격 모드(strict mode)로 실행하는 것입니다. 'use strict';를 사용하면 선언하지 않은 변수를 사용할 수 없으며, 변수 및 함수를 삭제할 수 없는 등 자바스크립트 엔진에 보다 엄격한 기준이 적용됩니다. 선언하지 않은 변수는 사용할 수 없는 것이 원칙입니다. 그러나 다음 예시에서 보듯 x는 var, let, const 의 키워드를 통해 선언되지 않았기 때문에 에러가 발생할 것 같지만, 실제로는 자바스크립트 엔진이 전역 객체에 프로퍼티를 생성하여 5가 출력됩니다. function foo() { x = 5; } foo(); console.log(x); // 5 이처럼 자바스크립트 엔진은 변수가 키워드를 통해 생성되지 않은 경우, 암묵적 전역(..

자바스크립트에서 함수를 호출하면 함수가 바로 실행됩니다. 그러나 setTimeout과 setInterval을 사용해 함수 실행을 조정할 수 있습니다. 자바스크립트 엔진은 싱글 스레드로, 타이머 함수는 비동기 처리 방식으로 작동합니다. setTimeout setTimeout은 특정 시간이 지난 뒤 함수를 호출합니다. 첫 번째 인자에 실행할 함수를, 두 번째 인자에 지연 시간, 이후 순서의 인자에는 필요한 인자를 전달할 수 있습니다. setTimeout(() => console.log('Hello!'), 1000); setTimeout(date => console.log(`Today: ${date}`), 1000, '2020-11-07'); setInterval setInterval은 특정 간격으로 함수를 ..

프로토타입이란? 프로토타입(prototype)은 프로토타입 객체의 줄임말로 자바스크립트에서 상속을 구현하는 방식입니다. 모든 객체에는 하나의 프로토타입이 존재하며, 이는 모두 생성자 함수와 연결되어 있습니다. 프로토타입을 통해 자식 객체는 부모 객체의 프로퍼티를 자유롭게 사용할 수 있습니다. function Person (name) { this.name = name; } Person.prototype.age = 31; const person = new Person("Hwi"); console.log(person.age); // 31 프로토타입 체인 자바스크립트는 객체의 프로퍼티에 접근했으나 해당 프로퍼티가 존재하지 않는다면, 해당 객체의 부모 역할을 하는 프로토타입의 프로퍼티를 탐색합니다. 이러한 계층 ..

객체 지향 프로그램이란 각 객체의 집합으로 프로그램을 구성하는 방법을 의미합니다. 이는 전통적인 명령형 프로그래밍의 절차 지향적 관점을 벗어나는 것입니다. 객체 지향의 의미와 추상화 객체 지향 프로그래밍은 사람이 실생활의 사물이나 개념을 인식하는 방법을 '추상화(asbstraction)'를 통해 구현합니다. 여기서 추상화란 현실 세계의 특정 객체(예를 들면, 자동차)의 여러 속성 중에서 프로그램에 필요한 속성(예를 들면, 차량 모델, 번호판, 가격 등)을 추출해 내는 것을 의미합니다. // 차량번호AA6301, 가격 54000불, 테슬라3 차량의 추상화 const car = { model: tesla3 number: AA6301 price: 54000 }; 객체 지향 프로그램에서는 각 객체의 상태 데이터..

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 의 이해 그렇다면 이러한 ..