Over Tech

타입스크립트( Typescript )의 protected 접근제한자는 클래스의 속성이나 메서드에 사용한다. protected로 선언된 멤버는 해당 클래스 내부와 그 클래스를 상속받은 자식 클래스 내부에서 접근할 수 있다. 하지만, 클래스 외부에서 생성한 객체를 통해 직접 접근할 수는 없다. 접근제한자 protected는 부모 클래스가 가진 기능이나 데이터를 자식 클래스에서는 사용할 수 있고, 외부에서 임의로 접근할 수 없다. private 접근제한자가 클래스 내부에서만 접근할 수 있는 것과 달리, protected 접근제한자는 상속 관계에 있는 클래스까지 접근 범위를 확장한다. 접근제한자 protected는 클래스 상속 구조에서 공통 기능을 보호하면서 자식 클래스에 필요한 접근 권한을 제공하는 용도로 사용할 수 있다. ⊙ Copy class User { protected name: string; constructor(name: string) { this.name = name; } introduce() { console.log(`제 이름은 ${this.name}입니다.`); } } /* 접근 금지 - 외부 접근은 막고, 상속받은 클래스에서는 사용할 수 있도록 허용 */ const user = new User("철수"); console.log(user.name); ⊙ Copy class User { protected name: string; constructor(name: string) { this.name = name; } } class Admin extends User { showAdminName() { console.log(`관리자 이름: ${this.name}`); } } const admin = new Admin("홍길동"); admin.showAdminName(); /* - 외부 접근 불가 */ co...

타입스크립트(TypeScript)의 불리언(Boolean) 타입은 참( True )과 거짓( False )을 나타내는 논리형 데이터 타입이다. 타입스크립트에서는 불리언 값을 저장하는 변수의 타입을 `boolean`으로 설정하고, 초기값을 기준으로 자동으로 추론되어 타입이 결정된다. 불리언 타입은 프로그램에서 특정 조건의 성립 여부와 같은 두 가지 상태를 구분할 때 주로 사용한다. 비교 연산의 결과도 불리언 값으로 표현될 수 있다. 두 값에 대해 비교가 가능하고, 결과는 참 또는 거짓으로 판단되는 경우에 사용된다. 또한 논리 연산을 이용하면 여러 불리언 조건을 결합하거나 반대로 결과를 변경할 수 있다. 대표적인 논리 연산에는 두 조건이 모두 참인지 확인하는 AND, 하나 이상이 참인지 확인하는 OR, 참과 거짓을 반전하는 NOT이 있다. 불리언 값은 조건문과 반복문에서 실행 여부를 결정하는 조건으로 사용한다. 타입스크립트 불리언( boolean ) 타입 사용 방법 ⊙ 불리언( boolean ) 타입 로그인, 관리자 상태 표현 타입스크립트( typescript )의 boolean 타입은 논리적인 상태를 나타내며, 값은 참( true ) 또는 거짓( false ) 두 가지이다. 로그인 여부, 관리자 권한 여부, 기능 활성화 여부처럼, 주로, 참과 거짓으로 구분할 수 있는 상태를 표현할 때 사용한다. Copy /** */ export {}; /* 불리언 타입 사용 방법 true : 참 false : 거짓 */ let isLoggedIn: boolean = true; let isAdmin: boolean = false; console.log(isLoggedIn); console.log(isAdmin); 불리언( boolean ) 타입을 명시하면 해당 변수에는 기본적으로 true 또는 false와 같은 불리언 값만 할당할 수 있다. 위의 코드에서 isLoggedIn은 로그인 상태, isAdmin은 관리자 여부이다. 불리언( boolean ) 타입은 프로...

