엣지 컴퓨팅

웹 개발의 미래를 가르키는 새로운 키워드

1

시작하기 전에,
Front-end가 정확히 뭐죠 ?

2

반댓말은? Back-end ?

3

Client & Server ?

4

Client & Server Model Visualized

5

Edge Computing ?

6

⚠ Buzz Word Alert ⚠️

7

🌩️ Edge Computing

from a front-end dev perspective

8

전체 맥락이 궁금하신 분들은…

Stanford Seminar - The Future of Edge Computing from an International Perspective

9

발표자 소개

김혜성 (Hyeseong Kim)

당근마켓 미니앱 팀에서 웹 프론트엔드 개발자로 일하고 있습니다.
클라이언트 개발도 하고요.
미니앱에 필요한 시스템 컴포넌트를 설계합니다.
종종 서버 코드를 짭니다.

10

왜 프론트엔드 개발자가 그런걸 해요?

몰루콘 — (몰?루콘 by 코코넛콘 - edited by remove.bg)

11

당연히 제품을 더 개선하고 더 확장하기 위해서 입니다.

12

느낀점

엣지 컴퓨팅은 프론트엔드 개발자가 가질 수 있는 가장 강력한 무기 중 하나

13

근데 요즘 엣지 컴퓨팅이라는 단어

어디서 많이 들어본 것 같기도 합니다… 🤔

14

Vercel Edge Middleware & Functions

Vercel Edge Middleware Layers — Vercel Edge Middleware: Dynamic at the speed of static

15

Netlify Edge Handlers & Functions

16

그 밖에 다양한 서비스들

17

대체 엣지가 뭐길래…?

18

엣지 컴퓨팅이란

Edge computing is the concept of computing as close to your end user as possible.
엣지 컴퓨팅이란 컴퓨팅 작업을 가능한 엔드유저와 가까운 곳에서 수행하는 것을 말합니다.
— What is edge computing? by Fauna Inc.

19

Client & Server Visualized

20

Client & Server in the Real-world — (출처: freeCodeCamp)

21

Client & Server Re-architecture

22

Before the Edge

23

CGI

24

FTSE

We can solve any problem by introducing an extra level of indirection.
모든 문제는 추가적인 간접(추상)화 도입으로 해결할 수 있습니다.
— Fundamental Theorem of Software Engineering

25

웹은 복잡하지만 자주 변하지 않는다

그럼 계층을 나누면 되겠네!

26

엣지 x / 컴퓨팅 x

준비 됐나요? Scale-up!

27

문제 1. c = c₀

정보 통신의 최종 한계

28

이건 빛 입장도 들어봐야…

Photon Character — (Mr. Photon generated by DALL-E)

29

광케이블에선 더 느리다 (대략 68% 정도)
경로가 너무 복잡하다
HTTP Round-trip 과정이 너무 비효율적이다
TLS Handshake까지 더하면…

30

엣지 솔루션 = 컨텐츠 캐싱

물류 창고(DC)가 너무 멀어서 배송시간(Latency)이 길어진다면,
가까운 곳(Edge Location)에 하나 더 짓는다.

31

CDN (Content Delivery Network)

32

문제 2. Advanced Networking

33

흔한 웹 서버

Handling HTTP-specific
Static assets serving
Caching
Access logging
Basic access control
Request limiting
Load balancing
…

34

네트워크 (L4) 관심사 ?

35

네트워크는 애플리케이션입니다

정말로요 (진지)

36

컴퓨팅 솔루션 = VM

37

웹 애플리케이션 아키텍처 ver. 201x

Satisfying?

38

엣지에서 더 효율적으로 할 수 있는 것들

Handling HTTP-specific
Static assets serving
Caching
Access logging
Basic access control
Request limiting
Load balancing
…

39

Road to Edge Computing

두 마리 토끼를 한꺼번에 잡으려면?

40

Limit 1. Cache Efficiancy

41

🤔

컴퓨팅 레이어에서 동적으로 캐시 정책을 결정할 수 있어야 함

42

Limit 2. Global Scale

43

🤔

글로벌 규모 컴퓨팅 인프라 구축이 필요함

44

Limit 3. Security

45

🤔

배포된 코드가 호스트를 손상시킬 수 없게 격리해야 함

46

FTSE+

We can solve any problem by introducing an extra level of indirection.
…except for the problem of too many levels of indirection
모든 문제는 추가적인 간접(추상)화 도입으로 해결할 수 있습니다.
…너무 많은 간접화 계층 자체를 제외하면
— Fundamental Theorem of Software Engineering

47

거인의 어깨 위에서

Cloud Infrastructure
Structured Concurrency
Containers / Isolation
Web APIs

48

+ 클라우드 인프라

49

+ 발전한 프로그래밍 모델

<Suspense fallback="loading from client...">
  <Client>
    <Suspense fallback="loading from edge network...">
      <Network>
        <Suspense fallback="loading from origin...">
          <Server />
        </Suspense>
      </Network>
    </Suspense>
  </Client>
</Suspense>
<Suspense fallback="loading from client...">
  <Client>
    <Suspense fallback="loading from edge network...">
      <Network>
        <Suspense fallback="loading from origin...">
          <Server />
        </Suspense>
      </Network>
    </Suspense>
  </Client>
</Suspense>

50

+ 발전한 가상화 기술

