김민석의 블로그

MySQL: caching_sha2_password 삽질기

2021-03-26T14:00:00+00:00

python3.7, sqlalchemy, mysqlclient 환경. 로컬 및 원격 서버에선 문제 없이 돌아가던 서비스가 도커 가상 환경에서 문제 발생.

ERROR 2059 (HY000): Authentication plugin 'caching_sha2_password' cannot be loaded:
/usr/lib64/mysql/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory

caching_sha2_password 플러그인의 부재. caching_sha2_password: DB 사용자 비밀번호 해싱 플러그인. MySQL 8.0부터 기본으로 추가됨. 기존 mysql_native_password보다 보안이 강화된 버전.

시도 1. 패키지 업데이트

해당 플러그인이 넓게 사용된지 얼마 되지 않았기 때문에, stable linux distribution의 클라이언트에선 지원하지 않을 수 있음. 해당 프로젝트에선 mysqlclient를 사용. mysqlclient는 libmysqlclient-dev패키지를 사용함. (debian / ubuntu)

공식 파이썬 도커 이미지에선 stable debian distribution인 buster, stretch를 사용함. 그러나 해당 배포판의 libmysqlclient-dev 패키지는 caching_sha2_password 플러그인을 지원하지 않기때문에 오류 발생. 정확히는 libmysqlclient-dev 패키지가 의존하고있는 패키지가 지원하지 않음 (mariadb-10.5). 2020년 9월이 되서야 플러그인 지원 업데이트가 되었고 bullseye 배포판에서부터 해당 버전이 포함됨.

 -- Otto Kekäläinen <otto@debian.org>  Tue, 06 Oct 2020 14:44:39 +0300

