📌 Front End/└ TypeScript16 [TypeScript] 콜백 함수 활용 함수 - forEach(), map(), filter() 콜백 함수자바스크립트는 함수도 하나의 자료형이기 때문에 매개변수로 함수를 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백(callback) 함수라고 말한다.그리고 동시에 제어권도 함께 전달하는 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해서 이 콜백 함수를 적절한 시점에 실행한다.콜백 함수를 활용하는 함수자바스크립트가 기본적으로 제공하는 함수 중에서도 콜백 함수를 활용하는 함수가 많다. 어떠한 형태로 콜백 함수를 활용하는지 알아보자.forEach()map()filter()📌 제어권 - 매개변수위의 메소드들의 공통점은 콜백 함수가 매개변수로 value, index 를 사용한다는 것. 콜백 함수를 위임 받은 각 함수(forEach, map, filter)는 콜백 함수의 매개변수.. 2024. 8. 7. [TypeScript] 비동기 처리 방식 - Callback Function, Promise, Async, Await, Fetch 🏷️ 요약구분동기(Synchronous)비동기(Asynchronous)특징- 한 번에 하나의 작업을 수행- 한 작업이 실행되는 동안 다른 작업은 멈춘 상태로 유지하고, 자신의 차례를 기다림- 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아닌, 응답에 관계없이 바로 다음 동작이 실행- 흐름이 멈추지 않아서 동시에 여러 가지 작업을 처리할 수 있음 기다리는 과정에서 다른 함수도 호출 가능 ⏰ 타이머 API특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수들을 타이머(timer) 함수라고 한다. 이 함수들을 이용해서 시간과 관련된 처리를 할 수 있게 된다.함수 종류특징setInterval(함수, 시간)시간 간격마다 함수 반복 실행setTimeout(함수,.. 2024. 8. 7. [TypeScript] 타입스크립트 고급 타입(Advanced Types) 고급 타입(Advanced Types)타입스크립트의 타입 일관성을 더 효율적으로 지키기 위해서 타입스크립트에서 지원하는 고급 타입을 알아두면 좋습니다. 타입스크립트는 다음과 같은 고급 타입을 가지고 있습니다.고급 타입 종류인터페이스 병합(Declaration Merging)숫자 구분자(Numeric Separators)화살표 함수(Arrow Function)function this (함수에서 this 사용)옵셔널 프로퍼티(Optional Properties)옵셔널 체이닝(Optional Chaining)데이터 타입 확인하기(typeof)인터페이스 병합(Declaration Merging)선언 합침 = 선언 머징 = declaration merging같은 이름으로 여러 인터페이스를 선언할 수 있습니다. .. 2024. 8. 5. [TypeScript] 타입스크립트 유틸리티 타입(Utility Types) 유틸리티 타입(Utility Types)유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다인터페이스, 제네릭 등으로 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있다. 💡 용어 정리T : 타입U : 또 다른 타입K : 속성(key)유틸리티 타입 종류PartialRequiredReadonlyPickOmitReturnTypePartial 프로퍼티를 선택적으로 구성하여 일부만 사용 가능 T 타입의 일부 프로퍼티만 가질 수 있는 타입(subset)을 반환한다.모든 프로퍼티는 optional로 취급되며, 모든 프로퍼티를 갖지 않는 빈 객체{ }도 허용된다.interface Point { x: number; y: number;}let p.. 2024. 8. 4. [TypeScript] 제네릭(Generic) 다형성(Polymorphism)이란?poly는 '많다, 많음' 라는 뜻이고 morp-는 '구조, 형태' 라는 뜻을 가지고 있습니다. 따라서 Polymorphism, 다형성이란 여러가지 다양한 구조, 모양, 형태 라는 뜻을 가지고 있습니다. 타입스크립트에서 이런한 다형성을 가능하게 해주는 것은 바로 제네릭(Generics) 타입입니다.제네릭(Generic)제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미제네릭은 타입을 선언 시점이 아닌 생성 시점에 결정하는 프로그래밍 기법입니다. 제네릭을 선언할 때 관용적으로 사용되는 식별자로 T 또는 V를 많이 사용을 하며, 이는 타입 파라미터(Type parameter)라 합니다.그리고 이것은 반드시 T 또는 V로 적어야 하는거는 아닙니다.이를 통해 함수,.. 2024. 8. 4. [TypeScript] 오버라이딩(Overriding), 오버로딩(Overloading) 🏷️ 요약오버라이딩 : 상속받은 메서드를 재정의 하는 것 오버로딩 : 기존에 없는 새로운 메서드를 추가하는 것구분오버라이딩(Overriding)오버로딩(Overloading)접근 제어자부모 클래스의 메소드의 접근 제어자보다 더 넓은 범위의 접근 제어자를 자식 클래스의 메소드에서 설정할 수 있다.모든 접근 제어자를사용할 수 있다.리턴형동일해야 한다.달라도 된다.메서드명동일해야 한다.동일해야 한다.매개변수 갯수 / 타입동일해야 한다.달라야만 한다.적용 범위상속관계에서 적용된다.같은 클래스 내에서 적용된다.오버라이딩(Overrding)부모 class에 정의된 method를 자식 class에서 재 정의하는 개념입니다.상속받은 부모 method를 무시하고, 새로운 method를 정의하기 위해서 사용합니다. 그리.. 2024. 8. 2. [TypeScript] 상속(Extends), 추상 클래스(Abstract Class), 인터페이스(Interface) 객체지향 프로그래밍(Object Oriented Programming, OOP)객체지향 프로그래밍(Object Oriented Programming, OOP)은 커다란 문제를 클래스 단위로 나누고 클래스 간의 관계를 추가하면서 코드 중복을 최소화 하는 개발방식이다. 클래스 간의 관계를 추가할 때는 상속이나 포함 관계를 고려하여 추가한다. OOP를 통해 어플리케이션을 개발하면 코드 중복을 상당히 줄일 수 있다. 타입스크립트는 자바스크립트(ES6)에 비해서 OOP를 지원하는 부분이 훨씬 더 많다.🏷️ 요약상속(Extends)클래스는 'extends'를 붙여 상속을 주고 받으며 부모-자식관계의 클래스들을 생성할 수 있다.먼저 부모가 될 클래스를 생성한 뒤, 그 뒤 이를 상속받을 자식 클래스는 class 자식.. 2024. 8. 2. [TypeScript] 타입스크립트 클래스 · 객체 지향 문법 총 정리 📝 클래스(Class)멤버 필드의 타입을 정의하고 생성자로 선언한다.class 클래스명 { 멤버필드명: 타입; constructor(매개변수명: 타입) { this.멤버필드명 = 매개변수명; }}new 클래스명(타입에 맞는 값);📝 this클래스 안에서 this를 사용하는 경우, 객체를 호출할 때 this가 가리키는 것이 결정되기 때문에 의도와 다르게 사용될 수 있다. 이를 방지하기 위해 this에도 타입을 명시해 두면 오류를 줄일 수 있다.class 클래스명 { 멤버필드명: 타입; constructor(매개변수명: 타입) { this.멤버필드명 = 매개변수명; } 메소드명(this: 클래스명) { //this 사용 }}new 클래스명(타입에 맞는 값);📝 접근 .. 2024. 7. 31. [TypeScript] 열거형(Enum)타입 열거형(Enum)열거형(enum)타입은 여러개의 값을 나열하는 용도로 사용된다. 값이 모두 숫자인 enum을 숫자형 enum 혹은 숫자 열거형 타입이라고 부르며, 값이 모두 문자열인 enum을 문자형 enum 혹은 문자열 열거형 타입이라고 한다. 그리고 enum은 컴파일 결과 객체가 된다.숫자 열거형(Numeric enums)숫자형 타입에서는 value의 할당을 생략할 수 도 있습니다. 할당을 생략하게 되면 값은 0 부터 차례대로 할당됩니다.enum State { REQUEST, LOADING, DONE, ERROR,}console.log(State.REQUEST); // 0문자열 열거형(String enums)문자형 타입에서는 값의 할당을 해주어야 합니다. 만약에 빼먹으면 숫자형 타입으로 인식이.. 2024. 7. 31. 이전 1 2 다음 728x90 반응형
