Junnnho

타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다

인터페이스를 아래와 같이 사용했었다

interface Person{
	name: string,
	age: number,
}

위를 타입별칭으로 동일하게 나타내면 다음과 같다

type Person = {
	name:string,
   	age:number,
}

인터페이스와 타입의 첫번째 차이점은 타입 내부 속성을 어떤식으로 확인할 수 있는가 인데,

인터페이스 타입를 코드를 작성해서 프리뷰를 보면 아래처럼 확인된다

타입 별칭 코드를 작성해서 프리뷰를 보면 아래와 같이 확인된다

인터페이스와 타입 별칭의 두번째 차이점은 상속의 가능여부

인터페이스는 중복되는 코드에 대해서 상속을 이용할 수 있지만

타입은 상속, 즉 확장이 불가능하다

확장이 용이한 소프트웨어 작성을 위해 가능한 인터페이스를 사용하자

interface를 활용하여 원하는 타입을 선언하고 이를 활용할 수 있다

변수의 타입을 선언하는 형태

interface User {
	name: string,
    age: number,
    info: object,
    friends: Array<string> 또는 friends: string[]
}

변수타입을 함수에 활용하는 형태

function func(param:User){
	//...
}

param의 타입을 위에서 선언한 User 타입을 지정한다는 의미이다

함수의 반환값 타입

function fun(...): User{
	return resType;
}

이 때 resType 의 타입은 User 타입이 된다

함수 파라미터에 타입이 지정된 경우

함수를 호출할 때는 파라미터 타입을 반드시 갖추어야 한다

인터페이스 확장

중복되는 속성에 대해서 상속이 가능하다

interface Person{
	name: string,
    age: number,
}

interface developer{
	name: string,
    age: number,
    language: string,
}

interface developer extends Person{
	language: string,
}

developer 인터페이스는 Person 인터페이스를 상속받아 사용하는 형태

redux-saga을 사용하기 위해 기본이 되는 제너레이터에 대해서 알아보자

* 기호를 사용해서 제너레이터를 선언할 수 있다.

함수 f1은 제너레이터 함수이다.

제너레이터 함수를 호출하면 제너레이터 객체가 반환된다.

코드에서 보이는 로그는 실행과정을 표현하기 위해 작성한 것이다

제너레이터 객체에는 next()라는 메서드가 있다

위 코드에서 next()를 처음 실행하면, 로그를 출력하고 yield 10이 실행된다

반환 값을 보면 yield 옆의 10이라는 값이 value로 반환되는 것을 볼 수 있다

마지막 next()를 실행하면 return 옆의 finished가 value로 반환되는 것과, done이 true로 반환되는 것을 볼 수 있다

제너레이터를 제대로 이해하려면 iterator와 iterable을 이해해야 한다

iterator - 반복자

반복자 객체인 iterator는 다음과 같은 조건을 만족한다

- next 메서드를 가지고 있다

- next 메서드는 value와 done 속성값을 가진 객체를 반환한다

- done 의 속성값이 true일 때 작업이 끝났음을 의미한다

즉 위에서 본 제너레이터 객체갸 iterator 이다

iterable - 반복 가능 객체 

- Symbol.iterator 속성값으로 함수를 갖고 있다

- 해당 함수를 호출하면, 반복자 객체 iterator를 반환한다

위에서 만든 제너레이터 객체 gen으로 설명하면

console.log(gen[Symbol.iterator]() === gen); // true

제너레이터 객체에는 Symbol.iterator 라는 속성값이 있는데, 이 함수를 실행하면 자기 자신이 나오게 된다

그래서 제너레이터 객체는 iterator 이면서 iterable 이 된다

배열에는 iterator 가 있다는 것을 알고 있을 것이다

마찬가지로 배열처럼 선형 가능한 자료구조에는 iterator가 있다.

이런 자료구조에는 Symbol.iterator 라는 속성값이 있기 때문에 iterator 객체를 얻을 수 있고 next 를 호출할 수 있다

iterable을 만족하면 자바스크립트의 몇가지 기능을 사용할 수 있다

예를 들면 for - of 같은 메서드나, 전개연산자 ...iterator객체 와 같이 사용이 가능하다

제너레이터로 위와 같이 코드를 사용하는 것과

일반적인 코드로 위와 같은 코드를 사용하는 것은 매우 다르다

위를 콘솔로 찍어보면 아래와 같다