mariadb-10.5 (1:10.5.5-1) unstable; urgency=medium

  * New upstream version 10.5.5 (Closes: #968895)
    - Include caching_sha2_password.so plugin for libmariadb3 (Closes: #962597)

하지만 bullseye 배포판은 아직 unstable이라 공식 파이썬 도커 이미지에선 사용할 수 없음. (공식 파이썬 도커 이미지는 debian 배포판별로 태그를 제공함, 3.9-buster, 3.7.10-stretch 등)

apt 커맨드 수도 없이 때려보며 디버깅하다 포기

시도 2. 클라이언트를 바꿔보자

클라이언트를 바꿔보자. 해당 플러그인을 지원하는 PyMySQL을 사용하기로 함. 클라이언트를 바꿔보니 거짓말처럼 너무 잘 됨. 그냥 사용하려고 했으나 퍼포먼스 관련 문제로 사용하지 못함. PyMySQL은 순수 파이썬으로 구현됐기 때문에 부분적으로 C로 작성된 mysqlclient보다 훨씬 느림. 벤치마크에 의하면 최대 10배 느림. 포기

시도 3. 다른 리눅스 배포판을 써보자

또 다른 방법, 다른 리눅스 배포판을 써보자. 파이썬 공식 도커 이미지에서 제공하는 alpine linux based image 사용. 그러나 C 컴파일링 관련 이슈덕분에 파이썬 패키지 설치 시간이 곱절로 뛰는 문제가 있음. 포기.. link

시도 4. 포기하자

이틀에 걸쳐 몇 시간동안 삽질하니까 도커 쓰기 싫어짐. 포기하고 mysql_native_password로 바꾸자고 생각했으나.. 기적같이 해결

해결

몇 시간 끙끙 앓다가 배포판 이미지에 최신 버전 패키지를 강제로 설치해서 해결함. debian bullseye 는 unstable distribution이긴 하지만 전체 이미지를 쓰는게 아니니 괜찮을거라 생각

FROM python:3.7-buster

RUN echo 'deb http://deb.debian.org/debian bullseye main' > /etc/apt/sources.list.d/bullseye.list \
    && apt-get update -y \
    && apt-get purge default-libmysqlclient-dev -y \
    && apt autoremove -y \
    && apt-get install default-libmysqlclient-dev/bullseye -y

노션에서 구글 애널리틱스 사용하기

2019-04-23T10:30:00+00:00

TL;DR

노션 페이지에서 구글 애널리틱스를 사용할 수 있도록 도와주는 프록시 서버를 만들었습니다.
페이지 조회 이벤트를 추적할 수 있습니다.

노션에는 문서들을 웹 사이트나 블로그처럼 사용할 수 있는 ‘Public Access’ 옵션이 있습니다. ‘Public Access’ 옵션을 활성화하면 사용자를 따로 워크 스페이스나 개별 문서에 초대하지 않아도 모든 사용자가 자유롭게 문서를 열람할 수 있습니다.

‘Public Access’ 옵션을 활용하면 노션의 강력한 기능들을 블로깅에 활용할 수 있기 때문에 많은 사용자, 기업들이 노션을 블로그로 사용하고 있습니다. 하지만 이런 블로그들은 노션이라는 한정된 플랫폼에 기반하기 때문에, 몇가지 문제가 발생할 수 있습니다.

그중 가장 큰 문제는 바로 사용자 추적이 불가능하다는 점입니다. 네이버 블로그나 브런치같은 블로그 서비스들은 자체적인 사용자 추적 서비스를 제공합니다. 기본적인 페이지 조회수, 방문자의 인구 통계등 자세한 통계를 제공합니다. 하지만 노션에는 이런 기능들이 없습니다. 적어도 지금까지는요. 추가좀 해주세요 😁

네이버 블로그의 사용자 추적 서비스

서비스에서 사용자 추적 기능을 제공하지 않거나, 직접 블로그 시스템을 개발하고 있다면 다른 방법을 사용할 수도 있습니다. 구글이나 페이스북에서 제공하는 분석 도구를 적용하면 됩니다. 하지만 노션에서는 이런 분석 도구도 적용할 수 없습니다. 구글 애널리틱스나 페이스북 픽셀같은 대표적인 분석 도구들은 자바 스크립트라는 언어를 기반으로 작동하는데, 노션에서는 사용자가 자바 스크립트를 실행할 방법이 없기 때문입니다.

이것도 안되고 저것도 안되면 정녕 노션에서는 사용자를 추적할 수 있는 방법이 없는걸까요? 정말요?

다행히 노션에서도 여러가지 방법으로 사용자를 추적할 수 있습니다. 리다이렉션을 통한 추적과 이미지를 통한 추적 방법이 있는데요. 지금부터 천천히 소개 드리겠습니다.

1. 리다이렉션

첫 번째 방법은 URL 리다이렉션 서비스의 일종인 bit.ly를 활용한 방법입니다. 노션 페이지의 URL을 bit.ly/OOOO 으로 연결시킨 후에, 사용자를 연결된 URL로 접근하도록 유도하는 방식입니다. 자세히 정리해보면 다음과 같이 진행됩니다.

노션 페이지의 URL을 bit.ly에 연결시킨다. (notion.so/OOOO → bit.ly/OOOO)
연결된 URL(bit.ly/OOOO)를 사용자들에게 공유한다.
사용자가 bit.ly/OOOO으로 접근하면, bit.ly 서버는 URL을 notion.so/OOOO 으로 변경 후 이동시킨다.
bit.ly 서버는 URL을 이동시키는 과정에서 사용자 추적 데이터를 남기고, 통계를 제공한다.

bit.ly의 사용자 추적 서비스

이 방법은 사용자 추적을 간단히 구현할 수 있다는 장점이 있지만, 사용자가 bit.ly URL 외의 다른 URL으로 페이지에 접근하는 경우는 추적하지 못한다는 큰 문제가 있습니다.

2. 구글 애널리틱스 - Measurement Protocol

구글 애널리틱스 못 쓴다면서요!

죄송합니다. 사실 사용할 수 있습니다. Measurement Protocol을 이용한다면요.

구글 애널리틱스에 이벤트를 보내는 방법은 두 가지가 있습니다. 첫 번째는 모두가 익히 알고 있는 자바 스크립트를 이용한 방법입니다. 하지만 노션에서는 자바 스크립트를 사용할 수 없기 때문에 사용할 수 없습니다. 아쉽지만 두 번째 방법으로 넘어가도록 하죠.

두 번째 방법은 구글 애널리틱스의 Measurement Protocol을 이용한 방법입니다. Measurement Protocol은 자바 스크립트를 통하지 않고도 구글 애널리틱스에 이벤트를 보낼 수 있도록 만든 일종의 통신 규약입니다. 주로 자바 스크립트를 사용할 수 없는 환경에서 사용합니다. 노션에서 사용하기에 적절한 방법이죠.

방법은 간단합니다. Measurement Protocol가 정의한 규약에 따라서 HTTP 요청을 구글 애널리틱스 서버로 보내기만 하면 됩니다. 그걸 노션에서 어떻게 하냐구요? 노션 페이지에 Embed 이미지만 넣으면 됩니다. 그 외에도 할게 많긴 한데, 제가 미리 만들어 놓았으니 걱정하지 않아도 됩니다.

URL에 트래킹 ID, 도메인, 페이지 경로를 추가하여 URL을 생성합니다.
- https://notion-ga.ohwhos.now.sh/collect?tid={트래킹 ID}&host={도메인}&page={경로}
- (예) https://notion-ga.ohwhos.now.sh/collect?tid=UA-00000000-1&host=mskim.me&page=/careers/data-engineer
- 트래킹 ID를 모르겠다면 이 문서를 참고하세요.
- 더 자세한 내용은 이 문서를 참고하세요.
생성한 URL을 Embed 이미지에 입력하고, 추적이 필요한 노션 페이지에 삽입합니다.

끝입니다. 거창한 기반 지식을 알아야 할 필요도 없고, bit.ly 같은 외부 서비스를 활용할 필요도 없습니다. 그저 URL을 Embed 이미지로 삽입하면 됩니다.

어떻게 이런 방법이 가능할까요? 이미지 하나만 추가했을 뿐 인데 어떻게 구글 애널리틱스에 데이터가 전송될까요? 그건 notion-ga라는 프록시 서버가 이미지 조회 요청을 구글 애널리틱스에 전달하고 있기 때문입니다.

notion-ga

https://github.com/mskims/notion-ga

notion-ga는 제가 작성한 간단한 프록시 서버입니다. 사용자의 이미지 조회 요청을 Measurement Protocol에 부합하도록 변환하고, 변환된 요청을 구글 애널리틱스에 전달하는 역할을 합니다. 구현이 어떻게 되었는지 궁금하신 분들은 위의 저장소를 확인하시면 됩니다. 구경 하시고 스타도 찍어 주시고.. MIT 라이센스니 이것 저것 다 해보셔도 됩니다.

마치며

이렇게 노션 페이지에서 구글 애널리틱스를 사용하여 사용자를 추적하는 방법을 정리해 봤습니다. 노션을 애용하는 한 개발자로서, 제가 공유한 지식이 많은 분들께 도움이 되었으면 좋겠습니다. 읽어주셔서 감사합니다.

피드백은 이메일(its@mskim.me)로 부탁드립니다.

유의미한 학습

2019-01-24T10:30:00+00:00

개발자는 끊임없이 학습해야 한다. 비단 개발자뿐만 아니라, 모든 인간은 학습해야 한다. 효율적이고 유의미한 학습을 하기 위해서는 어떤 자세와 마음가짐으로 임해야 할까? 현재 자신의 수준과 학습의 난이도를 예를 들며 알아보자.

현재 자신의 수준이 i라고 할 때, 한 단계 높은 i+1 난이도의 자극이 주어질 때만 유의미한 학습이 가능하다고 한다. 예를 들면, 컴퓨터 비전공자가 프로그래밍을 처음 배울 때, Hello World를 출력하는 간단한 파이썬 스크립트를 작성하는 것 대신에, C언어의 포인터 구조를 학습하거나, Java의 복잡한 개발 환경을 구축해야 한다면? 큰 어려움을 겪게 될 것이고, 흥미를 잃어 학습이 비효율적으로 진행될 수 있다는 것이다.

그렇다면, 업무에서 끊임없는 학습 태도를 유지하려면 어떻게 해야 할까? 업무의 난이도와 자신의 실력이 일치하는지 확인을 자주 하면 된다.

업무가 너무 쉽다면? 업무에 비해 자신의 실력이 높다는 뜻이다. 이럴 땐, 업무를 어렵게 만드는 것이 방안이 될 수 있다.

새로운 환경
- 도구의 사용을 줄인다
- 새로운 언어, 프레임워크를 사용한다
새로운 목표
- throughput을 높인다
- 단, 오버 엔지니어링이 되지 않도록 조심한다

반대로, 업무가 너무 어려워서 진행하기 힘들다면? 너무 진부한 소리 같지만, 자신의 실력을 키워야 한다. 하지만 실력을 키우는 것이 하루아침에 되는 것은 아니다. 오랜 노력과 인고를 거쳐야 비로소 실력이 자란다. 그럼 당장 닥친 업무는 어떻게 처리하란 말일까? 실력이 자랄 때까지 기다릴 수는 없는 노릇이다.

이럴 땐 업무를 쉬운 단계부터 차근차근 시작해보자. 단위 테스트를 짜는 것처럼 기능을 잘게 쪼개어서, 최소 단위의 함수부터 시작하면 어렵지 않게 업무를 마무리할 수 있을 것이다.

정리

업무가 너무 쉽다면?
- 업무를 어렵게 만든다
  - 새로운 환경
  - 도구의 사용을 줄인다
  - 새로운 언어, 프레임워크를 사용한다
- 새로운 목표
  - throughput을 높인다
  - 단, 오버 엔지니어링이 되지 않도록 조심한다
업무가 너무 어렵다면?
- 실력을 높인다
  - 장기적인 학습 (스터디, 서적, 개인 프로젝트 등)
  - 단기적인 해결 (Pair 프로그래밍, 튜토리얼 문서 등)
- 업무를 쉬운 단계부터 차근차근 한다

참고 자료

http://egloos.zum.com/agile/v/5749946

[번역] redux-saga 튜토리얼

2017-04-27T03:00:00+00:00

이 글은 공식문서 의 Beginner tutorial 을 한국어로 번역한 글입니다.

전체 문서는 한국어 번역 문서 를 참조해주세요.

튜토리얼

목적

이 튜토리얼은 redux-saga 를 가능한 쉬운 방법으로 소개할 것 입니다.

튜토리얼을 위해서, 우리는 Redux 저장소에 있는 간단한 카운터 예시를 사용할겁니다. 이 카운터 애플리케이션은 아주 간단하면서, 과도하게 빠지지 않고 redux-sage 의 기본 컨셉들을 설명 하기에 딱입니다.

초기 설정

시작하기 전에, 튜토리얼 저장소 를 클론 하세요.

이 튜토리얼의 코드들은 sagas 브랜치에 있습니다.

커맨드 라인에서 다음 명령어를 실행하세요:

$ cd redux-saga-beginner-tutorial
$ npm install

애플리케이션을 시작하기 위해서는 다음 명령어를 실행하시면 됩니다:

$ npm start

증가 와 감소 버튼이 있는 카운터로 아주 간단하게 시작하고, 그후 비동기 호출에 대해서 설명하겠습니다

이상이 없다면, 당신은 증가 와 감소 버튼과 Counter: 0 이라는 메세지를 볼 수 있을것 입니다.

만약 이 단계에서 어려움을 겪고계시다면, 고민하지 마시고 튜토리얼 저장소 에 에슈를 만들어주세요.

Hello Sagas!

첫번째 Saga 를 만들어봅시다! 전통을 따라, Saga 버전 ‘Hello, world’ 를 작성해 봅시다.

sagas.js 파일을 만드신 후 다음 내용을 적으세요.

export function* helloSaga() {
  console.log('Hello Sagas!')
}

무서운것이 없습니다, 이건 그냥 평범한 함수일 뿐이에요. (*를 제외하면요). 이것이 하는일은 콘솔에 환영 메세지를 적는것밖에 없습니다.

우리의 Saga 를 실행하기 위해서, 몇가지 할 일이 있습니다.

Sagas 리스트와 함께 Saga 미들웨어를 만드세요. (지금까진 helloSaga 오직 하나입니다)
Saga 미들웨어를 Redux 스토어에 연결하세요.

이제 main.js 를 작성해봅시다:

// ...
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

// ...
import { helloSaga } from './sagas'

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(helloSaga)

const action = type => store.dispatch({type})

// rest unchanged

처음에, ./sagas 모듈에서 가져온 우리의 Saga 를 임포트 합니다. 그리고 나서 redux-saga 라이브러리에서 가져온 createSagaMiddleware 팩토리 함수를 사용해서 미들웨어를 만들었죠.

helloSaga 를 실행하기 전에, 반드시 applyMiddleware 를 사용해서 미들웨어를 연결해야 sagaMiddleware.run(helloSaga) 를 통해 Saga 를 시작할 수 있습니다..

지금까지 우리의 Saga 는 특별하지 않습니다. 이건 단지 로그 메세지만을 남기고 종료될 뿐입니다.

비동기 호출

이제, 오리지널 카운터 데모 가까이 무언가를 추가해봅시다. 비동기 호출을 설명하기 위해 클릭 1초 후 증가되는 또다른 버튼을 추가할겁니다.

먼저, UI 컴포넌트에 onIncrementAsync 라는 콜백을 넣을겁니다.

const Counter = ({ value, onIncrement, onDecrement, onIncrementAsync }) =>
  <div>
    {' '}
    <button onClick={onIncrementAsync}>
      Increment after 1 second
    </button>
    <hr />
    <div>
      Clicked: {value} times
    </div>
  </div>

다음으로, onIncrementAsync 를 스토어 액션에 연결해야 합니다.

main.js 모듈을 다음과 같이 수정하겠습니다.

function render() {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() => action('INCREMENT')}
      onDecrement={() => action('DECREMENT')}
      onIncrementAsync={() => action('INCREMENT_ASYNC')} />,
    document.getElementById('root')
  )
}

