이.빅.스. | Flamingo의 오픈소스

안녕하세요. 이.빅.스 시리즈 여섯 번째 시간이자 마지막 시간입니다. 이번 편에서는 이.빅.스의 모니터링과 서비스 운영, 관리의 역할을 하고 있는 플라밍고에 사용된 오픈소스들을 소개하고자 합니다.

개발자 생태계에는 수많은 오픈소스가 존재합니다. 폐쇄적으로 개발해오던 예전과 달리 기업이나 개발자 개개인들이 자신의 프로젝트를 공개하고, 최신 기술 정보와 문제점을 공유함으로써 더 나은 개발 환경을 만들어 나가고 있습니다. 공개된 오픈 소스를 사용함으로써 새 소프트웨어를 개발하는데 드는 비용을 절감하고 검증된 소스를 통해 안정성 있는 서비스를 제공할 수 있는 환경이 되었습니다. 플라밍고 역시 수많은 오픈소스 라이브러리를 활용해 개발되었습니다.

 

 

Vue.js

 

플라밍고는 프론트엔드 프레임워크로 Vue.js를 사용하고 있습니다. 프론트엔드 프레임워크는 재사용 가능한 코드 모듈, 표준화된 프론트 엔드 기술을 제공함으로써 웹 개발자의 작업을 용이하게 해줍니다. 프론트엔드 프레임워크가 가진 가장 큰 특징으로는 SPA가 있습니다. SPA는 단일 페이지 애플리케이션을 뜻하는 말로 처음 웹 사이트에 접속했을 때, 웹 사이트 전체에 필요한 모든 자원을 서버로 가져와 로딩을 하고 이동이나 전환을 하게 될 경우 필요한 부분만 바꿔줍니다. 그렇기 때문에 페이지 전환이 빠르고, 가지고 있는 자원을 다시 받아올 필요가 없어 웹 자원을 굉장히 효율적으로 관리할 수 있습니다.

 

기존 방식     /     SPA 방식

 

프론트엔드 프레임워크는 React, Angular.js, Vue.js가 대표적으로, 그 중 Vue.js를 채택한 이유는 직관적인 편이라 학습이 용이하고 코드의 재사용이 손쉽게 되어 있어 개발 기간을 단축할 수 있기 때문입니다. 또한 코드의 가독성이 좋아 개발자간 협업에 도움이 됩니다.

 

 

Nuxt.js

Vue.js를 온전히 사용하려면 Vue.js와 연관된 많은 라이브러리를 설치해야 합니다. 페이지 전환을 구성하는 Vue Router나 데이터의 상태를 정의하는 Vuex, 그 밖에 ES2015+ 지원, SASS 전처리 등의 개발 환경을 구성하려면 개별적으로 설치하고 설정을 해주어야 합니다. Nuxt.js는 Vue.js Application을 좀 더 쉽게 만들 수 있도록 지원해 주는 프레임워크입니다. 기본적인 구성이 자동화되어 있어, 따로 설치할 필요가 없고 이미지나 소스를 압축하거나 서버를 손쉽게 구성해 줍니다. 이런 편리성을 가지고 있음에도 런닝커브가 높지 않으며, SPA의 단점인 오랜 로딩시간 개선과 검색 사이트의 최적화를 개선할 수 있도록 서버 사이드에서 렌더링을 해줍니다.

 

 

EVUI (EXEM Visualization UI)

UI 프레임워크는 각종 레이아웃, 버튼, 입력 창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 것입니다. 개발자는 UI 프레임워크의 CSS 클래스나 JavaScript 함수만 불러와도 디자이너의 도움없이 손쉽게 페이지를 만들 수 있습니다. UI 프레임워크는 Bootstrap, Toast Ui 등 유명한 오픈 소스들이 있지만, 저희는 엑셈에서 개발한 EVUI를 사용하였습니다. EVUI는 다른 UI 프레임워크처럼 버튼이나 아이콘 같은 작은 단위의 필수 요소부터 Grid나 Chart등 다양한 시각화 컴포넌트까지 제공하고 있습니다. 자사의 오픈소스이기도 했지만 Vue.js를 기반으로 하고 있어 현 시스템에 적용하기 용이했으며 대용량 데이터 처리를 고속으로 처리할 수 있는 장점을 가지고 있습니다.

 

플라밍고에 적용된 EVUI 차트

플라밍고에 적용된 EVUI 그리드

 

 

ESLint & Prettier

개발자들 간 협업을 하다보면 각자의 스타일이 있어 코드의 일관성이 부족해지고 문법적인 오류나 안티 패턴이 존재할 수 있습니다. ESLint는 JavaScript 문법 중 위에서 말한 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 해줍니다. 반면 Prettier는 일관적인 코드 스타일을 유지할 수 있도록 도와주는 역할을 합니다. 줄 바꿈, 공백, 들여쓰기 등과 같은 스타일을 교정해줍니다. ESLint와 Prettier를 함께 사용해 저장할 때 룰에 어긋난 코드를 자동으로 포맷팅해줌으로써 일관성 있는 소스 코드를 유지하고 있습니다.

 

 

마무리

그 밖에도 날짜 관련 라이브러리인 moment.js, 데이터의 구조를 간편하게 함수형으로 다루는 lodash 등 수많은 오픈 소스를 사용하고 있습니다. 플라밍고는 오픈소스를 적극적으로 활용해 개발 시간을 단축할 수 있었고 성능의 향상, 좋은 코드의 생산 등 많은 장점을 확보할 수 있었습니다. 개발자에겐 개발 능력도 중요하지만 오픈소스에 대한 이해와 활용 능력 또한 필요한 역량이 될 것입니다.

 

6회에 걸친 이빅스 소개 어떠셨나요? 기고는 마무리되지만 제품과 기술에 대해 궁금한 점은 언제든 문의주세요. 

 

 

 

 

글 | 빅데이터기술연구팀 최규연