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

2018-07-13

들어가며

새 직장에서 일을 하게 됐는데 Vue를 사용하고 있다. 그런데 React의 Next.js 같은 프레임워크인 Vue 진영의 프레임워크인 Nuxt.js를 사용해보게 되었다.

What is Nuxt.js?

소개 문구를 보면 다음과 같다.

"2016년 10월 25일, zeit.co의 개발팀은 서버사이드 렌더링 React 애플리케이션을 위한 프레임워크인 Next.js 프레임워크를 발표했습니다. 발표 몇 시간 뒤, Next.js처럼 서버사이드 렌더링 Vue.js 애플리케이션을 위한 프레임워크를 만들자는 생각이 들었고, 그렇게 Nuxt.js 가 탄생했습니다."

소개글이 React의 Next.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 형식으로 작성하는 것이 조금 다르다고 볼 수 있다.

라우팅

pages라는 디렉토리 내에 example.vue 파일을 만든다면 자동으로 /example 로 라우팅 하게 된다. pages 디렉토리 내에 user라는 디렉토리를 만들고 info.vue 파일을 생성하면 /user/info 로 라우팅이 된다.

Vuex

Vuex를 아직 깊게 보진 못했으나 Redux와 비슷한 구석이 많아서 당장 기능을 구현하는데 큰 어려움은 없다. 역시나 Nuxt.js 프로젝트 내에 store라는 디렉토리를 만들고 파일을 만들면 쉽게 호출이 가능하도록 해놨다. 상황에 맞게 적절히 활용한다면 좋은 툴이 될 수 있다.

끝.