Angular

Angular 1. Angular Angular에 대해 알아봅시다! Angular는 Google이 개발한 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크입니다. 웹 애플리케이션을 구축하기 위한 도구와 기능을 제공하여, 개발자가 보다 쉽고 효율적으로 웹 애플리케이션을 구축할 수 있도록 돕습니다. 2. 기능 및 특징 Angular의 핵심 기능과 특징은 여러가지가 있습니다. 1) 컴포넌트 기반 아키텍처 컴포넌트 기반 아키텍처를 채택하여, 개발자가 애플리케이션을 여러 개의 작은 컴포넌트로 분할하고 관리할 수 있도록 합니다. 2) 양방향 데이터 바인딩 모델과 뷰 사이의 양방향 데이터 바인딩을 지원하여, 데이터의 변경이 자동으로 화면에 반영되도록 합니다. 3) 의존성 주입 컴포넌트 간의 의존성을 관리하고 코드의 재..

• format_list_bulleted Front-End Study/Angular
• · 2024. 2. 26.
• textsms

유틸리티 타입

유틸리티 타입 1. 유틸리티 타입 이번엔 유틸리티 타입에 대해 알아봅시다. 유틸리티 타입은 기존 타입을 변환하거나 새로운 타입을 생성하기 위해 사용되는 내장 타입입니다. 유틸리티 타입은 코드를 더 간결하고 유연하게 작성할 수 있도록 도와줍니다. 2. keyof keyof는 객체의 속성 이름 집합을 가져옵니다. 해당 객체의 모든 속성 이름을 포함하는 유니온 타입이 생성됩니다. 다음 코드처럼 사용할 수 있습니다. interface User { id: number; name: string; age: number; gender: "m" | "f"; } type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender' // UserKey의 키 값을 입력해야 함 con..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 2. 21.
• textsms

제네릭(Generics)

제네릭(Generics) 1. 제네릭(Generics) 이번엔 제네릭(Generics)에 대해 알아봅시다! 제네릭이란? 코드를 재사용하고 유연성을 높이는 데 사용되는 강력한 도구입니다. 제네릭을 사용하면 함수, 클래스, 인터페이스 등을 정의할 때 데이터 타입을 명시하지 않고 추상적으로 유지할 수 있습니다. 이렇게 하면, 여러 종류의 유형을 다루는 함수 or 클래스를 만들 수 있습니다. 2. 사용방법 사용방법에 대해 알아봅시다. 다음 코드를 확인해 봅시다. → getSize라는 함수를 arr1은 사용할 수 있지만, arr2는 string타입이라 사용할 수 없습니다. function getSize(arr: number[]): number { return arr.length; } const arr1 = [1,..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 2. 20.
• textsms

클래스(Class)

클래스(Class) 1. 클래스(Class) 이번엔 클래스(Class)에 대해 배워보겠습니다. 클래스란? 데이터와 해당 데이터를 처리하는 메서드(함수)의 모음입니다. TypeScript는 클래스를 선언할 때, 다음 예제와 같이 선언합니다. class Car { color: string; constructor(color: string) { this.color = color; } start() { console.log("start"); } } const bmw = new Car("red"); 2. 접근 제한자(Access Modifier) TypeScript에서는 접근 제한자를 지정해 줄 수 있습니다. 이를 통해 정보 은닉 및 캡슐화를 지원할 수 있습니다. TypeScript에서는 세 가지 주요 접근 제한자..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 2. 19.
• textsms

함수 (function)

함수 (function) 1. 함수 (function) 이번엔 함수에 대해 알아보겠습니다. 함수는 JavaScript와 유사하지만 몇가지 차이가 있습니다. 2. 함수 선언과 정의 1) 선언 및 정의 방법 TypeScript는 다음과 같이 정의할 수 있습니다. // 함수 선언 function add(num1: number, num2: number): number { return num1 + num2; } // 함수 호출 let result = add(10, 20); console.log(result); // 30 2) 선택적 매개변수 TypeScript에서는 함수의 매개변수를 선택적으로 만들 수 있습니다. 매개변수의 이름 뒤에 물음표(?)를 붙여서 정의합니다. // 함수 선언 function hello(n..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 1. 31.
• textsms

this와 bind

this와 bind 1. this this는 실행 컨텍스트에 따라 동적으로 바뀌며, 함수가 어떻게 호출되는 지에 따라 값이 달라집니다. 주로 메서드 or 콜백 함수 등에서 사용되며, 함수가 어떻게 호출되느냐에 따라 this가 가리키는 대상이 달라집니다. 다음 코드를 보면 user.info( )를 호출할 때, this는 user를 가리킵니다. const user = { name: "Kim", info: function () { console.log(this.name); } }; user.info(); // Kim 2. bind bind 메서드는 함수의 this 값을 설정하여, 새로운 함수를 생성합니다. const user = {name: "Kim"}; function info() { console.log(..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 1. 31.
• textsms