인포크 웹 프론트엔드

웹 서비스와 프론트엔드 기술

웹 서비스는 네이티브 앱에 비해 설치과정을 거치지 않고 사용자의 브라우저서 실행됩니다. 이 특징은 앱스토어를 거치지 않아도 즉시 서비스를 제공할 수 있고 유연한 업데이트가 가능하게 합니다. 그러나 인터넷 익스플로러와 다양한 브라우저를 모두 지원하기 어렵다는 단점이 있습니다. 더 좋은 서비스를 위해 비정기적으로 업데이트를 배포하고 싶지만, 웹 환경에서 잦은 업데이트는 배포관리와 버전컨트롤을 어렵게 합니다.

서버사이드 렌더링을 지원한다면, 웹 서버도 필요합니다. 인포크의 웹 프론트엔드 렌더링 서버는 월간 이용자 100만 명 규모의 트래픽을 처리합니다. 타임세일이 많은 소셜커머스 특성상, 렌더링 서버는 불규칙하고 변화가 큰 트래픽을 경제적으로 처리할 수 있어야 합니다.

이렇듯 장단점이 뚜렷한 웹 프론트엔드 기술을 인포크에서 어떤 스택으로 개발하며 어떻게 배포하는지 소개하겠습니다.

인포크 웹 서비스

인포크스토어
인플루언서의 판매 상품들을 구매하는 웹 서비스
인포크스토어 판매자
인플루언서를 위한 운영 및 관리를 서비스. 상품, 주문을 관리할 수 있습니다.
인포크링크
인스타그램 프로필에 여러 개의 링크를 등록할 수 있는 웹 서비스

기술 및 배포 스택

Vue.js

Vue.js는 Javascript 기반의 오픈소스 웹 애플리케이션 프레임워크입니다. 인포크 내 모든 웹 프론트엔드 서비스는 Vue.js를 통해 개발된 SPA로 배포됩니다. 진입장벽이 낮기 때문에 누구나 개발에 참여할 수 있다는 장점이 있습니다. Typescript 지원이 되면서 인포크 웹 프론트엔드 서비스에도 점진적으로 적용이 되고 있습니다.

Vuex

Vuex는 Vue.js 웹 애플리케이션에 대한 상태관리 방법 및 라이브러리 입니다. 인포크 웹 애플리케이션은 서버로부터 받은 응답 데이터는 모두 Vuex에서 관리합니다. 이렇게 하면 UI를 구현하는데 필요한 상태관리와 브라우저에 렌더링할 데이터를 분리하여 개발할 수 있다는 장점이 있습니다.

Nuxt.js

Nuxt.js는 Vue.js를 기반으로 공식 가이드라인에 따라 강력한 아키텍처를 제공하도록 설계된 프레임워크입니다. 다양한 배포환경(server, serverless, static)에 배포할 수 있으며 서버사이드렌더링을 옵션으로 제공하며 PWA, AMP, Google Analytics등은 하나의 모듈로서 사용할 수 있습니다.

Scss(Sass)

Sass는 css로 컴파일되는 스크립트 언어입니다. 개발자가 논리적으로 css를 작성하는데 큰 도움을 줍니다.

배포 및 모니터링

Serverless (AWS)

서버리스는 AWS Lambda, Google Cloud Function에서 실행되는 클라우드의 네이티브 아키텍처 입니다. 서버리스를 사용하면 서버를 고려하지 않고 애플리케이션과 서비스를 구축하고 실행할 수 있습니다.

서버리스를 사용하면 많은 장점이 있습니다. 서버가 24시간 켜져있지 않고 필요할 때만 호출되어 비용이 많이 절약되어 경제적입니다. 또한 운영체제 업데이트 및 취약점 관리에 신경을 쓰지 않아도 보안이 우수합니다. 변덕스러운 트래픽에 대비한 auto scaling을 신경 쓰지 않아도, 호출한 만큼 함수가 실행되기 때문에 확장성도 좋습니다.

Sentry

Sentry는 실시간으로 에러 로그를 수집하며, 발생 시 개발자에게 알림을 제공합니다. 브라우저, os버전, 유저정보 등을 수집하기 때문에 다양한 브라우저를 대응하는 것이 수월합니다. Nuxt.js에서는 @nuxtjs/sentry 모듈을 통해 쉽게 연동이 가능하다.