Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Multi Step Form, Decentralized Autonomous Organ...
Search
pumpkiinbell
February 06, 2025
Programming
1
1.1k
Multi Step Form, Decentralized Autonomous Organization
Bottom-Up Approach for Multi-Step Form Implementation by using Jotai
pumpkiinbell
February 06, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
mazrean
0
100
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
340
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
920
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
220
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
430
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
200
Le côté obscur des IA génératives
pascallemerrer
0
150
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Docker and Python
trallard
46
3.6k
Making Projects Easy
brettharned
120
6.4k
Writing Fast Ruby
sferik
629
62k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Designing Experiences People Love
moore
142
24k
Being A Developer After 40
akosma
91
590k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
BBQ
matthewcrist
89
9.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
Multi Step Form, 중앙 집권에서 자율 조직으로 Multi Step Form
구현을 위한 Bottom-Up Approach 토스코어 Product Platform Team / 박종호 6th Frontend Diving Club (2025.02.07)
Metaphor is a programmer’s weapon
조직 구조 이야기
조직 구조 이야기
조직 구조 이야기
조직 구조 이야기
• 왜 혼자서 모든걸 다 하려고 그래 • 팀의 성과가
조직의 성과고 • 팀의 성공이 조직의 성공이잖아 • 팀이 필요한 예산과 목표만 관리해 조직 구조 이야기
조직 구조 이야기
조직 구조 이야기 😄
Multi-Step Form?
Multi Step Form Step (단계) 이전 버튼 (유효성 검사 안함)
다음 버튼 (현재 단계의 유효성 검사) 제출 버튼 (모든 단계의 유효성 검사)
Multi Step Form payload 선언
Multi Step Form payload 선언 Step 컴포넌트가 변경하는 값을 payload
에 업데이트
Multi Step Form payload 선언 Step 컴포넌트가 변경하는 값을 payload
에 업데이트 버튼 관련 유효성 로직 추가
문제점 Payload 와 Step 의 인터페이스가 다른 경우, 이를 변환하는
로직을 Form 컴포넌트에서 작성해줘야 함
문제점 버튼 유효성 로직을 Form 컴포넌트에서 작성해줘야 함 Payload 와
Step 의 인터페이스가 다른 경우, 이를 변환하는 로직을 Form 컴포넌트에서 작성해줘야 함
Field, Step 이 더 많아진다면 ? Form 이 더 복잡해진다면
?
Field, Step 이 더 많아진다면 ? Form 이 더 복잡해진다면
?
• 모든 Step Payload 를 조합한 값 = 폼 Payload
• 모든 Step 이 유효하다 = 폼이 유효하다 Bottom Up Approach
• StepValue ◦ Step 이 가져야 할 값 • serialize
◦ Step 의 값이 Payload 에 어떻게 담겨야 하는가? • validate ◦ Step 의 값이 유효한가? Bottom Up Approach - Step
Bottom Up Approach - Step
• valueAtom ◦ step payload 가 담긴 atom • serializeAtom
◦ valueAtom 에 기반해 payload 에 담길 형태로 변환한 Atom • validateAtom ◦ valueAtom 에 기반해 해당 값이 유효한지 판별하는 Atom Bottom Up Approach - Step
valueAtoms • 모든 step 의 valueAtom, serializeAtom, validateAtom 을 정의
Bottom Up Approach - Form
payloadAtom • valueAtoms 의 값 중 serializeAtom 만 모아서 payload
를 정의 Bottom Up Approach - Form
validateAtom • valueAtoms 의 값 중 validateAtom 만 모아서 폼
유효성을 정의 Bottom Up Approach - Form
Bottom Up Approach - Form Step 은 자신의 값(valueAtom)만 변경
Payload 는 업데이트 하지 않음 폼의 유효성= 이전에 만든 validateAtom 으로 판단 스텝의 유효성= 각 스텝의 validateAtom 으로 판단
마무리
마무리 • 코드 ◦ https://codesandbox.io/p/sandbox/dazzling-leftpad-4wzs3y ◦ https://codesandbox.io/p/devbox/bottom-up-approach-multi-step-for m-xf7kz2 ▪ (codesandbox
계정이 있다면) • 장표 ◦ https://speakerdeck.com/pumpkiinbell/multi-step-form-decentralized -autonomous-organization