javascript

JavaScript String 객체 프로그래밍에서 문자열은 일반적으로 문자 인코딩과 관련된 문자를 대표하는 일련의 값을 저장하는 자료형입니다. 문자열 자료형으로 선언된 변수의 경우, 일반적으로 미리 정의된 메모리에 자료를 할당합니다. 문자열이 소스 코드상에 보이는 경우엔 해당 문자열을 String literal 이라고 합니다. JavaScript의 String 객체는 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 래퍼(wrapper) 객체입니다. 변수 또는 객체가 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String 객체의 프로퍼티와 메소드를 사용할 수 있습니다. 1. 문자열 1.1. 문자열 선언 JavaScript에서는 문자 하나당 UTF-16 코드 문자가 사용됩니다. ..

TypeScript 제네릭 TypeScript의 제네릭에 대해 알아보겠습니다. 1. 제네릭 TypeScript는 정적 타입 언어이기 때문에 함수 또는 클래스를 선언할 때 매개변수나 반환값의 타입을 정의해야 합니다. 하지만 이렇게 특정 타입을 위해 만들어진 함수나 클래스를 재사용 해야하는 경우가 발생하고 이 때 제네릭을 사용합니다. 2. 제네릭이 필요한 경우 다음은 자료구조 큐(Queue)를 TypeScript로 구현한 예제입니다. 123456789101112131415161718192021class Queue { protected data: any = []; constructor() {} push(item: any): void { this.data.push(item); } pop(): void { ret..

TypeScript 인터페이스 TypeScript의 인터페이스에 대해 알아보겠습니다. 1. 인터페이스 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있습니다. 인터페이스는 여러가지 타입의 프로퍼티로 새로운 타입을 정의하는 것과 유사하며, 정의된 인터페이스는 일관성을 유지하기 위해 내부에 선언된 프로퍼티 또는 메소드의 구현을 강제하는 특징이 있습니다. 인터페이스는 클래스와 유사하지만 인스턴스 생성이 불가능하고 모든 메소드는 추상 메소드로 이루어져 있습니다. 또한 인터페이스의 추상 메소드는 abstract 키워드를 사용하지 않는다는 특징이 있습니다. 또한 ES6에서 지원하지 않고 TypeScript에서만 지원합니다. 2. 인터페이스의 사용 인터페이스는..

TypeScript 클래스 TypeScript의 클래스에 대해 알아보겠습니다. ES(ECMAScript)6에서 도입되었습니다. 클래스는 클래스 기반 언어에 익숙한 개발자가 보다 빠르게 학습할 수 있는 문법을 제시하지만 새로운 객체지향 모델을 제공하는 것은 아닙니다. 클래스도 프로토타입 기반 패턴의 함수를 보다 직관적인 문법으로 보기 쉽게 만든 것입니다. TypeScript에서 지원하는 클래스는 ES6와 유사하지만 몇 가지 다른 고유한 기능이 있습니다. 1. 클래스 ES6의 클래스에서는 클래스 내부에 프로퍼티를 선언할 수가 없어서 생성자 안에서 선언해야 하지만, TypeScript의 클래스는 클래스 내부에 프로퍼티 선언이 가능하고 사용할 프로퍼티를 먼저 선언해줘야 합니다. 123456789101112131..

JavaScript 화살표 함수 JavaScript ES6의 화살표 함수에 대해 알아보겠습니다. 1. 화살표 함수 화살표 함수는 ES6에서 도입된 문법입니다. function 키워드를 사용하는 것보다 간결하고 항상 익명으로 동작합니다. 1.1. 화살표 함수 선언 화살표 함수의 매개변수를 지정하는 방법입니다. 1 2 3 4 5 6 7 8 // 매개변수가 없는 경우 var arrowFunc = () => { ... }; // 매개변수가 한 개인 경우 (소괄호를 생략 가능) var arrowFunc = x => { ... }; // 매개변수가 여러 개인 경우 (소괄호를 생략 불가) var arrowFunc = (x, y) => { ... }; cs 화살표 함수의 block을 지정하는 방법입니다. 1 2 3 4..

JavaScript 변수 선언 및 특징 JavaScript ES6(ECMAScript6)를 기준으로 변수 선언과 그에 따른 특징에 대해 알아보겠습니다. 1. 변수 선언 JavaScript ES5에서의 변수 선언은 var 키워드를 사용하는 것이 유일한 방법이었습니다. var 키워드를 사용한 변수 선언은 다음과 같은 특징과 문제가 있습니다. 함수레벨 스코프로 동작 (전역 변수의 남발 및 코드 복잡도 증가) 변수 선언시 var 키워드 생략 허용 (변수의 의도하지 않은 전역화) 중복 선언 허용 (변수의 의도하지 않은 값 변경) 변수 호이스팅 (변수 선언 이전에 참조 가능) 이러한 특징은 대부분 전역 변수의 선언과 사용으로 인하여 발생하며 코드 복잡도를 높이는 원인이 됩니다. ES6에서는 var 키워드의 단점을 ..

TypeScript 정적 타이핑 TypeScript의 정적 타이핑에 대해 알아보겠습니다. 1. 타입 선언 TypeScript에서는 다음과 같이 변수명 뒤에 타입(자료형)을 명시하여 타입을 선언하는 것이 가능합니다. 1let text: string = 'Hello';cs 또한 타입 선언 후 맞지 않는 값을 할당하면 컴파일할 때 에러가 발생합니다. 타입 선언의 특징은 다음과 같습니다. 개발자의 코드 예측 가능 및 개발 효율 향상 강력한 타입 체크 기능으로 문법 에러나 일치하지 않는 값의 할당 오류 등을 런타임 이전에 검출TypeScript는 ES5, ES6의 상위 집합이므로 기존 JavaScript의 타입을 그대로 사용할 수 있습니다. 다음은 TypeScript와 JavaScript의 타입을 정리한 내용입니..

Angular 모듈(Module) Angular의 모듈(Module)에 대해 알아보겠습니다. 1. 모듈 (Modue) Angular의 모듈은 Angular의 컴포넌트, 디렉티브, 파이프, 서비스 등과 같이 관련이 있는 요소를 모은 하나의 단위를 의미합니다. 모듈은 다른 모듈과 결합할 수 있으며 Angular는 여러 모듈을 조합하여 하나의 애플리케이션을 구성합니다. 또한 모듈은 다른 모듈을 import 할 수 있습니다. Angular에서 제공하는 라이브러리 모듈이나 서드 파티 라이브러리도 import 하여 사용할 수 있습니다. 이러한 모듈성(Modularity)은 애플리케이션 개발에 있어서 중요한 의미를 갖습니다. 애플리케이션에 대한 요구사항이 많아지면서 코드의 복잡도가 높아짐에 따라 루트 모듈, 기능 모..

Angular 생명주기(Lifecycle)와 훅(Hook) 메소드 Angular의 생명주기(Life cycle)와 훅(Hook) 메소드에 대해 알아보겠습니다. 1. 생명주기 Angular의 컴포넌트와 디렉티브는 생명주기(Lifecycle)를 갖는데, 생명주기는 Angular가 컴포넌트와 디렉티브를 생성하여 소멸하기까지의 과정을 관리하는 것을 의미합니다. 이와 관련하여 생명주기 이름 앞에 ng가 붙은 훅(Hook) 메소드를 제공하는데 이를 구현하여 생명주기의 각 단계에서 처리해야하는 내용을 정의할 수 있습니다. Angular는 다음의 순서대로 생명주기를 관리합니다. ※ 디렉티브 생명주기 훅 메소드디렉티브도 컴포넌트와 동일한 생명주기 훅 메소드를 사용합니다. 하지만 디렉티브에는 뷰가 없기 때문에 뷰와 관련된..