일반적인 코드로 위 반복문을 실행했다면 멈출 수 없는 무한루프 코드가 될 것이다

하지만 제너레이터는 위처럼 값을 하나씩 가지고 올 수 있다

이게 가능한 이유는 제너레이터는 '실행'을 멈출 수 있기 때문이다

실행을 멈추고 실행 권한을 외부에 위임한다는 의미이다

그리고 외부에서 어떤 신호가 왔을 때 다시 실행할 수 있다

generator에 대한 설명은 ko.javascript.info/generators

여기에서 정말 자세하게 설명해주고 있기 때문에 한번 읽어보는 것을 추천한다. 아니 권장한다

redux-thunk 

비동기 로직이 간단할 때 사용한다

대체적으로 간단한 편

redux-observable

비동기 코드가 많을 때 사용한다

RxJs 패키지를 기반으로 만들어졌으며, 리액티브 프로그래밍을 공부해야하기 때문에 진입장벽이 높다

redux-saga

비동기 코드가 많을 때 사용한다

제너레이터를 활용한다

테스트 코드 작성이 쉽다

redux-saga

제너레이터에 대한 기본 이해가 필요하다

제너레이터에 대한 설명은 => junho0956.tistory.com/364

redux-saga와 제너레이터를 이용하여 아래와 같은 코드를 작성할 수 있다

function 옆의 *, yield, all, takeLeading 은 generator를 의미하는 기호 및 제공하는 함수이다

all 안에는 여러 개의 배열을 넣을 수 있으며,

takeLeading의 첫번째 매개변수는 redux에서 사용하는 액션이다

takeLeading의 특징은 현재 진행중인 액션이 있을 때, 추가로 요청되는 액션이 있으면 무시하게 된다.

즉 여러가지 요청된 액션 중에서, 우선순위가 첫번째로 들어온 액션이 높다 판단하고 실행되는 것이고,

이와 반대로 takeLatest 는 마지막에 들어온 액션을 가장 높은 우선순위로 처리하게 된다.

첫번째 매개변수인 action이 dispatch되면 두번째 매개변수의 fetchData 라는 함수가 실행되는 형태이다

아래의 fetchData를 확인해보자 

fetchData 함수 역시 제너레이터 타입이고, action 객체를 매개변수로 받는다.

함수 내부에는 put, call 이라는 함수가 있는데, 이 역시 redux-saga에서 제공하는 함수이다.

put 은 redux action을 dispatch하는 함수로, 매개변수로 선언한 액션을 발생시키는 함수이다.

call 역시 매개변수에 있는 함수를 실행하는 함수이다.

put 과 call은 비슷해보이지만,

put은 store에 있는 action을 dispatch하는 것이고, call은 임의의 지정한 사용자 함수를 실행하는 것이다.

이런 함수들은 saga에서 부수효과라고 언급하기 때문에, import 할 때 redux-saga/effects 를 사용한다

redux-saga의 부수효과 함수들은 해야할 일을 설명하는 자바스크립트 객체를 반환한다.

반환된 객체는 yield를 호출했을 때 saga 미들웨어에게 전달이 되는데,

redux의 미들웨어 쪽에서 saga 미들웨어가 실행되고 있는데, 

saga미들웨어가 반환받은 '해야할 일을 설명하는 javascript 객체'를 보고 '해야할 일'을 진행한 후에

그 결과와 실행 흐름을 다시 제너레이터로 넘겨주게 된다.

store 에서 saga를 사용해보자

saga를 사용하기 위해서 redux-saga에서 제공하는 createSagaMiddleware 가 필요하고,

위에서 saga 코드를 작성해둔 export default function* 파일을 가져와서 아래와 같이 작성한다.

createSagaMiddleware 함수로 sagaMiddleware를 생성하고, 

이를 redux store에 Middleware 적용함수인 applyMiddleware로 추가시켜준다.

제너레이터로 선언한 rootSaga 의 timelineSaga는 위에서 언급한 saga 코드를 가져온 것이며,

이를 적용시키기 위해 all 함수 내에 인자로 넣어준다.

saga 코드가 여러개인 경우에도, all 인자로 추가해서 넣어주면 된다.

그 후에, saga middleware의 실행함수인 run에 선언해둔 saga 코드의 모음인 rootSaga를 매개변수로 넣어주면

사가 미들웨어가 실행되어서 사가를 사용할 수 있게 된다.