명심하세요, redux-thunk 와는 달리 우리의 컴포넌트는 순수 액션 오브젝트만 dispatch 할겁니다.

이제 비동기 호출을 구현하기 위해 또다른 Saga 를 소개해볼까 합니다.

각각의 INCREMENT_ASYNC 액션에서, 우리는 다음과 같은 작업을 수행할 태스크를 시작하고자 합니다.

1 초를 기다린 후 카운터 증가

다음 코드를 sagas.js 모듈에 추가하세요.

import { delay } from 'redux-saga'
import { put, takeEvery } from 'redux-saga/effects'

// worker Saga: 비동기 증가 태스크를 수행할겁니다.
export function* incrementAsync() {
  yield delay(1000)
  yield put({ type: 'INCREMENT' })
}

// watcher Saga: 각각의 INCREMENT_ASYNC 에 incrementAsync 태스크를 생성할겁니다.
export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

설명할 때가 왔군요.

delay 라는 유틸리티 함수를 임포트 했는데요, 이 함수는 설정된 시간 이후에 resolve 를 하는 Promise 객체를 리턴합니다. 우리는 이 함수를 제너레이터를 정지 하는데 사용할겁니다.

Sagas 는 오브젝트들을 redux-saga 미들웨어에 yield 하는 제너레이터 함수 로 구현되었습니다. yield된 오브젝트들은 미들웨어에 의해 해석되는 명령의 한 종류입니다. Promise 가 미들웨어에 yield 될 때, 미들웨어는 Promise 가 끝날때 까지 Saga 를 일시정지 시킬것 입니다. 위의 예시에서, incrementAsync Saga 는 1초 후에 일어날 delay의 resolve 에 의해 Promise 가 리턴될때 까지 정지되어있을겁니다.