Docker
Firecracker
V8 Isolate
… 등 많은 Micro-VM 기술

51

가상화는 우리 주변에도 있습니다

52

+ 더 발전한 API 표준

53

=> 발전한 플랫폼

54

서버리스?

Q. 엣지 컴퓨팅 == 서버리스 컴퓨팅 인가요?

55

☁️ + ⚡ = 🌩️

56

현실 세계의 엣지 컴퓨팅 - AWS

AWS Lambda
AWS Lambda@Edge ?
AWS CloudFront Functions ??

57

58

AWS는 사용자에게 엣지 구성에 대해 더 많은 자유도를 부여함

장점: 어떤 네트워크에서 어떤 일이 일어날지 더 명시적으로 제어 가능
단점: 프로비저닝과 구성이 복잡하고 어려움

59

현실 세계의 엣지 컴퓨팅 - Cloudflare

60

Cloudflare는 네트워크 패턴을 분석해서 구성을 자동화함

장점: 사용자가 구성에 대해 전혀 신경쓰지 않음 (It just works)
단점: 실제로 어떤 식으로 동작할지 파악이 어려움

61

엣지 컴퓨팅의 활용 사례

그래서 프론트엔드 개발이랑 무슨 상관이죠…?

62

예시: Edge-side Rendering

63

예시: BFF (Backend For Frontend)

OpenGraph API
주소검색 Proxy
GraphQL Mesh
세션 캐시 / API 게이트웨이

64

예시: Advanced Cache

Stellate (formally GraphCDN)

65

예시: Edge Middleware

Early Hints Worker
Example: Edge Localization

66

예시: Others

Image Resizing
OpenGraph Image Rendering
Edge Storages
AI Models / Hardwares

67

다가오는 미래?

이거 진짜 믿어도 되는거 맞아요?

68

WinterCG

Web-interoperable Runtimes Community Group

진정한 위치 투명성 (Location transperency)의 구현이 될 지도

69

Open Sources

workerd, Cloudflare Workers runtime
Edge Runtime by Vercel
Roll your own JavaScript runtime by Deno

70

WebAssembly

71

예전에 만든 것들은 어떡해요?

웹의 가장 큰 장점: 이전 세대의 것들을 절대 그냥 버리지 않는다는 것

72

CGI? WASI!

WASI (WebAssembly System Interface)

73

Wordpress on Browser

([https://github.com/WordPress/wordpress-wasm])

74

Flash on Browser

https://ruffle.rs/demo/

75

미래는 생각보다 그리 놀랍지 않습니다

76

미래를 대비하는 자세

Keep eyes on WebAssembly & JavaScript
Zero-trust security model
Always bet on Web

77

레퍼런스

78

마무리

감사합니다!

79

엣지 컴퓨팅

시작하기 전에, Front-end가 정확히 뭐죠 ?

엣지 컴퓨팅

시작하기 전에, Front-end가 정확히 뭐죠 ?

반댓말은? Back-end ?

Client & Server ?

Edge Computing ?

⚠ Buzz Word Alert ⚠️

🌩️ Edge Computing

전체 맥락이 궁금하신 분들은…

발표자 소개

김혜성 (Hyeseong Kim)

왜 프론트엔드 개발자가 그런걸 해요?

느낀점

근데 요즘 엣지 컴퓨팅이라는 단어

Vercel Edge Middleware & Functions

Netlify Edge Handlers & Functions

그 밖에 다양한 서비스들

대체 엣지가 뭐길래…?

엣지 컴퓨팅이란

Before the Edge

CGI

FTSE

웹은 복잡하지만 자주 변하지 않는다

엣지 x / 컴퓨팅 x

문제 1. c = c0

이건 빛 입장도 들어봐야…

엣지 솔루션 = 컨텐츠 캐싱

CDN (Content Delivery Network)

문제 2. Advanced Networking

흔한 웹 서버

네트워크 (L4) 관심사 ?

네트워크는 애플리케이션입니다

컴퓨팅 솔루션 = VM

웹 애플리케이션 아키텍처 ver. 201x

엣지에서 더 효율적으로 할 수 있는 것들

Road to Edge Computing

Limit 1. Cache Efficiancy

🤔

Limit 2. Global Scale

🤔

Limit 3. Security

🤔

FTSE+

거인의 어깨 위에서

+ 클라우드 인프라

+ 발전한 프로그래밍 모델

+ 발전한 가상화 기술

가상화는 우리 주변에도 있습니다

+ 더 발전한 API 표준

=> 발전한 플랫폼

서버리스?

☁️ + ⚡ = 🌩️

현실 세계의 엣지 컴퓨팅 - AWS

현실 세계의 엣지 컴퓨팅 - Cloudflare

엣지 컴퓨팅의 활용 사례

예시: Edge-side Rendering

예시: BFF (Backend For Frontend)

예시: Advanced Cache

예시: Edge Middleware

예시: Others

다가오는 미래?

WinterCG

Open Sources

WebAssembly

예전에 만든 것들은 어떡해요?

CGI? WASI!

Wordpress on Browser

Flash on Browser

미래는 생각보다 그리 놀랍지 않습니다

미래를 대비하는 자세

레퍼런스

마무리

시작하기 전에,
Front-end가 정확히 뭐죠 ?

시작하기 전에,
Front-end가 정확히 뭐죠 ?

문제 1. c = c₀