Nuxt란?
2016년 프랑스의 형제가 만든 프레임워크로 Vue, Node, Webpack, Babel 을 기반으로 한 오픈 소스 웹 어플리케이션 프레임워크이다. Vue에서 발생할 수 있는 문제들을 해결하기 위해 출시되었으며 공식 홈페이지에서 제공하는 문제점은 다음과 같다.
nuxt 공식 홈페이지
Vue에서 발생할 수 있는 문제들
1. Vue로 프로젝트를 완성하기가 어렵다
Vuex, Vue Router, vue-meta 등의 사용을 모두 고려해야 하며 Intelligent Default라고 표현하는 조사, 지식을 바탕으로 한 여러 지식들이 모두 도입되어야 한다.
Nuxt는 단 한 줄의 명령어를 통해 사용하고자 하는 프레임워크, 라이브러리 등을 모두 선택할 수 있다.
2. 기본적인 폴더 구조가 존재하지 않는다
프로젝트의 규모가 커질수록 잘 짜여진 구조가 중요해진다.
Vue는 assets, components만 제공하는 반면 Nuxt는 pages, layouts, store, middleware 등의 폴더 구조 제공을 통해 훨씬 더 간단하고 빠른 개발이 가능하다.
3. 라우팅 설정이 복잡해진다
Nuxt를 사용하면 pages 디렉토리 내에 페이지 파일만 생성해 놓으면 자동으로 Vue Router 설정을 생성함으로서 개발자의 수고가 덜어진다.
4. 구성 방식에 표준이 없다
Nuxt를 사용하면 nuxt.config.js에서 SEO, meta, middleware 등의 설정을 원하는 대로 추가할 수 있다.
5. SEO에 있어 좋지 않다
Vue에서는 원하는 페이지를 검색 엔진으로 하여금 검색이 가능하도록 하려면 서버에 pre-render 과정을 진행하는 방법을 사용한다.
Nuxt는 내가 설정한 SEO tag와 함께 서버에 생성함으로서 라우팅 기능을 향상시킨다.
Nuxt : Meta Tags and SEO
6. 초기 로딩 속도가 느리다
Nuxt에서는 페이지를 universally 혹은 statically 하게 렌더링하면 pre-render된 HTML이 빠른 페이지의 로딩을 가능도록 하고 라우팅 기능을 위해 필요한 자바스크립트 코드만을 로드한다. 이를 통해 더 나은 UX를 가능하게 한다.
7. 프레임워크의 기본 동작의 변경이 어렵다
Nuxt에서는 moudle system의 제공을 통해 개발자의 필요로 인한 동작, 구조의 변경을 가능하게 한다.
업무를 위해 코드를 보다 보니 생소한 개념들이 너무 많아서 이렇게 정리를 하게 되었다.
배경 지식이 없는 상태에서 코드를 봤을 때는 이해하기가 정말 어려웠는데 이렇게 Nuxt의 장점 및 Vue의 개선 사항들을 알다 보니 이제야 코드가 왜 그런 구조로 짜여있는지, 특정 파일들은 어떤 용도를 위한 파일인지 파악되기 시작했다.
빨리 Nuxt도 공부하고 TS도 공부하고 싶다!