Promise 가 한번 resolve 되고 나면, 미들웨어는 Saga 를 다시 작동시키면서, 다음 yield 까지 코드를 실행합니다. 이 예제에서 다음 상태는 미들웨어에게 INCREMENT 액션을 dispach 하게 알려주는 put({type: 'INCREMENT'}) 의 결과 객체가 됩니다.

put 은 우리가 이펙트 라고 부르는 예중 하나입니다. 이펙트는 미들웨어에 의해 수행되는 명령을 담고있는 간단한 자바스크립트 객체입니다. 미들웨어가 Saga 에 의해 yield 된 이펙트를 받을때, Saga 는 이펙트가 수행될때까지 정지되어 있을겁니다.

정리하자면, incrementAsync Saga 는 delay(1000) 호출에 의해 1초동안 자고있다가, INCREMENT 액션을 dispatch 하게 되는것이죠.

다음으로, 우리는 watchIncrementAsync 라는 또다른 Saga를 만들었습니다. dispatch된 INCREMENT_ASYNC 액션을 바라보고, 매번 incrementAsync 를 실행하기 위해 redux-saga 패키지가 제공하는 takeEvery 헬퍼 함수를 사용했습니다.

이제 두개의 Saga가 있네요, 이제 두 Saga 모두 한번에 실행해야할 필요가 생겼습니다, 이 작업을 하려면, 다른 Saga들을 시작해야할 책임이 있는 rootSaga 를 추가해봅시다.

