4주 프로젝트 DAY 7
- Exploring Async/Await Functions in JavaScript
- generic?
- 추상 클래스와 인터페이스?
- promise.all?
Exploring Async/Await Functions in JavaScript
https://alligator.io/js/async-functions/
내가 이전에 Promise는 뭐다? 라고 정의한적이 있었는지 모르겠다.
위에 참조한 레퍼런스에 나온 말이 나의 생각을 그 표현해준 것 같다.
Promises give us an easier way to deal with asynchrony in our code in a sequential manner.
비동기 함수? 를 동기적으로 처리하기 위한 방법이다. 그것도 쉬운!
그냥 방법일 뿐이다. 그래서 그 Promise의 사용법을 익혀서 비동기 함수를
동기적으로 코드에서 처리할 수 있는 것이다.
generic? c++ java에서 보던 것인데..
무엇이 장점이라 이것을 쓸까요?
포이마웹 레퍼런스에서 보면
https://poiemaweb.com/typescript-generic
포이마웹님이 Queue라는 자료구조를 만들었어요.
여기서 문제가 있어요. 이 문제를 얘기하기 전에 미리 상황을 얘기하자면,
자바스크립트를 처음 접했을때 자바스크립트에선 배열에
타입을 신경안쓰는 부분에 대해서 익숙치 않았는데, 이제는 익숙해졌습니다.
그러나 타입스크립트에서는 다시 또 ㅎㅎ 타입! 타입의 맞는 데이터만 받겠다. 이거죠. 그러면 추상클래스를 만들어서
각 타입에 따라 다 추상클래스를 상속받아서 구현해야하나? 이런 문제가 생기죠.
바로 generic! 쓰라는거죠.
타입을 선언해주고 해당타입만 받겠다. 아닌 타입을 사용하면 에러를 표시해주겠다. 이겁니다.
추상클래스와 인터페이스?
https://mygumi.tistory.com/257 <- 이 레퍼런스에
각각의 특징과 차이점 공통점을 잘 정리해놨음.
생긴것도 다르고 사용하는 방법도 다른데,
뭔가 비스무리하다 이거죠.
현재 사용하는 언어는 typescript이지만 언어를 떠나서 개념은 동일하기 때문에
개념만 정리하자면
인터페이스는 무엇인가?
export default interface IFileManager {
getDownloadUrl(filename: string): Promise<string>;
uploadFile(filename: string, file: Blob): Promise<void>;
getFileMetadataList(): Promise<FileMetadata[]>;
}이런식의 형태(틀) 를 갖는다~ 형태만 봐야한다.
인터페이스는 쉽게 말하면 껍데기라고 말할 수 있고, 설계도 또는 명세라고 생각하면 된다.
모든 메소드가 추상 메소드이고, 일반 변수를 가질 수 없다. (추상 클래스와 비교해보자)
그 의미는 인터페이스를 구현한 클래스는 모든 메소드를 강제적으로 구현해야한다.
선언 시 interface 키워드를 사용한다.
출처: https://mygumi.tistory.com/257 [마이구미의 HelloWorld]
인터페이스를 사용하는 이유는 무엇인가?
interface는 메서드 틀을 강제하기 위함이에요 왜 강제하냐고요?
팀단위로 개발을 하면 프로젝트 매니저가 개발자들한테 프로젝트 설계후에 구현을 맡겨야하잖아요.
설계시 데이터플로우도 고려했을테니, 인풋, 아웃풋, 그리고 그 타입들과 메서드 이름정도는 정해놓는 역할을 하는거라고 생각해요.
추상클래스는 무엇인가?
생긴 모습은 다음과 같아요.
abstract 메서드가 있어야 추상 클래스인데,
그렇다면 abstract 키워드를 추상 클래스에도 넣어줘야해요.
import IFileManager, { FileMetadata } from "src/FileManager/IFileManager";
export default abstract class BaseFileManager implements IFileManager {
public abstract getDownloadUrl(filename: string): Promise<string>;
public abstract uploadFile(filename: string, file: Blob): Promise<void>;
public abstract getFileMetadataList(): Promise<FileMetadata[]>;
protected letBrowserStartDownload(filename: string, url: string): void {
...
}
}import IFileManager, { FileMetadata } from "src/FileManager/iFileManager";
import BaseFileManager from "src/FileManager/BaseFileManager";
export default class MockFileManager extends BaseFileManager {
public async getDownloadUrl(filename: string): Promise<string> {
...
}
public async uploadFile(filename: string, file: Blob): Promise<void> { ...
}
public async getFileMetadataList(): Promise<FileMetadata[]> {
...
}추상 클래스는 0개 이상의 추상 메소드(아직 구현되지 않은 메소드) 를 가지고, 일반 메소드, 일반 변수 또한 가질 수 있다.
그렇기에 인터페이스 역할도 하면서, 구현체도 가지고 있는 돌연변이 같은 클래스이다.
선언 시 키워드는 abstract 키워드를 사용한다.
출처: https://mygumi.tistory.com/257 [마이구미의 HelloWorld]
추상 클래스를 사용하는 이유는 무엇인가?
추상 클래스는 추상 메서드를 상속받아서 기능을 확장하는데에 의미가 있다고 생각해요.
코드 퀄리티도 높아지고!
다형성에 대한 내용은 아직 몸소 깨닫지 못했기 때문에 깨닫을때 정리해야겠다.
예전에 안드로이드 수업들을때인가 Line, Rectangle 이런게 클래스였나..
draw함수가 있었는데 각각이 draw되는 방식이 다르니 각각의 클래스에서 재정의를 해줘서 인터페이스 통일화? 대충 이런 느낌일지는 나중에 다시 정리해봐야겠다.
promise.all?
이거 왜 쓸까요?
for문 돌잖아요.
for문 안에 비동기 코드(함수가) 있는거에요.
그래서 모든 비동기 코드가 수행이 되고 그 결과를 리턴해줬으면 좋겠어요.
그럴때 사용해요.
MDN
promise.all이 어떤 형태인지?
promise.all의 인자는 무슨 타입의 데이터가 들어가는지, 그 결과는 무엇인지?
MDN에 나와있음.
https://alligator.io/js/async-functions/
위 레퍼런스에서 알게된 것
Async functions always return a promise, so the following may not produce the result you’re after:
async function hello() {
return 'Hello Alligator!';
}
const b = hello();
console.log(b); // [object Promise] { ... }