Nuxt 사용 후기

Nuxt 사용 후기

일단 Vue js와 Nuxt에 대한 세부적인 내용이 없는 부분은 양해부탁드립니다.

Nuxt를 사용하고나서 겪었던 장단점들을 적어보려 합니다.

NUXT JS

직관적인

Vue 프레임워크

웹 개발을 쉽고 강력하게 만들어주는 오픈소스 프레임워크인 Nuxt.js로 여러분의 다음 Vue.js 애플리케이션을 만들어보세요.

Nuxt 공식 홈페이지에 나와있는 대문 문구입니다. 위 말 그대로 Vue를 front-end 도구로 사용하기 쉽게끔 만들어진 framework입니다.

공식 홈페이지가 한글로 이미 번역이 되어있어서 자세한 설명은 공식 홈페이지를 참조하는게 가장 적합합니다. 이 글에선 직접 NUXT JS로 개발을 하면서 겪었던 내용들을 위주로 작성하였습니다.

기존의 Vue를 쓰면서 필요했던 작업들...

단편적으로 vue를 사용한다는건 그리 어려운 일이 아닙니다. vue 공식 홈페이지에 나온대로 따라하면 화면을 만들고 해당 화면을 웹에 띄우는건 정말 쉽게 설명이 되어있구요.. 단, vue에서 제공하는 여러 기능들을 사용하기 위해 몇몇 설정작업들이 필요하게 됩니다. 필수는 아니지만 단순 실습용으로 사용하는게 아니라면 필요한 작업들입니다.

백엔드 프로젝트와의 연동작업

: Vue는 front-end에서 사용하는 프레임워크입니다. 즉 server 의 개념을 가지고 있지 않기 때문에 흔히 말하는 server의 API 호출을 하는 로직을 구현하려면 서버 프로젝트와의 연동 작업이 필요합니다. 보통 Proxy에 관련된 작업이라고 생각하면 되고, Vue에서 서버쪽 소스의 API를 호출할 수 있게끔 환경을 잡아줘야 합니다.

Webpack 작업

: webpack 은 참 좋은 도구이면서도 귀찮은 부분중에 하나입니다. webpack 에 대한 자세한 설명을 하려면 별도의 글을 작성해야 할만큼 하는 기능도 다양하고 설정도 가지각색입니다. 아주 단편적인 내용만 첨부하자면 모듈 번들링 도구라고들 하는데, webpack의 config 파일의 작성된 규칙들을 참조하여 프로젝트에 필요한 모든 모듈을 매핑하고 번들을 생성하는 작업을 수행합니다.

Vue에서 일반적으로 사용하는 기능들 추가

: Vue에서 공식적으로 제공해주는 몇몇 모듈들이 있습니다. 거의 필수적으로 사용하는 부분들이죠. 예를들면 상태관리를 위한 Vuex 나 Vue에서 사용하는 라우터인 Vue Router 가 대표적이죠.

이 외에 많은 작업들이 있겠지만 크게 세 가지만 적어보았습니다. 물론 그 내용도 상세하게 적은건 아니긴 합니다. 그리고 위 작업들은 Vue 공식 사이트에서도 다 친절하게 가이드해주는 내용들이기도 합니다.

NUXT.js로 간편하게!(create-nuxt-app)

Nuxt.js 팀은 빠른 시작을 위해 create-nuxt-app라는 툴을 만들었습니다. Server side 프로젝트를 Node.js 로 사용한다는 가정하에 Node.js와 Vue.js를 사용하는 하나의 프로젝트를 자동으로 생성해줍니다. 사용자가 프로젝트 구조를 처음부터 잡는 경우에 대한 가이드도 있지만, 전 개인적으로 위 툴로 만들어진 구조가 나쁘지 않다고 생각합니다. 기본적으로 해당 툴로 만들어진 프로젝트는 위에서 언급했던 3가지 작업들을 다 포함한 채로 자동으로 프로젝트를 생성해줍니다.

사용법만 익히면 된다.

Nuxt.js 공식 홈페이지에서 상세하게 가이드를 해줍니다. server 프로젝트에 있는 router를 호출하려면 어떻게 써야하는지, Vuex를 쓰려면 어느 디렉토리에 어떤 파일을 생성해야하는지, module 사용을 하려면 config 파일에 어떻게 작성해야하는지, 외부 라이브러리를 참조하려면 어느 파일에 작성해야하는지, webpack 빌드에 대해서 추가적인 사항을 넣으려면 어떻게 해야하는지 등등 사용방법에 대한 가이드가 잘 되어있습니다. 해당 기능들에 대한 내부적인 로직을 자세히 설명해주는건 아닙니다. 때문에 여기서 문제점이 발생할 수 있습니다.