타입스크립트에서 `private` 접근 제한자는 클래스 내부에서만 사용할 수 있도록, 프로퍼티( Property )나 메서드( Method )의 접근 범위를 제한할 때 사용한다. `private`으로 선언된 멤버는 해당 멤버가 정의된 클래스의 내부에서는 접근할 수 있지만, 클래스 외부에서 직접 접근할 수 없다. 일반적인 `private` 멤버는 상속받은 자식 클래스 또한 직접 접근할 수 없다. 접근 제한은 클래스 내부의 데이터를 외부 코드로부터 보호하고, 객체의 상태가 임의로 변경되는 것을 금지한다. 외부에서 값의 조회나 변경이 필요한 경우에는 클래스가 제공하는 공개 메서드나 접근자 등을 통해 처리하도록 한다. `private` 접근제한자는 클래스의 내부 구현을 감추고 외부에 필요한 기능만 제공하는 캡슐화를 표현하는 데 사용된다. ⊙ Copy class User { private name: string; constructor(name: string) { this.name = name; } } ⊙ Copy class BankAccount { balance: number = 10000; } const account = new BankAccount(); account.balance = -100000; ⊙ Copy class User { private password: string; constructor(password: string) { this.password = password; } checkPassword(input: string): boolean { return this.password === input; } } const user = new User("1234"); console.log(user.checkPassword("1234")); ⊙ Copy class User { private password: string; construc...

타입스크립트( Typescript )의 public은 클래스의 속성이나 메서드에 적용하는 접근 제한자로, 클래스 내부, 외부에서 해당 멤버와 메서드에 접근할 수 있도록 한다. 클래스 멤버는 별도의 접근 제한자를 작성하지 않으면 기본적으로 public으로 설정된다. 접근제한자를 명시적으로 작성하면, 해당 멤버와 메서드는 외부 접근을 명시하고 접근을 제한한다. public은 private, protected와 함께 클래스 멤버의 접근 범위를 구분하는 데 사용되며, 타입스크립트의 클래스 구조와 객체 사용 범위를 명확하게 표현한다. ⊙ Copy class User { public name: string = "철수"; printName() { console.log(this.name); // 클래스 내부 접근 } } const user = new User(); console.log(user.name); // 클래스 외부 접근 ⊙ Copy class Calculator { public add(a: number, b: number): number { return a + b; } } const calculator = new Calculator(); console.log(calculator.add(10, 20)); ⊙ Copy /* public을 명시한 경우 */ class User { public name: string = "철수"; public hello(): void { console.log("안녕하세요."); } } ⊙ Copy /* public을 생략한 경우 */ class User { name: string = "철수"; hello(): void { console.log("안녕하세요."); } } ⊙ Copy class Product { name: string = "키보...

타입스크립트( TypeScript )에서 클래스의 생성자( Constructor )는 클래스가 메모리에 생성( Instance )될 때 초기 값을 설정하기 위해 사용한다. 생성자는 클래스 내부에서 `constructor`라는 키워드를 사용하며, 객체가 생성될 때 자동으로 한 번 호출된다. 생성자의 매개변수를 이용하면 외부에서 데이터 값을 전달받아 클래스의 속성에 할당할 수 있으며, 이를 활용하면 같은 클래스를 사용해 여러 객체를 만들 수 있다. 생성자에서는 클래스의 프로퍼티를 초기화하거나, 객체 생성 시 필요한 값을 설정하는 작업을 할 수 있다. 타입스크립트에서는 생성자 매개변수, 클래스 속성에 데이터 타입을 지정할 수 있으며, 잘못된 타입의 값이 전달되는 것을 컴파일 단계에서 확인할 수 있다. 생성자 매개변수는 접근 제한자 및 속성 제어를 사용할 수 있다. ⊙ Copy const user = new User("Kim", 30); ⊙ Copy class User { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } } ⊙ Copy const user = new User("Kim", 30); console.log(user.name); console.log(user.age); ⊙ Copy this.name = name; this.age = age; ⊙ Copy class User { name: string; constructor(name: string) { this.name = name; } } ⊙ Copy class Product { name: string; price: number; constructor(name: string, price: number) { this.name = name; t...

타입스크립트( TypeScript )의 클래스( Class )는 객체가 가져야 할 데이터와 기능을 하나의 구조로 정의한다. 클래스 내부에는 객체의 상태를 저장하는 프로퍼티( Property ), 객체가 생성될 때 초기값을 설정하는 생성자( Constructor ), 특정 동작을 수행하는 메서드( Method )를 정의할 수 있다. 클래스( Class )를 기반으로 객체를 만들 때는 일반적으로 `new` 연산자를 사용하며, 생성된 객체를 인스턴스( Instance )라고 한다. 타입스크립트에서는 클래스의 프로퍼티와 메서드에 타입을 지정할 수 있기 때문에, 잘못된 값의 사용을 컴파일 단계에서 확인하는 데 도움이 된다. 그리고, `public`, `private`, `protected`와 같은 접근 제한자를 사용하여, 클래스에 접근을 제한할 수 있다. 클래스는 공통된 데이터와 동작을 가진 객체를 체계적으로 표현할 때 활용할 수 있다. ⊙ Copy class User { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } introduce(): void { console.log(`안녕하세요. 저는 ${this.name}입니다.`); } } ⊙ Copy const user = new User("철수", 20); ⊙ Copy this.name const user1 = new User("철수", 20); const user2 = new User("영희", 25); ⊙ Copy introduce(): void { console.log(`안녕하세요. 저는 ${this.name}입니다.`); } const user = new User("철수", 20); user.introduce();

타입스크립트(TypeScript)의 readonly tuple은 튜플( Tuple )에 저장된 값을 생성 이후 변경하지 못하도록 제한하는 타입 표현 방식이다. readonly가 적용된 튜플은 각 요소를 읽을 수는 있지만, 기존 요소의 값을 다른 값으로 변경하거나 새로운 요소를 추가, 삭제하는 작업이 제한된다. 튜플(tuple)은 배열과 비슷하지만 요소의 개수, 위치, 각 위치의 타입을 명확하게 표현할 수 있고, 여기에 readonly를 적용하면 임의로 값을 수정하지 못하도록 제한할 수 있다. 값의 변경을 타입 수준에서 제한하기 때문에 개발 과정에서 데이터를 수정하는 문제를 줄이는 데 도움이 된다. readonly는 타입스크립트의 타입 검사 단계에서 변경을 하지 못하도록 제한하는 기능이다. ⊙ Copy const point: readonly [number, number] = [10, 20]; ⊙ Copy const user: [string, number] = ["Kim", 30]; ⊙ Copy user[0] = "Lee"; user[1] = 31; ⊙ Copy user[0] = 100; // TypeScript 오류 ⊙ Copy readonly [타입1, 타입2, 타입3] ⊙ Copy const point: readonly [number, number] = [10, 20]; ⊙ Copy console.log(point[0]); // 10 console.log(point[1]); // 20 ⊙ Copy point[0] = 100; // 오류: 읽기 전용 속성이므로 할당할 수 없음 ⊙ Copy let mutablePoint: [number, number] = [10, 20]; mutablePoint[0] = 100; // 가능 ⊙ Copy const readonlyPoint: readonly [number, number] = [10, 20]; readonlyPoint[0] = 100; // ...

타입스크립트( Typescript ) 의 튜플( Tuple ) 은 배열과 비슷하지만, 각각의 위치에 들어갈 값의 타입과 순서를 미리 정해 두는 자료형 타입이다. 일반적인 배열 이 같은 종류의 값을 여러 개 저장하는 데 사용한다면, 튜플 은 서로 다른 타입의 값을 일정한 구조로 묶어 사용한다. 튜플 배열 은 튜플 을 여러 개 저장하는 배열이며, 각 항목은 동일한 위치 구조를 가진다. 첫 번째 위치 에는 항상 지정된 타입의 값이 들어가고, 두 번째, 세 번째 위치 는 각각 선언된 타입을 따른다. 튜플 은 데이터의 구조를 명확하게 표현할 수 있으며, 잘못된 순서나 타입의 값이 저장되는 문제를 컴파일 단계에서 발견할 수 있다. 다만, 데이터 항목의 의미가 많아지거나 필드 수가 증가하는 경우, 각 위치와 항목의 의미를 파악하기 어려워질 수 있기 때문에, 이런 경우에는 이름이 있는 속성을 사용하는 객체나 인터페이스 형태가 더 읽기 쉬울 수 있다. 튜플 배열 은 좌표, 키와 값의 조합, 고정된 형식의 간단한 데이터처럼 항목 수가 적고 순서가 명확한 데이터를 반복해서 관리할 때 적합하다. Copy const user: (string | number)[] = ["홍길동", 20]; ⊙ Copy const user: [string, number] = ["홍길동", 20]; ⊙ Copy const user: [string, number] = ["홍길동", 20]; ⊙ Copy const user: [string, number] = [20, "홍길동"]; ⊙ Copy const user: (string | number)[] = ["홍길동", 20]; ⊙ Copy const user: (string | number)[] = [20, "홍길동"]; ⊙ Copy const user: [string, number] = ["홍길동", 20]; ...

타입스크립트( Typescript)에서 숫자 타입은 정수, 소수, 음수 등 일반적인 숫자를 표현할 때 사용한다. 숫자 타입은 number를 사용하며, 자바스크립트와 마찬가지로 정수와 실수를 별도의 타입으로 구분하지 않는다. 나이, 가격, 수량, 점수, 좌표, 비율처럼 계산이 필요한 값을 하나의 숫자 타입으로 사용한다. 숫자 타입으로 선언된 값에는 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 계산과 같은 산술 연산을 사용할 수 있다. 타입스크립트는 변수에 처음 저장된 값을 분석해 숫자 타입을 자동으로 추론할 수도 있으며, 필요할 때는 개발자가 숫자 타입을 명시하여 다른 자료형의 값이 잘못 저장하지 못하도록 방지할 수 있다. 숫자 타입에는 일반적인 숫자뿐만 아니라 계산할 수 없는 값을 나타내는 NaN, 양수 또는 음수 방향의 무한대를 나타내는 Infinity도 포함된다. 금액처럼 정확한 계산이 필요한 경우에는 정수 단위로 변환하거나 별도의 계산 방식을 사용하는 것을 권장한다. 매우 큰 정수를 정확하게 처리해야 할 때는 number가 아닌 bigint 타입을 사용할 수도 있다. number와 bigint는 서로 다른 타입이기 때문에, 직접 혼합하여 계산할 수 없다. 타입스크립트의 숫자 타입은 수치 데이터의 형식을 명확히 하고, 문자열이나 불리언 값이 잘못 사용되는 문제를 컴파일 단계에서 확인하도록 돕는 역할을 한다. 타입스크립트 숫자 타입 사용 방법 일반적인 모든 숫자를 사용한다. ⊙ 타입스크립트 숫자 타입 코드 예제 타입스크립트( Typescript )에서 숫자 타입을 사용하는 코드를 살펴보자. 타입스크립트는 숫자 타입은 number 키워드를 사용하며, 정수, 실수, 소수를 사용하고, 사칙연산을 사용하여 계산을 할 수 있다. Copy /** */ export {}; /* 숫자 타입 변수 선언 */ let age: number = 30; let price: number = 19900; let discountRate: number = 0.15; /* 할인 금액 계산 */...

타입스크립트( Typescript )의 튜플( tuple )타입은 배열과 비슷하다. 튜플 타입은 저장할 값의 개수와 각 위치에 들어갈 데이터 타입을 미리 정할 수 있는 타입이다. 일반 배열은 같은 타입의 값을 여러 개 저장할 때 사용하지만, 튜플은 서로 다른 타입의 값을 정해진 순서로 묶어서 사용한다. 첫 번째 값은 문자열, 두 번째 값은 숫자처럼 각 위치의 타입을 구분할 수 있는 것이 튜플이다. 정해진 형식의 데이터를 하나의 묶음으로 표현하고자 할 때 튜플을 사용해 데이터 구조를 만들 수 있다. 튜플을 사용하면 각 위치에 허용되는 타입이 지정된다. 만약, 잘못된 타입의 값이 입력되려고 한다면, 컴파일 단계에서 확인 후 에러가 발생한다. 필요한 경우 튜플에 저장된 데이터 중에서 특정 위치의 값을 선택적으로 지정하거나, 읽기 전용 형태로 설정하여 값의 변경을 제한할 수도 있다. 튜플은 좌표, 사용자 정보, 함수의 여러 반환값처럼 값의 순서와 의미가 명확하게 정해진 데이터를 표현할 때 사용된다. 타입스크립트 튜플( tuple ) 타입 예제 ⊙ Copy const user: [string, number] = ["철수", 20]; ⊙ Copy let user: [string, number]; user = ["철수", 20]; ⊙ Copy let user: [string, number]; user = [20, "철수"]; ⊙ Copy const names: string[] = ["철수", "영희", "민수"]; ⊙ Copy const user: [string, number, boolean] = [ "철수", 20, true ]; ⊙ Copy const product: [string, number] = [ "노트북", 1500000 ]; ⊙ Copy console.log(product[...

타입스크립트( Typescript )의 문자열 enum 타입은 여러 개의 문자열 값을 하나의 열거형으로 정의하여 사용하는 기능이다. 각각의 enum 멤버에 `READY`, `RUNNING`, `DONE`과 같은 문자열 값을 지정하여, 프로그램에서 사용할 수 있는 상태나 종류를 명확하게 제한하고 구분한다. 문자열 enum 타입은 숫자 enum과 달리 각 멤버가 의미 있는 문자열 값을 가지므로, 실행 결과나 로그를 확인할 때 값의 의미를 쉽게 파악할 수 있다. 예를 들어, 주문 상태, 사용자 권한, 작업 진행 상태, 화면 모드처럼 미리 정해진 값 중 하나를 선택해야 하는 경우에 사용될 수 있다. 동일한 문자열을 여러 위치에 직접 작성하는 실수를 예방하고, 관련된 상수 값을 하나의 이름으로 관리할 수 있다. 타입스크립트의 문자열 enum 타입은 프로그램에서 고정된 문자열 값의 집합을 정의하고 코드의 가독성과 유지보수성을 위한 열거형 표현 방식이다. ⊙ Copy const status = "active"; ⊙ Copy enum UserStatus { Active = "ACTIVE", Inactive = "INACTIVE", Pending = "PENDING", } ⊙ Copy console.log(UserStatus.Active); ⊙ Copy let status: UserStatus; status = UserStatus.Active; status = UserStatus.Pending;

타입스크립트( Typescript )에서 숫자 enum(Number Enum)은 여러 개의 관련된 상수 값을 이름으로 정의하고, 각 항목에 숫자 값을 자동 또는 직접 할당하여 사용하는 열거형 타입이다. 첫 번째 항목은 0부터 시작하며, 1씩 증가한 숫자가 자동으로 지정된다. 시작 숫자를 직접 설정하면 다음 항목부터는 해당 값을 기준으로 순차적으로 증가한다. 숫자 enum은 상태값, 권한 등급, 진행 단계, 메뉴 번호처럼 제한된 숫자 값을 의미 있는 이름으로 사용된다. 단순한 숫자를 직접 사용하는 것보다 각 값의 의미를 지정하여 코드의 가독성과 편한 유지보수를 높일 수 있다. 타입스크립트의 숫자 enum 타입은 숫자 값을 하나의 집합으로 묶어 관리하기 쉽다는 특징이 있다. Copy 0 // 일반 사용자 1 // 관리자 2 // 최고 관리자 ⊙ Copy enum UserRole { User, Admin, SuperAdmin, } ⊙ Copy enum Direction { Up, Down, Left, Right, } ⊙ Copy Direction.Up // 0 Direction.Down // 1 Direction.Left // 2 Direction.Right // 3 ⊙ Copy enum UserRole { User, Admin, SuperAdmin, } ⊙ Copy console.log(UserRole.User); // 0 console.log(UserRole.Admin); // 1 console.log(UserRole.SuperAdmin); // 2 ⊙ Copy const role = 1; ⊙ Copy const role: UserRole = UserRole.Admin; ⊙ Copy enum Status { Ready = 1, Processing, Complete, } ⊙ Copy Status.Ready // 1 Status.Proce...

타입스크립트( Typescript )의 enum 키워드는 여러 개의 관련된 상수 값을 하나의 이름으로 묶어 사용하는 열거형 자료형이다. enum은 상태, 방향, 권한, 사용자 등급처럼 미리 정해진 값의 집합을 표현할 수 있다. enum을 사용하면 숫자나 문자열 값을 의미가 있는 이름으로 값을 구분할 수 있다. 타입스크립트의 enum은 숫자 enum과 문자열 enum으로 구분된다. 숫자 enum은 각 항목에 숫자 값을 할당하며, 값을 지정하지 않으면 일반적으로 0부터 순서대로 증가한다. 문자열 enum은 각 항목에 명확한 문자열 값을 지정한다. 타입스크립트에서 enum은 서로 연관된 고정된 선택값을 하나의 타입으로 정의하여 사용할 수 있다. ⊙ Copy let role = "admin"; ⊙ Copy enum UserRole { Admin, User, Guest } ⊙ Copy const role: UserRole = UserRole.Admin; ⊙ Copy 사용자 권한 → Admin / User / Guest 주문 상태 → Pending / Paid / Shipped / Cancelled 테마 → Light / Dark 방향 → Up / Down / Left / Right ⊙ Copy enum Direction { Up, Down, Left, Right } ⊙ Copy const direction = Direction.Up; console.log(direction); ⊙ Copy function move(direction: Direction) { if (direction === Direction.Up) { console.log("위로 이동합니다."); } } move(Direction.Up); ⊙ Copy enum HttpStatus { Success = 200, NotFound = 404, ServerError = 500 } ⊙ Co...

타입스크립트( Typescript )의 사용자 정의 타입 가드(User-Defined Type Guard)​는 개발자가 직접 작성한 조건을 이용하여 특정 값의 타입을 판별하고, 그 결과를 타입스크립트 컴파일러가 이해할 수 있도록 만드는 기능이다. 타입스크립트에서는 하나의 값이 여러 타입 중 하나가 될 수 있는 유니온 타입을 자주 사용한다. 프로그램이 현재 값의 정확한 타입을 확인하지 않은 상태에서 특정 타입에만 존재하는 속성이나 기능을 사용하면 오류가 발생할 수 있다. 사용자 정의 타입 가드는 이러한 상황에서 값의 실제 타입을 명확하게 하는 역할을 한다. 이 함수는 전달받은 객체의 특정 속성 존재 여부, 속성값, 자료형 등의 조건을 검사하여 해당 값이 원하는 타입인지 판단한다. 판별 결과가 참이면 타입스크립트는 이후 처리 영역에서 해당 값을 지정된 타입으로 인식한다. 사용자 정보를 나타내는 일반 사용자 타입과 관리자 타입이 함께 사용되는 경우, 관리자에게만 존재하는 권한 관련 속성을 검사하여 관리자 여부를 판단하는 타입 가드를 만들 수 있다. 판별 결과가 관리자라면 이후 코드에서는 관리자 전용 속성을 안전하게 사용할 수 있다. 사용자 정의 타입 가드의 핵심 목적은 타입 판별, 타입 좁히기, 타입 안정성 향상​이다. 여러 객체 타입을 함께 사용하는 프로그램, API 응답 데이터 처리, 사용자 권한 구분, 다양한 상태 객체 처리 등에 유용하다. 사용자 정의 타입 가드는 개발자가 프로그램의 데이터 구조에 맞는 판별 기준을 직접 정의하여 타입스크립트가 보다 정확하게 타입을 추론하도록 돕는 기능이다. 사용자 정의 타입 가드를 활용하면 불필요한 타입 단언을 줄이고 런타임 오류 가능성을 낮추면서 더욱 안전하고 명확한 프로그램을 작성할 수 있다. ⊙ Copy function printValue(value: string | number) { if (typeof value === "string") { console.log(value.toUpper...