안녕하세요. 이번 글에서는 지난 12월 11일, Vuetiful Korea Meetup에 다녀온 이야기를 전해드리려고 합니다. Vuetiful Korea는 최근 핫한 프론트엔드 프레임워크인 Vue.js에 대한 관심 주제를 발표하고 서로 관련 경험을 공유하는 네트워킹 모임입니다. 2017년 4월에 시작하여 이번이 여섯 번째 밋업이었는데 90명 정원이 하루만에 마감되었다고 하니 Vue.js의 인기를 실감할 수 있었습니다.
LINE은 이번 밋업에 장소와 샌드위치, LINE 캐릭터 상품을 후원했는데요. 귀여운 스티커들이 특히 인기가 많았습니다.
국내에서는 React에 비해 Vue.js의 활용이 상대적으로 적은 편입니다. 그래서 이번 밋업은 국내에서도 더 많은 개발자들이 Vue.js를 사용할 수 있도록 다양한 수준의 세션으로 구성됐는데요. 초급자를 위한 세션에서부터 SSR(Server Side Rendering)을 고민하는 중급자들을 위한 세션, 더욱 세부적으로 Vue.js의 코어 로직을 살펴보면서 문제점을 찾고 해결하는 높은 수준의 세션까지 준비되어 있었습니다.
발표 중간에는 LINE에서 테크 에반젤리스트로 활동하고 계신 박민우 님께서 LINE이 전세계에서 어떤 서비스들을 운영하고 있는지 소개하고, LINE 내부에서도 다양한 프로젝트에 Vue.js를 활용하고 있다는 이야기를 전했습니다.
그러면 각 세션에 대해 좀 더 자세히 전해드리겠습니다.
Vue.js를 이용한 백오피스 구현기 - 마광휘 님
첫 번째 세션은 와인포인트에서 프론트엔드 개발자로 일하고 있는 마광휘 님이 발표해 주셨습니다. 마광휘 님은 새로 도입할 프론트엔드 프레임워크를 고민하면서 프론트엔드와 백엔드에서 모두 사용할 수 있는 언어는 JavaScript이기 때문에 러닝 커브의 기준을 JavaScript로 잡고, 그 중에서 Vue.js가 가장 낮은 러닝커브를 가졌다고 판단해서 Vue.js를 선택했다고 합니다. 기존에 HTML로 작성한 코드와도 잘 통합할 수 있었다고 하고요. 눈에 띄는 부분은 Vue.js에서 제공하는 모듈인 Vuex나 Vue Table-2를 사용하지 않고 직접 모듈을 제작하여 사용했다는 점이었습니다. 그 이유로는 첫째, Vuex는 충분히 검증된 모듈이지만 Vuex를 쓸만큼 프로젝트 규모가 크지 않았고 Vuex에 필요한 기능이 없을 경우 추가하기 어렵기 때문이었다고 합니다. 둘째, Vue Table-2는 아직 검증이 되지 않았고 기획에 따라 직접 구현하는 것이 오히려 빠른 경우가 있었다고 하네요.
발표자료 : https://www.slideshare.net/gwangwhima/vuejs-125681294
Nuxt.js vs Next.js - 임석민 님
두 번째 세션은 임석민 님께서 Nuxt.js와 Next.js의 장단점을 비교하여 설명해 주셨습니다. Nuxt.js는 Vue.js 애플리케이션을 편리하게 만들기 위한 프레임워크입니다. Nuxt.js의 대표적인 장점으로 다음 네 가지를 이야기해 주셨는데요.
- 우리말 가이드 문서를 제공
- 디렉터리 구조를 기본적으로 지원
- SEO(Search Engine Optimization)에 최적화된 서버사이드 렌더링
- 코드 분할 자동화
최근에 프론트엔드 개발 환경을 구축하는 데 어려움이 많은데 이런 부분을 Nuxt.js를 통해 쉽게 해결할 수 있고, SPA(Single-Page Application)에서 신경써야 하는 부분들을 모두 포함하고 있어서 간단한 SPA 작업에 좋을 것 같다는 말씀을 해주셨습니다.
발표자료 : https://slides.com/imsukmin/nextjs_vs_nuxtjs#/
Deep dive into Vue.js - 이선협 님
마지막은 Vue.js의 동작 원리를 파헤쳐 공유해 주신 이선협 님의 세션이었습니다. 실제로 무언가를 만들 때 바로 도움이 되는 것은 아니지만 원리를 이해하고 만들다 보면 '1%의 버그를 수정할 수 있는 능력'을 기를 수 있을 거라는 말씀이 인상적이었는데요. 내부 소스 코드를 살펴보면서 Vue.js 내부 원리를 살펴볼 수 있는 시간이었습니다. Vue.js는 약간 변형된 MVVM(Model–View–ViewModel) 아키텍처를 기반으로 하고 있다고 하면서 Vue.js 구조가 왜 MVVM이 아닌지 잘 설명해 주셨습니다. 그리고 Vue.js에서 사용되고 있는 Virtual DOM이 어떻게 동작하는지 Vue.je 코드 설명과 함께 발표해 주셨습니다.
발표자료 : https://www.slideshare.net/sunhyouplee/deep-dive-into-vuejs
마치며
발표가 끝난 후 밋업 참가자분들과 발표자분들이 함께 동그랗게 둘러앉아 네트워킹 세션을 가졌습니다. Vue.js에 관련된 내용 뿐만 아니라 서버나 인프라 구축, AWS 사용팁, React나 다른 프레임워크로 개발하는 개발 방법, 디자이너와 개발자 사이의 업무 영역은 어디까지 나누는 것이 좋을지 등등 평소 답답했던 부분들을 서로 공유하고 토론하며, 자유롭게 질의응답 시간을 갖는 모습이 굉장히 인상적이었습니다. 분야를 가리지 않고 퇴근 후에도 열공하는 개발자들의 열정이 느껴졌습니다.
LINE에서는 현재 다음과 같은 분야에서 프론트엔드 개발자 채용을 진행하고 있습니다. 많은 지원 부탁드립니다.