Zod × Web Worker を用いた型安全かつUIファーストなIPアドレス一括登録

Transcript

1. Zod × WebWorker を用いた 型安全かつUI ファーストなIP アドレス一括登録 WELCOME かっつー
2. かっつー University of Tokyo M2 Medical-Engineer / ex-Chiba University Physics-Science coffee / tennis / camera Hobby @astrotyotogood X SELF INTRODUCTION NEXT
3. Whitelist IP Address NEXT
4. A list of trusted IP address that a specifically allowed access to a system. Whitelist IP Address NEXT
5. Uniquness is most important NEXT
6. IPv4 : 192.168.1.100 CIDRv4 : 192.168.1.0/24 Uniquness is most important NEXT
7. IPv4 : 192.168.1.100 CIDRv4 : 192.168.1.0/24 Uniquness is most important NEXT ← delete
8. IPv4 : 192.168.1.100 CIDRv4 : 192.168.1.0/24 Uniquness is most important NEXT ← delete ← Can accsess from 192.168.1.100
9. Concept NEXT
10. 1. Strictly Uniqueness check on Frontend Concept NEXT
11. 1. Strictly Uniqueness check on Frontend 2. Format Validation and Categoization by Zod v4 Concept NEXT
12. 1. Strictly Uniqueness check on Frontend 2. Format Validation and Categoization by Zod v4 3. Run Heavy Logic in Background by Web Worker Concept NEXT
13. Zod v3: .string().ip() Zod v4: .ipv4(), .ipv6(), .cidrv4(), .cidrv6() Zod v4 stabled ! NEXT
14. Zod v3: .string().ip() Zod v4: .ipv4(), .ipv6(), .cidrv4(), .cidrv6() Zod v4 stabled ! NEXT → → → → [ ] [ ] [ ] [ ]
15. Web Worker NEXT
16. 1. Processing Background thread Web Worker NEXT
17. 1. Processing Background thread 2. Can process multiple threads in parallel Web Worker NEXT
18. Frontend Validation Flow NEXT
19. CSV Data NEXT Frontend Validation Flow
20. CSV Data NEXT Frontend Validation Flow
21. CSV Data NEXT Zod v4 Frontend Validation Flow
22. CSV Data NEXT Zod v4 Frontend Validation Flow
23. CSV Data NEXT Zod v4 Format Check & Categorized Frontend Validation Flow
24. CSV Data NEXT Zod v4 Format Check & Categorized Frontend Validation Flow
25. CSV Data NEXT IPv4 Data IPv6 Data CIDRv4 Data CIDRv6 Data Zod v4 Format Check & Categorized Frontend Validation Flow
26. CSV Data NEXT IPv4 Data IPv6 Data CIDRv4 Data CIDRv6 Data Zod v4 Format Check & Categorized Frontend Validation Flow
27. CSV Data NEXT IPv4 Data IPv6 Data CIDRv4 Data CIDRv6 Data Zod v4 Format Check & Categorized Uniqueness Check Frontend Validation Flow
28. CSV Data NEXT IPv4 Data IPv6 Data CIDRv4 Data CIDRv6 Data Zod v4 Format Check & Categorized Uniqueness Check Frontend Validation Flow
29. CSV Data NEXT IPv4 Data IPv6 Data CIDRv4 Data CIDRv6 Data Zod v4 Preparation Completed!! Format Check & Categorized Uniqueness Check Frontend Validation Flow
30. CSV Data NEXT IPv4 Data IPv6 Data CIDRv4 Data CIDRv6 Data Zod v4 Preparation Completed!! Format Check & Categorized Uniqueness Check Frontend Validation Flow
31. Uniqueness Check Strategy NEXT
32. 1. Completely duplication Uniqueness Check Strategy NEXT
33. 1. Completely duplication Uniqueness Check Strategy NEXT ① IP === IP 　CIDR === CIDR
34. 1. Completely duplication 2. ip in cidr Uniqueness Check Strategy NEXT ① IP === IP 　CIDR === CIDR
35. 1. Completely duplication 2. ip in cidr Uniqueness Check Strategy NEXT ① IP === IP 　CIDR === CIDR ② IP ∈ CIDR
36. 1. Completely duplication 2. ip in cidr 3. cidr and cidr Uniqueness Check Strategy NEXT ① IP === IP 　CIDR === CIDR ② IP ∈ CIDR
37. 1. Completely duplication 2. ip in cidr 3. cidr and cidr Uniqueness Check Strategy NEXT ① IP === IP 　CIDR === CIDR ② IP ∈ CIDR ③ CIDR ∩ CIDR
38. 1. Completely duplication 2. ip in cidr 3. cidr and cidr Uniqueness Check Strategy NEXT ① IP === IP 　CIDR === CIDR ② IP ∈ CIDR ③ CIDR ∩ CIDR CIDR ⊂ CIDR
39. 1.Completely duplication 2.IP in CIDR 3.CIDR and CIDR IPv4, IPv6, CIDRv4, CIDRv6 Uniqueness Check NEXT Done filtering!
40. 1.Completely duplication 2.IP in CIDR 3.CIDR and CIDR IPv4, IPv6, CIDRv4, CIDRv6 1.Completely duplication 2.IP in CIDR 3.CIDR and CIDR Uniqueness Check NEXT Done filtering!
41. 1.Completely duplication 2.IP in CIDR 3.CIDR and CIDR IPv4, IPv6, CIDRv4, CIDRv6 1.Completely duplication 2.IP in CIDR 3.CIDR and CIDR Uniqueness Check NEXT Done filtering! 10000 IP Samples
42. 1.Completely duplication 2.IP in CIDR 3.CIDR and CIDR IPv4, IPv6, CIDRv4, CIDRv6 1.Completely duplication 2.IP in CIDR 3.CIDR and CIDR Done filtering! Uniqueness Check NEXT 323.4ms
43. 1.Completely duplication 2.IP in CIDR 3.CIDR and CIDR IPv4, IPv6, CIDRv4, CIDRv6 1.Completely duplication 2.IP in CIDR 3.CIDR and CIDR Done filtering! Uniqueness Check NEXT 144.1ms ! 323.4ms
44. 1. Completely duplication 2. ip in cidr 3. cidr and cidr Uniqueness Check Strategy NEXT ① IP === IP 　CIDR === CIDR ② IP ∈ CIDR ③ CIDR ∩ CIDR CIDR ⊂ CIDR ← light
45. 1. Completely duplication 2. ip in cidr 3. cidr and cidr Uniqueness Check Strategy NEXT ① IP === IP 　CIDR === CIDR ② IP ∈ CIDR ③ CIDR ∩ CIDR CIDR ⊂ CIDR ← light ← Heavy
46. 1. Completely duplication 2. ip in cidr 3. cidr and cidr Uniqueness Check Strategy NEXT ① IP === IP 　CIDR === CIDR ② IP ∈ CIDR ③ CIDR ∩ CIDR CIDR ⊂ CIDR ← light ← Heavy ← Heavy
47. Summery NEXT
48. 1. Maintain IPv4, v6, CIDRv4, v6 Easier by Zod v4 Summery NEXT
49. 1. Maintain IPv4, v6, CIDRv4, v6 Easier by Zod v4 2. High Performance by Web Worker Summery NEXT
50. NEXT Thank You !