Nuxt.JS는 무엇인가? 왜 배워야 하는가에 관하여

소개

현재 Nuxt.js를 사용해서 근무를 하고있습니다.

원래 첫 회사에서도 Vue.js를 사용했기 때문에 Nuxt.js는 익숙한 구조와 문법 등 Vue.js 기반으로 제공되는 프레임워크이기 때문에

좀 더 공부한다면 익숙하게 사용할 수 있을 것 같습니다.

Nuxt는 Vue.js로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크입니다. 웹 애플리케이션을 제작할 때 필요한 Vuex, Router,Axios와 같은 라이브러리들을 미리 구성하여 싱글 페이지 애플리케이션(Single Page Application), 서버 사이드 렌더링(SSR), 정적 웹 사이트(Static Generated Website)를 쉽게 제작이 가능합니다.

TIP

서버 사이드 렌더링(Server Side Rendering)이란 웹 페이지의 내용을 서버에서 모두 작성해서 클라이언트(브라우저)로 보낸 뒤 화면에 그리는 방식을 의미합니다.

Nuxt.JS 배워야하는 이유

왜 Nuxt.JS를 배워야 하는지에 대해 작성하려고 합니다.

Vue.js를 사용해봤다면 Nuxt.JS는 더 편하게 느껴집니다. 아무래도 Vue.js를 더 잘 쓰고싶다면 Nuxt.JS를 추천합니다.

Nuxt.JS는 Server Side Rendering (SSR) 서버 사이드 랜더링 프레임워크입니다. Vue.js로 서버 사이드 랜더링 기술을 구현할 때 가장 많이씁니다.

실무자들에게 가장 큰 고민인 빠른 페이지 로딩 속도와 성능 최적화 해답을 제시하고 있습니다.

그리고 내가 만든 사이트를 더 많은 사용자들에게 전달할 수 있도록 SEO와 사이트 정보 전달 측면에서도 강점을 지니고 있습니다.

Nuxt로 개발했을 때의 장점은 아래와 같습니다.

• 검색 엔진 최적화
• 초기 프로젝트 설정 비용 감소와 생산성 향상
  • ESLint, Prettier
  • 라우터, 스토어 등의 라이브러리 설치 및 설정 파일 필요로 하지 않습니다.
  • 파일 기반의 라우팅 방식이며 설정 파일을 자동으로 생성합니다.
• 페이지 로딩 속도와 사용자 경험이 향상
  • 브라우저가 하는 일을 서버에 나눠줍니다.
  • 모르면 지나칠 수 있는 코드 스플리팅이 기본으로 설정 되어있습니다.

그 밖에 Nuxt 특징

• 서버 사이드 렌더링
• 규격화된 프로젝트 폴더 구조(layout, store, middleware, plugins 등)
• pages 폴더 기반으로 라우팅이 자동 설정됩니다.
• 코드 스플리팅
• 비동기 데이터 요청 속성
• ES6/ES6+ 변환
• 웹팩을 비롯한 기타 설정

NUXT 시작은 아래 링크 포스팅으로 넘깁니다.

Nuxt 시작하기