WHY?

프레임워크라는건 이미 만들어져있는 구조에 정해진 규칙대로 코드를 작성하고 파일을 생성해야 오류의 위험이 적습니다. 하지만 모든 프로젝트의 구조와 Nuxt.js 의 구조가 맞다고 말할 순 없습니다. 이 부분을 느낀 이유는 뒤에서 설명하겠습니다.

Vue 는 SPA에 적합하다!

SPA vs MPA( 출처 : https://maybe.works/blog/spa-vs-mpa-pros-cons-and-gotchas )

전통적인 웹 어플리케이션은 페이지에 따라서 페이지를 호출하는 방식을 사용합니다. 하지만, SPA는 단 한번의 호출만으로 하나의 페이지에서 컴포넌트 기반으로 페이지를 그립니다. Vue나 React, Angular 는 SPA 프로젝트를 만드는 대표적인 프레임워크 및 라이브러리들입니다.

그럼 기존 방식으로 못만드는 것인가?

당연히 그렇지 않습니다. Nuxt.js 에서도 SPA 프로젝트와 Universal 프로젝트 선택지를 제공합니다. Universal은 전통적인 방식의 프로젝트라고 생각하시면 될 것 같습니다.

SPA가 대세로 올라오긴 했지만, SPA가 무조건 좋다는건 아닙니다.개개인의 웹 프로젝트 목적에 따라서 필요한 구조가 있고, 저 또한 SPA를 적용하지 않으면서 Nuxt.js를 사용하였습니다.

maybe.works/blog/spa-vs-mpa-pros-cons-and-gotchas

위 글의 내용을 참조하시면 좋을 것 같습니다.

전통적인 웹 어플리케이션의 방식

위에서 말했던 것처럼 전 SPA 방식을 사용하지 않았기때문에, 페이지마다 사용하는 리소스가 달랐습니다. 예를들면 A라는 페이지에서는 A라는 리소스만 쓰고 B라는 페이지에선 B라는 리소스만 쓰기때문에 굳이 A 페이지에 B 리소스를 로드시킬 이유가 없게되죠. 그리고 전통적인 웹 어플리케이션은 페이지 이동시에 페이지 자체가 새로 호출되는 것이기 때문에 호출시점에 대한 관리가 편리합니다. 필요한 리소스들은 모두 새로 호출될 것이기 때문에 해당 리소스를 사용하는 소스코드들이 리소스를 찾지 못하는 상황이 발생할 경우가 거의 없습니다.

Nuxt.js 에서 SPA를 사용하지 않는다면?

Nuxt.js에선 일반적으로 프로젝트 루트 경로에 nuxt.config 파일을 두어 전반적인 프로젝트의 설정을 관리할 수 있게 됩니다. 하지만 해당 config는 프로젝트 전체에 대한 관리이기 때문에 부분적인 설정을 하는 것이 아닙니다. 쉽게말하면 전역변수같은 느낌으로 보시면 되겠습니다.

예를들어 nuxt.config 파일에 외부 리소스를 주입하면 모든 페이지에서 해당 리소스가 로드됩니다.

사실 SPA에서는 전혀 문제가 될 일이 아닙니다. SPA는 애초에 한 개의 페이지로 만들어지기 때문에 리소스를 한번에 가져오는게 맞는 컨셉이라고 생각합니다.

Nuxt.js에서 각각의 페이지에 대한 리소스 로드를 하는 방식을 제공해줍니다. (참조: ko.nuxtjs.org/faq/)

그래서 nuxt.config에 넣을걸 그냥 각 페이지에 넣으면 그만이라고 생각을 했었습니다.

외부 리소스 참조 후 실행에 대한 문제 발생

제가 했던건 A라는 페이지에 google map 에 관한 외부 리소스를 사용하는 것이었습니다. 그렇다면 A 페이지에만 google map에 관련한 리소스를 포함시키는 구문을 작성하면 되는거라 생각했습니다. 다만 한 가지 제약사항이 있었습니다.

페이지가 호출되자마자 google map 라이브러리를 사용해야 한다.

위의 말은 google map에 관한 라이브러리가 페이지에 로드가 완료되고, 해당 라이브러리를 실행할 수 있는 상태가 확실하게 되어있어야 한다는 말이 됩니다.

여기서 어려움을 겪었던 부분은 html에 외부 리소스가 주입이 되었다 하더라도 실행 가능한 상태라고 보장할 수 있는건 아니라는 것입니다.

분명 html 상에는 google map 에 관련한 외부 리소스 주입이 되었는데 실질적으로 해당 라이브러리를 사용하는 코드에서는 참조할 수 있는 라이브러리가 로드되지 않았다는 에러가 나왔습니다. 이미 몇몇 사람들도 해당 문제를 해결하기 위한 방법들을 포스팅하고 있었습니다.(dev.to/bawa93/troubleshooting-and-adding-google-maps-to-individual-nuxt-js-pages-1d34)

브라우저가 리소스 참조 및 실행을 어떤 순서로 하는지, Nuxt.js 에서 각각의 페이지에 외부 리소스를 주입시킬 때 어떤 방식으로 주입을 시키는지 정확히 알 수가 없어서 발생했던 문제로 보입니다.

위 사항은 어쩔 수 없이 nuxt.config 파일에 모듈을 포함시켰습니다. google map 사용하는 곳이 한 군데가 아니었고, 해당 라이브러리는 로드가 되면 자동으로 추가적인 script 리소스를 참조하여 주입하는 형태를 가지고 있기때문에, 만약 다른페이지에서 google map 라이브러리를 포함시키게 되면 중복되는 script 리소스 주입이 일어나게 되어서 문제가 생기게 됩니다.

nuxt.config 파일에 외부 리소스 주입 방법을 사용하게 되면 애초에 서버 구동시에 전역으로 리소스가 주입되는걸 확실하게 보장할 수 있기때문에 일단 괜찮은 방법을 찾기 전까진 해당 방법으로 구현하였습니다. 다만, google map 이 필요하지 않은 페이지에선 불필요하게 해당 리소스를 주입하는 상황이 발생하게 되죠.

라이프사이클에 관한 부분을 고민해야합니다.

사실 Vue나 React를 말하면서 가장먼저 언급해야되는 컨셉이 가상dom에 대한 컨셉입니다. 실제 dom을 조작하는 것이 아닌 가상의 dom을 통해서 페이지를 제어하는 컨셉을 가지고있는데, 이건 Nuxt.js라서가 아니라 Vue.js를 사용한다면 필수적으로 고려해야하는 부분입니다. 페이지 이동에 따른 라이프사이클을 전반적으로 이해하고 있어야 어느시점에 어떤 라이프사이클의 함수를 호출해야하는지를 정할 수 있습니다. SPA의 형태면 Nuxt.js에서 가이드하는 형태로 따라갈 수 있겠지만, 그렇지 않으면 약간의 변수들이 생길 수 있습니다.

그럼 좋았던 점은?

비교 기준을 뭐로 두냐에 따라 좀 다르겠지만 일반적인 html 작성 코드로 비교했을 땐 컴포넌트 구조의 코드를 굉장히 쉽게 작성할 수 있는 점이었습니다. 그에따라 재사용도 편하고 심지어 nuxt에서는 layout이라는 기능으로 컴포넌트의 재사용성을 더 확장시켜주었던 것 같습니다.

전반적인 프로젝트의 관점으로 본다면 기존의 순수 Vue.js를 하면서 해야했던 서버사이드렌더링 작업, webpack 설정, 프로젝트 디렉토리 구조 작업 등을 생각할 필요가 거의 없어졌다는 겁니다.

정해진 규칙대로 작성만하면 제가 작성하려는 기능에만 집중할 수 있다는 큰 장점이 있습니다.

또한 Vue.js 에서는 서버 데이터에 대한 값을 사용하려면 api 호출과 같은 코드가 반드시 필요했다면, Nuxt.js에서는 몇몇 기능들을 제공해줘서 위의 애로사항을 해결해주었습니다.

asyncData나 nuxtServerInit Action을 참고하시면 이해가 가실겁니다.

마지막으로 아쉬웠던 점

요즘 추세가 Typescript라고들 하죠. 기존의 Vue도 Typescript 사용을 100% 지원한다고 하고있고, Nuxt.js에서도 Nuxt-ts라는 프로젝트로 지원을 하고 있지만 Nuxt나 Vue에 비해서 공식 문서 내용이 상대적으로 부족한 걸로 보입니다. 그래서 지금 당장 실무로 Nuxt-ts를 사용하는 걸 포기했던 이유이기도 합니다.

하다보니 몇몇 버그사항도 있는걸로 보입니다. 그리고 계속 말했던 것처럼 보통 SPA 프로젝트를 만드는걸 토대로 가이드를 하기때문에 ts로 삽질을 한 글들을 검색하는게 좀 어렵더군요.. ts 자체를 아직 제가 완벽하게 이해하지 못해서 더 어려움이 많았습니다.

감사합니다.

from http://bubobubo003.tistory.com/76 by ccl(S) rewrite - 2021-01-05 23:00:43