안녕하세요, DevOps팀의 왕왕 입니다.오늘 소개할 내용은 이번 프로젝트에서 Vue.js를 사용하면서 효율을 극대화하고 더 큰 생산성을 낼 수 있게 해주었던 Vuex와 Nuxt.js 입니다. Vue를 단독으로 사용했을 때가 그냥 커피라면 Vuex와 Nuxt.js가 첨가된 Vue는 T.O.P라고 할 수 있답니다 :) 먼저 Vuex 입니다.  Vuex는 Vue.js의 상태(state)관리 패턴이자 라이브러리 입니다. 컴포넌트 간 데이터 활용이 더욱 용이해집니다. * Vue.js에서 컴포넌트 간 공유할 수 있는 데이터를 흔히 상태(State)라고 부릅니다.  “State =  공유하는 데이터” 라고 이해하시면 되니 오해하지 말아주세요! Vue.js에 대해서 공부하신 분들이면 의문을 가지실 수도 있습니다. Vue.js에서 기본으로 제공하는 emit, prop, ref 등으로 컴포넌트 간 데이터를 주고받을 수 있기 때문이죠. 하지만 어플리케이션이 복잡해질 수록 다음과 같은 한계가 생기게 됩니다. 1.    데이터를 공유하는 컴포넌트의 수가 많아지고 중첩되기 까지하면 유지보수가 힘든 코드가 되어버린다.2.    여러 컴포넌트에서 데이터를 변경하려는 액션이 일어날 때 컴포넌트 간 데이터 공유/관리가 복잡해진다. [Vuex를 사용하지 않은 데이터 흐름]데이터가 부모-자식 혹은 형제에게 전달되는 과정이 한 눈에 봐도 복잡해 보입니다 :([Vuex를 사용한 데이터 흐름]위 그림 처럼 Vuex는 전역에서 저장소 역할을 하는 Store가 있습니다.미리 api를 호출하여 store를 DB에서 불러와 세팅할 수 있고, 각 컴포넌트에서 접근/변경이 가능합니다. 이를 통해 Vuex에서는 더욱 직관적이면서 효율적인 데이터 관리가 가능해집니다.Vuex의 패턴Vuex는 Flux 패턴에서 창안되어 사용되고 있습니다. MVC 패턴의 문제점을 보완하여 양방향이 아닌 단반향 데이터 흐름의 개발 패턴입니다. Vuex는 Store에서 모든 상태관리가 이루어집니다.아래는 컴포넌트에서 액션이 일어나 UI가 갱신되기 까지의 Vuex 패턴의 흐름입니다.1.    컴포넌트가 Action을 일으킨다. 2.    Action에서는 API 등을 호출해 그 결과를 이용해 Mutate를 일으킨다.3.    Mutate에서는 Action의 결과를 받아 State를 변경시킨다. 이 과정은 추적이 가능하다.4.    Mutate에서 변경된 State는 다시 컴포넌트에 바인딩되어 UI를 갱신한다.[개발자 도구에서 쉽게 확인가능한 Event들](Mutation이 발생한 이력을 추적할 수 있다!)(Action도 마찬가지)이런 단방향 데이터 흐름 덕에 예측이 가능하도 추적 역시 가능합니다. Store을 사용한 중앙 집중식 관리로 결합도가 낮은 것도 장점이네요. -다음으론 Nuxt js입니다.!Vue.js의 든든한 지원군 Vuex에 이어 Vue.js 어플리케이션 개발을 보다 쉽게 만들어주는 프레임워크 Nuxt.js에 대해서 알아보겠습니다.Nuxt.js는 Vue.js 프로젝트에서 사용되는 여러 유용한 라이브러리들

안녕하세요. 이번 글에서는 지난 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(Searc