jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com 기본 문법 jQuery는 HTML 요소를 선택 하고 요소에 대해 일부 작업을 수행하기 위해 맞춤 제작되었다. 기본 문법 : $(selector).action() jQuery 정의/액세스를 위한 $ 기호 (selector)..
BEM(Block, Element, Modifier)이란? BEM (Block, Element, Modifier)은 CSS 코드를 구조화하고 조직화하는 방법론이다. 코드의 유지 보수성, 가독성 및 확장성을 향상시키기 위해 명명 규칙 및 CSS 아키텍처에 대한 모듈식 접근 방식을 제공한다. BEM은 러시아 검색 엔진 회사인 Yandex가 소개했으며, 웹 개발자들 사이에서 인기를 얻었다. Yandex Finds everything yandex.com BEM 방법론은 세 가지 핵심 구성 요소로 구성된다. 블록(Block) 블록은 독립적이고 재사용 가능하며 논리적으로 독립된 개체로, 사용자 인터페이스(UI)의 의미 있는 부분을 나타낸다. 블록의 예로는 헤더, 푸터, 버튼, 내비게이션 메뉴가 있다. BEM에서 블..
Prototype(프로토타입) JavaScript에서 프로토타입은 다른 객체를 만들기 위한 청사진 역할을 하는 객체다. 이는 JavaScript 객체 지향 프로그래밍의 필수 부분으로, 프로토타입에서 속성과 메소드를 상속하는 객체를 생성할 수 있다. 이 상속 메커니즘을 프로토타입 상속이라고 한다. 프로토타입 객체는 두 가지 기본 용도로 사용된다. 상속: 객체는 프로토타입에서 속성과 메소드를 상속할 수 있다. 코드 재사용성: 프로토타입을 사용하여 공유 속성 및 메소드를 정의하여 코드 중복을 줄일 수 있다. 이 개념을 이해하기 위해 생성자 함수와 프로토타입을 사용하여 간단한 예제를 만들어보자. // Car 객체를 생성하기 위한 생성자 함수 function Car(make, model, year) { this...
$(달러 사인) 변수 작명법 인터넷 강의를 통해 공부하던 중에 DOM조작할 시에 한개의 태그를 가져올때는 $(달러사인) 한개를 사용하고, 여러개의 태그를 가져올 때는 $ 두개를 사용해서 변수명을 작명하는 것을 본 적이 있다. const $list = document.querySelector('li'); const $$list = document.querySelectorAll('li'); 강사는 위의 예시처럼 변수명을 주로 작명한다고 했다. 가독성도 좋고 사용할 때 편할 것 같다고 느꼈다. 그래도 혹시나 사용하는데에 문제가 있을까 찾아봤다. 변수명에 $ 기호를 사용하는 것은 JavaScript 언어 자체에서 문법적인 오류를 일으키지 않으므로, 기술적으로는 문제가 없다. 그러나 보통 jQuery 라이브러리에..
?. (Optional Chaining) Optional Chaining은 객체 내부의 속성에 접근할 때 속성이 존재하지 않아서 TypeError가 발생하는 것을 방지하기 위해 도입된 연산자다. 만약 속성이 존재하지 않는다면 undefined를 반환하고, 그렇지 않은 경우에는 해당 속성에 접근한다. const user = { name: 'John', address: { city: 'Seoul', country: 'South Korea' } }; console.log(user.address?.city); // 'Seoul' console.log(user.address?.state); // undefined && (Logical AND) AND 연산자는 왼쪽 피연산자와 오른쪽 피연산자 모두가 true일 경우..
Type Guards(타입가드) Type Guards(타입가드)는 타입스크립트에서 변수의 타입을 보다 구체적으로 유추할 수 있도록 하는 기능이다. 이를 통해 코드의 가독성과 안정성을 높일 수 있다. Type Guard에는 다음과 같은 종류가 있다. typeof Type Guards typeof Type Guards는 JavaScript의 typeof 연산자를 사용하여 변수의 타입을 검사하는 것이다. 예를 들어, 다음과 같이 사용할 수 있다. function printValue(value: string | number) { if (typeof value === 'string') { console.log(`Value is a string with length ${value.length}`); } else {..
Type Query(타입 쿼리) Type Query(타입 쿼리)는 특정 타입(Type)을 가져오는 방법이다. 즉, 타입 쿼리를 사용하면 변수, 함수 또는 클래스 등에 대한 타입 정보를 가져올 수 있다. 타입 쿼리는 다음과 같은 두 가지 방법으로 사용할 수 있다. typeof 연산자를 사용하여 변수 또는 함수의 타입 정보를 가져오기 예를 들어, 다음과 같은 코드가 있다고 가정해보자. const person = { name: "John", age: 30 }; function getPersonInfo(person: { name: string; age: number }): void { console.log(`${person.name} is ${person.age} years old`); } 여기서 typeof ..
Generic(제네릭) Generic(제네릭)은 함수, 클래스, 인터페이스 등의 타입을 일반화하여 재사용성을 높이는 기능이다. 즉, 타입스크립트에서 일반적으로 사용되는 타입을 구체적인 타입으로 대체하여 코드의 재사용성과 유연성을 높일 수 있다. 제네릭을 사용하면 함수나 클래스의 매개변수 또는 반환값의 타입을 미리 지정하지 않고, 실행 시점에 동적으로 타입을 결정할 수 있다. 이를 통해 다양한 타입의 인수를 전달하고 다양한 타입의 값을 반환하는 함수를 만들 수 있다. 제네릭은 대괄호() 안에 타입 변수를 사용하여 정의된다. 이 타입 변수는 일반적으로 대문자로 표시되며, 사용자가 지정하는 타입이다. 예를 들어, 다음은 제네릭 함수를 정의하는 방법이다. function identity(arg: T): T { ..
Decorator 패턴 Decorator 패턴은 객체 지향 디자인 패턴 중 하나로, 객체에 동적으로 새로운 기능을 추가하기 위한 방법이다. 데코레이터 패턴을 사용하면 객체의 수정 없이도 객체의 기능을 확장하고, 코드의 재사용성과 유연성을 높일 수 있다. 타입스크립트에서는 데코레이터 패턴을 사용하여 클래스, 메소드, 프로퍼티 등에 데코레이터를 적용할 수 있다. 데코레이터는 클래스, 메소드, 프로퍼티 앞에 @ 기호를 붙이며, 함수로 구현된다. 데코레이터 함수는 대상이 되는 클래스, 메소드, 프로퍼티를 인자로 받으며, 이들을 수정하거나 대체할 수 있다. 예를 들어, 아래와 같은 클래스가 있다고 가정해보자. class Car { drive() { console.log("Driving"); } } 이 클래스에 데..
Command 패턴 Command 패턴은 객체 지향 디자인 패턴 중 하나로, 어떤 작업을 수행하는 명령(Command)을 캡슐화하여 실행할 수 있는 객체로 만들고, 이를 조합하여 원하는 기능을 수행하는 방식을 제공하는 패턴이다. 타입스크립트에서는 Command 패턴을 구현하기 위해 다음과 같은 단계를 따른다. Command 인터페이스 정의하기 Command 인터페이스는 명령(Command)을 수행하는 메소드 execute를 가지고 있다. 이 인터페이스를 구현하는 클래스들은 execute 메소드를 구현하여 각각의 명령을 수행한다. interface Command { execute(): void; } Command 구현하기 Command 인터페이스를 구현하여 각각의 명령(Command)을 구현한다. 이때 각..
