Edge Computing으로 가져올 웹 개발의 변화

이번 FECONF 2022에서 당근마켓 김혜성님이 발표하신 Edge Computing에 대한 주제가 있었습니다. 발표 내용이 흥미로워서 내용을 직접 요약해보았습니다. 바쁜 분들을 위한 세 줄 요약입니다. 1. 사용자랑 제일 가까운 곳(Edge)에서 빠르게 무언가를 계산(Computing)하는 기술이 현재진행형으로 진화중 2. 프론트엔드에 있던 코드 일부를 엣지 서버에 올려서 번들 사이즈를 줄이거나, 브라우저가 필요한 에셋을 더 빠르게 전달하는 것들이 가능해짐 3. 웹어셈블리를 끼얹어서 자바스크립트보다 몇 배 빠른 '엣지 런타임'기반의 서비스를 제공하는 기술도 나오는 중 - 엣지 컴퓨팅은 프론트엔드 개발자가 가질수 있는 강력한 무기 중 하나 - 이미 엣지 컴퓨팅을 제공하는 서비스들이 존재함 　- Vercel Edge Middleware & Functions (2022.6 릴리즈) 　- Netlify Edge Handlers & Functions (2022.4 릴리즈) 　- AWS Lambda@Edge 　- Cloudflare workers 등.. - "엣지 컴퓨팅이란 컴퓨팅 작업을 가능한 엔드유저와 가까운 곳에서 수행하는 것" 　- CDN은 정적 파일만 제공하지만, 엣지 컴퓨팅은 컴퓨팅(계산)이 가능함 - 엣지 컴퓨팅이 어려운 이유는 세 가지 　- 캐시 효율성. CDN과 다르게 컴퓨팅 레이어가 추가되므로 효율적으로 캐시를 관리하기 위한 설계가 필요 -> 설계 난이도 상승 　- 돈. 전세계에 존재하는 200개 서버들, 그리고 그곳으로 가는 해저 케이블들.. 엄청 비쌈.. 　- 보안. 이건 자바스크립트 코드를 내가 들어가지 못하는 위치에다가 배포해놓고 누군가가 그 코드를 어떻게 실행할 지 모르는 채 놔두는 것과 같음 - 엣지컴퓨팅은 많은 발전이 있었음 　- 프로그래밍 언어나 방법론들이 구조적인 동시성을 잘 처리할 수 있는 시대가 도래함 　- 보안적인 관점에서 로직을 격리된 환경에서 안전하게 결과만 노출할 수 있도록 하는 컨테이너 기술, 그리고 격리 기술이 발전함 (Docker) 　- 웹 자체의 진화 (서비스 워커, 표준 Fetch API 등) - 그래서 프론트엔드 개발이랑 무슨 상관이죠..? 　- 활용 사례 1) BFF(Backend For Frontend) 　　- MobX, Redux로 짜던 코드를 GraphQL로 처리하도록 엣지 서버에 올리고 클라이언트는 GraphQL Client로 구성해서 복잡한 클라이언트 코드를 줄일 수 있음 　- 활용 사례 2) Advanced Cache 　　- 엣지 서버를 통해 캐시 정책을 프론트엔드 개발자가 직접 더 똑똑하게 관리 가능 　- 활용 사례 3) Edge Middleware 　　- HTTP 103 상태 코드 Early Hints를 활용 　　- 엣지 미들웨어를 통해서 콘텐츠 응답을 내려줄 때 콘텐츠 스트리밍에서 특정 태그에 어떤 에셋들을 참조하는지 수집을 해서 HTTP Early hints를 만들어 낼 수 있음 　　- 브라우저가 필요한 에셋들을 더 빠르게 가져올 수 있는 것들이 가능해짐 　- 활용 사례 4) Image Resizing 　　- 미리보기같은 기능 구현을 위해 잠깐 업로드해서 리사이징하는 로직이 필요할 때 엣지 서버에서 처리 가능 - 다양한 엣지컴퓨팅에 투자하는 회사(Vercel, Deno, Netlify …)들이 웹 인터페이스 표준을 활용해서 상호운용이 가능한 엣지 런타임을 만들기 위한 노력이 대대적으로 일어나는 중 　- Cloudflare에서 Cloudflare worker를 오픈 소스로 공개 　- Vercel에서도 Edge Runtime을 오픈 소스로 공개 　- Deno에서도 Roll your own JavaScript runtime 이라는 튜토리얼 느낌으로 직접 자바스크립트 런타임을 만들 수 있도록 소스 공개 - 사실 가장 주목해야할 기술은 WebAssembly 　- WebAssembly는 브라우저에서 돌아가고, 가장 유니버셜하고 가장 현대화 된 바이트 코드 스펙 　- 바이트 코드 스펙이기 때문에 자바스크립트보다 빠르며, 실제로 이것들로 엣지 런타임을 구성하기도 함 　- 웹어셈블리로 워드프레스를 완벽하게 구현이 가능하다는 것을 워드프레스에서 공식적으로 공개한 바 있음 미래를 대비하는 자세 세 가지 - WebAssembly & JavaScript를 계속 눈여겨보자 - Zero-trust security model 　- 보안관점에서 액세스 컨트롤이 중요해질 것 　- 각 엣지 로케이션에서의 액세스를 신경써야할 것 - 인터넷의 과거와 현재는 항상 웹에 있었음 　- 웹의 미래는 엣지에 있을 것 미래엔 웹어셈블리가 프론트엔드 채용 공고 자격에 들어갈 수도 있다는 생각이 드네요. 미리 눈여겨봐야겠습니다.