자 이제 여기 코드들을 sagas.js 에 추가해보세요.

// 모든 Saga들을 한번에 시작하기 위한 하나의 지점입니다.
export default function* rootSaga() {
  yield [
    incrementAsync(),
    watchIncrementAsync()
  ]
}

이 Saga는 helloSaga Saga 와 watchIncrementAsync Saga 가 호출된 결과의 배열을 yield 합니다. 이것은 생선된 두 제너레이터가 병렬로 시작된다는것을 의미하죠. 이제 sagaMiddleware.run 를 main.js 의 root Saga에 주입할 일만 남았습니다.

// ...
import rootSaga from './sagas'

const sagaMiddleware = createSagaMiddleware()
const store = ...
sagaMiddleware.run(rootSaga)

// ...

테스트

이제 우리의 incrementAsync Saga 가 바람직한 태스크를 수행하는지 확실하게 해야겠죠? 테스트를 만들어 봅시다.

sagas.spec.js 파일을 만듭시다.

import test from 'tape';

import { incrementAsync } from './sagas'

test('incrementAsync Saga test', (assert) => {
  const gen = incrementAsync()

  // now what ?
});

incrementAsync 는 제너레이터 함수입니다. 이것을 실행하면, 이터레이터 오브젝트를 반환하고, 이터레이터의 next 메소드는 다음과 같은 모양을 가진 객체를 돌려줍니다.

