Developer Holywater Jeong

Vue.js의 SSR 프레임워크인 Nuxt.js를 알아보자

2018. 07. 13 | 2 Minute Read

들어가며

블로그를 작성에 있어서 조금 뜸했다. 다름이 아니라 얼마 전 새 직장에 들어가게 돼서 정신이 없었다. 새 직장에서 일을 하게 됐는데 Vue를 사용하고 있다.
먼저 간략하게 소개를 하자면 필자는 가장 처음 웹을 시작 할 때 jQuery와 BootStrap으로 시작을 했고, 신규 프로젝트로 SPA(Single Page Application)를 만들기 위해 Angular.js를 사용했었다. 그리고 지난 몇년 간 관심을 주로 가지던 쪽은 React였고 최근에는 React의 SSR을 편하게 구현할 수 있는 Next.js를 사용해보는 등 JS UI 라이브러리/프레임워크 중에선 나름 깊게 학습해본 것 같다.
이것 저것 해봐서 그런지 Vue를 당장 이해하는 것에 있어서 어려움은 없지만 편하게 개발하는 것을 중요하게 생각하는 사람으로서 React의 Next.js 같은 프레임워크Vue 진영의 SSR 프레임워크인 Nuxt.js를 사용해보게 되었다.

What is Nuxt.js?

백문이 불여일견. 먼저 공식 페이지부터 방문해보자. 첫 인상부터 좋다. 한글 문서도 제공한다. 소개 문구를 보면 다음과 같다. "2016년 10월 25일, zeit.co의 개발팀은 서버사이드 렌더링 React 애플리케이션을 위한 프레임워크인 Next.js 프레임워크를 발표했습니다. 발표 몇 시간 뒤, Next.js처럼 서버사이드 렌더링 Vue.js 애플리케이션을 위한 프레임워크를 만들자는 생각이 들었고, 그렇게 Nuxt.js 가 탄생했습니다." 그렇다. 소개글이 React의 Next.js와 비슷한 역할을 한다고 말할 수 있는 이유이다. 실제로 Next.js를 사용하면서 라우팅과 같은 여러 과정이 상당히 편하다고 생각이 드는데 필자가 간단하게 접해본 바로는 Next.js보다는 Nuxt.js가 조금 더 편한 것 같다는 생각이 들기도 한다. 오늘은 소개하는 차원에서 간단하게만 알아보도록 하자.

전체적인 동작 방식과 특징

역시나 먼저는 공식 문서를 보는 것이 좋긴하다. Nuxt.js는 Vue 2를 기반으로해서 Vue Router, Vuex(선택), Vue Server Renderer(spa 모드 제외), Vue-meta를 포함한다고 한다. 원래는 직접 구현해야하는 부분을 Nuxt가 간단하게 구현할 수 있도록 도와준다. 특징을 한 번 보면 SSR, HMR, Head 요소 관리, 비동기 데이터 기반 라우팅 시스템, ES6/ES7 지원 등이 눈에 띈다.
다른 요소야 개발자 입장에서 Next.js와 크게 다르다고 느끼진 못 할수도 있지만 한가지를 꼽자면 Head 요소가 있다. Next.js에서 Head 요소를 관리하는 방법은 Next에서 Head 컴포넌트를 불러와서 작성을 하는 것이지만 Nuxt.js는 nuxt.config.js에서 json 형식으로 작성하는 것이 조금 다르다고 볼 수 있다. 관련 된 내용은 아래 링크한 문서를 참고하자.
nuxt.config.js 에서 Head 프로퍼티 관리, *.vue 파일에서 head 메소드로 요소 관리,

라우팅

라우팅 기능이 확실히 조금 편해보인다. pages라는 디렉토리 내에 example.vue 파일을 만든다면 자동으로 /example로 라우팅 하게 된다. pages 디렉토리 내에 user라는 디렉토리를 만들고 info.vue 파일을 생성하면 /user/info 로 라우팅이 된다. 파라미터가 필요한 경우에는 _{원하는 파라미터 명}.vue로 만들어서 /{원하는 파라미터}? 로 라우팅을 할 수 있다. 이 부분도 문서로 친절하게 설명이 되어있으니 참고하도록 하자.

Vuex

Vuex는 부모에서 자식 컴포넌트를 왔다갔다 하면서 데이터를 관리하는 것이 어려울 경우 사용하면 좋은 데이터 관리 라이브러리이다. Vuex를 아직 깊게 보진 못했으나 Redux와 비슷한 구석이 많아서 당장 기능을 구현하는데 큰 어려움은 없다. 역시나 Nuxt.js 프로젝트 내에 store라는 디렉토리를 만들고 파일을 만들면 쉽게 호출이 가능하도록 해놨다. 상황에 맞게 적절히 활용한다면 좋은 툴이 될 수 있다. 먼저 Nuxt에서 Vuex를 사용하는 방법은 클래식 방식과 모듈 방식이 있는데공식 문서를 참고하면 쉽게 이해가 가능하고 다음에 더 자세한 내용으로 포스팅할 예정이다.

끝.