Skip to content

Latest commit

 

History

History
273 lines (187 loc) · 11 KB

deck.mdx

File metadata and controls

273 lines (187 loc) · 11 KB
Raw

import myTheme from './theme'

export const theme = myTheme

Why Observable?

Observable을 개발에 사용하려는 이유 (+ intro)

@chitacan

시작

websocket API 를 만든 후, 클라이언트가 잘 이해하고 사용할 수 있는지 어떻게 확인할 수 있을까?

  • REST API 라면, paw 또는 postman 과 같은 도구들을 사용해 머릿속에서나마 클라이언트 개발자가 되어볼 수 있음
  • 프론트개발자 시절엔 테스트 UI 가 필요하면 만들어 버렸음
  • 하지만 서버를 개발하다보디 마땅한 UI 가 없는 현실...

없으면 만들어 보자!!

  • 처음엔 간단한 elixir module 만들어 두고, iex 쉘을 통해 함수를 실행하면서 테스트
    • 매번 함수를 직접 타이핑하는게 너무 귀찮...
  • phoenix.js 를 사용할 수 있는 간단한 html 페이지를 만들어서 테스트
    • npm 모듈을 가져다 쓰기 너무 어려움.
    • 클릭 이벤트 하나도 밑바닥부터 만들어야 함
  • react 를 사용할 수 있는 codesandbox 로 테스트
    • 이 간단한 페이지를 위해서 react 컴포넌트를 쓴다고?

Observable 을 사용해보면 어떨까??

생각보다 괜찮은데??

  • 간단한 UI 는 쉽게 만들 수 있음
  • markdown 기반이라 필요한 내용은 코드와 함께 문서화 할 수 있음
  • npm 모듈 (전부는 아니지만) 사용 가능
  • 비동기 처리 방식은 websocket 과도 잘 어울림

왜 이런걸 고민하나??

websocket API 를 만든 후, 클라이언트가 잘 이해하고 사용할 수 있는지 어떻게 확인할 수 있을까?

개발 과정을 생각해 봅시다.

개발 시작 배포 API 개발 UI 개발

개발 과정을 생각해 봅시다.

개발 시작 배포 API 개발 UI 개발 테스트 가능한 시점

남은 기간도 얼마 없는데...

개발 시작 배포 API 개발 UI 개발
  • 이 API 로는 만들 수 없는 UI 에요. API 를 바꿔주세요.
  • API 를 바꾸긴 어려워요. 디자인을 바꿔주세요.

"우리는 배포하기 직전에 우리가 만든 기능에 대해 제일 잘 알게된다."

<small style={{fontStyle: 'italic', fontWeight: 400, fontFamily: 'Noto Serif KR, serif'}}>- ??? -

테스트 가능한 시점을 앞당길 수 있을까?

개발 시작 배포 테스트 가능한 시점

테스트 UI 를 만들자!!

개발 시작 배포 테스트 UI API 개발 UI 개발 테스트 가능한 시점

테스트 UI 의 조건

개발 시작 배포 테스트 UI API 개발 UI 개발
  • API 개발과 같이 진행되어야 함
  • 빠르게 만들고, 언제든지 버릴 수 있어야 함
  • 결과물을 모든 팀원들이 경험할 수 있어야 함

배포하기 직전의 상황을 최대한 많이,
반복적으로 체험해 봐야 합니다.

개발 시작 배포 API 개발 UI 개발
  • 이 API 로는 만들 수 없는 UI 네요. API 를 바꿀께요.
  • UI 흐름이 이상하네요. 디자인을 바꿀께요.
  • 배포 직전에야 하던 논의와 고민들을 할 시간이 많아지면, 결국 우리가 만드는 제품을 더 좋게 만들 수 있지 않을까??

Observable features

테스트 UI 를 만드는데 유용한 기능들

  • reactive cell
    • cell 의 순서를 원하는 대로 배치할 수 있음
    • user input 을 꽤나 손쉽게 처리할 수 있음
    • 응답이 여러번 오는 websocket 과도 잘 어울림
  • native DOM support
  • npm 모듈 사용 가능
  • 간단한 리뷰 기능

Observable 에서 만든 테스트 UI

daybit API

daybit 의 websocket API 를 빠르게 테스트해 볼 수 있는 함수와 UI 를 구현해둔 노트북

import {Api} from '1e97569cd80c58bb'

🤔

테스트 가능한 시점 앞당기기. 정말 의미가 있을까??