gen.next() // => { done: boolean, value: any }

value 필드는 yield 된 표현식을 포함합니다. yield 다음 표현식의 결과 같은 것 말이죠. done 필드는 아직 yield 표현이 남아있는지, 아니면 제너레이터가 종료되었는지 가리킵니다.

incrementAsync 로 예를 들자면, 제너레이터는 두개의 값을 연속으로 yield 합니다.

yield delay(1000)
yield put({type: 'INCREMENT'})

그래서 우리가 제너레이터의 next 메소드를 세번 연속하여 부른다면, 다음과 같은 결과값을 얻게 됩니다.

gen.next() // => { done: false, value: <result of calling delay(1000)> }
gen.next() // => { done: false, value: <result of calling put({type: 'INCREMENT'})> }
gen.next() // => { done: true, value: undefined }

처음 두개 호출은 yield 표현의 결과를 돌려줍니다. 3번째 호출은 더이상 yield 가 없기 때문에 done 필드는 true 로 설정되고, incrementAsync 제너레이터가 아무것도 리턴하지 않기 때문에 value 필드는 undefined 로 설정됩니다.

자 이제, incrementAsync 안에서 로직을 테스트하기 위해, 돌려받은 제너레이터를 반복하고, 제너레이터에 의해 yield 된 값들을 간단히 체크할겁니다.

