프론트엔드 개발을 공부하면서 문득 서버와 DB 없이 프론트에서 온전한 서비스를 구현하는 방법이 없을까 하는 생각을 하게 되었습니다.
서버와 DB를 대체할 수 있는 것들을 고민하다가 MSW 와 로컬 스토리지를 이용하는 방법이 떠올랐고 구현하여 프로젝트를 제작해 봤습니다.
웹 아키텍처
출처 : https://zero-base.co.kr/event/media_school_FE_architecture
일반적으로 웹 사이트의 흐름은 위 그림과 같습니다.
- 프론트엔드에서 사용자와 상호작용하고 사용자에 행동에 의해서 서버로 요청을 보냅니다.
- 서버는 올바르게 요청을 받았다면 그 요청에 따라 데이터를 가공하여 데이터베이스에 반영합니다.
- 요청이 성공했거나 실패했을 때 프론트엔드에게 응답을 보내줍니다.
기본적으로 웹 사이트는 이런 흐름을 가지고 있습니다. 클라이언트와 서버의 관계로 말이죠. 또한 프론트사이드는 단순히 요청을 보내는 일 밖에는 할 수 없습니다. 응답에 의해 받아들인 데이터를 가공하는 건 나중 일입니다.
그렇다면..
백엔드 서버 없이 프론트엔드 개발만으로 데이터를 읽고 쓰고 삭제하고 수정하는 온전한 아키텍처를 가진 프로젝트를 만들어낼 수 없을까요?
- 오픈 API를 사용하여 만드는 프로젝트는 데이터를 실제로 CRUD 할 수 없다. ( 받은 데이터를 따로 가공해서 일시적으로는 가능할지도 모르겠지만 영구적으로는 불가능하다 )
- RESTful 한 API를 직접 사용해 보고 싶다는 생각이 있었다. 복잡하지 않은 구조의 API를 만들고 요청 -> 응답을 실제로 구현해 보고 싶었다.
일반적인 웹의 흐름에서 벗어난다면 프론트엔드 개발만으로 비슷한 아키텍처를 구현해 낼 수 있습니다. 다만 데이터베이스의 역할을 하는것이 로컬스토리지가 되기때문에 많은 데이터를 저장 할 수 없습니다.
프론트엔드 아키텍처
MSW 라이브러리를 사용해 아래 그림과 같은 아키텍처로 온전한 통신을 하는 것처럼 보여지는 프로젝트를 만들어보았습니다.
그림에 서비스 워커와 MSW 가 따로 분리되어 있는데 클라이언트 - 서버 구조를 표현하기 위해 인위적으로 그린 것으로 헷갈리시면 안 됩니다. 위 그림은 모두 브라우저 내부에서 한정적으로 사용 가능한 아키텍처를 표현한 것입니다.
MSW란 ?
브라우저에 내장되어 있는 서비스 워커를 이용하여 요청을 가로채고 응답할 수 있게 해주는 라이브러리입니다.
MSW ( Mock Service Worker ) 이슈를 만나다.
위와 같은 아키텍처로 NEXT.JS APP Router 를 이용하여 프로젝트 제작에 착수했으나.. MSW 와 NEXT.JS 최신 버전 간 이슈가 있었습니다.
이슈
MSW의 NextJs 14 AppRouter의 import 지원 이슈로 브라우저의 서비스 워커를 제대로 실행할 수 없었습니다.
관련 이슈 : https://github.com/mswjs/msw/issues/1644
해결
Require 비동기 임포팅을 이용하여 MSW 가 서비스 워커에 접근할 때까지 대기하는 방식으로 해결했습니다.
보다 일반적인 방법은 서버 컴포넌트에서 요청했을 땐 express 로 작동시킨 서버가, 브라우저에서 요청했을 땐 서비스 워커가 작동하여 클라이언트와 서버에서 둘다 가로채는 방법입니다.
express.js 를 사용하지 않고 브라우저 서비스워커만 사용한 이유
이 프로젝트는 DB 대용으로 로컬스토리지를 사용했습니다. 로컬스토리지는 사용자가 제거하지 않는이상 반 영구정으로 데이터를 저장해 둘 수 있기 때문입니다.
로컬스토리지는 브라우저에 내장된 저장 공간으로 서버와는 무관하므로 아래 이유로 서버 API 핸들러를 채택하지 않았습니다.
- MSW는 express 서버를 띄우고 해당 서버로 들어오는 요청을 통해 응답해 줄 수 있으나 프로젝트 배포 시 사용자도 서버를 띄워야 하는 단점이 있었습니다.
- express 서버는 로컬스토리지에 접근하여 데이터를 조작할 수 없기 때문에 API 핸들러로서 사용할 수 없었습니다.
위와 같은 이슈 때문에 브라우저의 Service Worker를 사용하는 측면이 간단하고, 접근성이 좋기에 기술적으로 채택하였습니다.
프로젝트 URL