import test from 'tape';

import { incrementAsync } from './sagas'

test('incrementAsync Saga test', (assert) => {
  const gen = incrementAsync()

  assert.deepEqual(
    gen.next(),
    { done: false, value: ??? },
    'incrementAsync should return a Promise that will resolve after 1 second'
  )
});

하지만 Promise 에선 비교연산을 할 수 없는데 어떻게 delay 의 리턴값을 테스트 하죠? 만약 delay 가 평범한 값을 돌려준다면 테스트하기 쉬울텐데요..

redux-saga 는 위의 고민을 해결할 방법을 제시하고 있습니다. incrementAsync 에서 delay(1000) 을 직접적으로 호출하는것 대신, 우린 간접적으로 호출할겁니다.

// ...
import { delay } from 'redux-saga'
import { put, call, takeEvery } from 'redux-saga/effects'

export function* incrementAsync() {
  // use the call Effect
  yield call(delay, 1000)
  yield put({ type: 'INCREMENT' })
}

yield delay(1000) 대신 yield call(delay, 1000) 를 하고있습니다, 무엇이 달라졌는지 보이시나요?

첫번째 경우에서, delay(1000) yield 구문은 next 의 호출자로 넘겨지기 전에 실행되고, (여기서 호출자는 미들웨어가 되거나, 제너레이터 함수를 실행하고 리턴된 제너레이터를 넘어 반복하는 테스트코드가 되어야 합니다.) 호출자가 얻게 되는것은 Promise 입니다. 아래 코드를 참고하세요.

두번째 경우에선, call(delay, 1000) yield 구문은 next 의 호출자에게 넘겨지게 됩니다. put 과 유사한 call 은 미들웨어에게 주어진 함수와 인자들을 실행하라는 명령을 하는 이펙트를 리턴합니다. 사실, put 과 call 은 스스로 어떤 dispatch 나 비동기적인 호출을 하지 않습니다. 그들은 단지 순수한 자바스크립트 객체를 돌려줄 뿐입니다.

put({type: 'INCREMENT'}) // => { PUT: {type: 'INCREMENT'} }
call(delay, 1000)        // => { CALL: {fn: delay, args: [1000]}}

무슨일이 일어날까요? 미들웨어는 각각의 yield 된 이펙트들을 검사한뒤, 어떻게 이펙트를 수행할지 결정합니다. 만약 이펙트의 타입이 PUT 이라면, 미들웨어는 스토어에 액션을 dispatch 할것입니다. CALL 인 경우엔 주어진 함수를 실행하게 되는것 이고요.

이 이펙트생성과 이펙트 실행의 분리는 제너레이터를 놀랍게도 쉽게 테스트가 가능하도록 만듭니다.

import test from 'tape';

import { put, call } from 'redux-saga/effects'
import { delay } from 'redux-saga'
import { incrementAsync } from './sagas'

test('incrementAsync Saga test', (assert) => {
  const gen = incrementAsync()

  assert.deepEqual(
    gen.next().value,
    call(delay, 1000),
    'incrementAsync Saga must call delay(1000)'
  )

  assert.deepEqual(
    gen.next().value,
    put({type: 'INCREMENT'}),
    'incrementAsync Saga must dispatch an INCREMENT action'
  )

  assert.deepEqual(
    gen.next(),
    { done: true, value: undefined },
    'incrementAsync Saga must be done'
  )

  assert.end()
});

put 과 call 이 순수 객체를 반환하기 때문에, 테스트 코드에서 같은 함수들을 재사용할수 있게 되었고, incrementAsync 의 로직을 테스트 하기 위해 단순히 제너레이터를 반복하고 값에 대해 deepEqual 테스트를 할수 있게 되었습니다.

위의 테스트를 진행하기 위한 코드입니다:

$ npm test

이 테스트는 콘솔에 결과를 보고해야 합니다.

이 글은 공식문서 의 Beginner tutorial 을 한국어로 번역한 글입니다.

전체 문서는 한국어 번역 문서 를 참조해주세요.