티스토리 뷰

Dev/Vue.js

#7. Vue.js + nuxt.js

야훔 2019. 3. 22. 10:33

Nuxt.js 소개페이지에 가보면 Nuxt.js 는 Vue.js 어플리케이션을 개발할 수 있는 라이브러리라고 소개되고 있다.


이 Nuxt.js는 Vue-CLI 와 Webpack 그리고, Babel 이 섞여서 탄생한 SPA(Single Page Application) 라이브러리라고 생각하면 되겠다.


뭔가 설치를 하고 서버를 돌려 개발 내용을 확인하는 그 일련의 과정들이 Angular 마냥 자동화처리가 잘 되어있다.

그리고 내가 Nuxt.js를 살펴보면서 좋았던 부분은 서버사이드 랜더링 기능을 제공해준다는 것이다.

이 기능은 SPA에서 필연적으로 발생하는 이슈인 사이트 각 페이지마다 변경되어야하는 메타데이터, 뷰랜더링을 미리 서버 사이드 수준에서 미리 랜더링하여 크롤러가 페이지를 수집하기에 적합한 컨텐츠를 제공해주는 SSR 기능을 기본적으로 제공하고 있다.


그래서 Nuxt.js를 활용한 홈페이지 만들기를 한번 해볼까 한다.


오늘은 그 첫번째로 Nuxt.js를 이용한 개발환경을 만드는 시간을 가져보겠다.


일단 포스팅을 진행하기전에 Vue-CLI를 모두들 설치했다는 가정하에서 진행하겠다. 잘 모르겠다는 사람은 다음의 링크를 타고 다녀온 다음에 진행하기를 바란다.

(#6. Vue CLI를 이용한 개발환경)


Vue-CLI + Nuxt Starter Template

명령 프롬프트(혹은 터미널)을 열어서 적당한 디렉토리로 이동한 다음에 아래와 같이 입력하자

vue init nuxt-community/starter-template nuxt_sample


이렇게 입력을 하고 엔터를 치면 아래와 같이 깃허브에 있는 nuxt-community의 starter-template를 다운로드 하기 시작한다.


그리고 몇가지 옵션들을 물어보기 시작하는데 일단 나는 전부 기본 옵션으로 진행했다.



빨강 사각형으로 표시된 명령들을 차례로 실행하면 Nuxt.js 환경구성은 끝난다.






설치가 완료되면 위와 같은 화면이 등장한다. 뭔가 간지가 나긴한다.


그리고 이 상황에서 "npm run dev" 명령을 입력하면 SSR 기능이 동작하면서 서버 배포와 클라이언트 배표를 수행하게 된다.



이 작업이 마무리되었으면 브라우저를 켜고 localhost:3000 으로 접속해보자.




이 화면을 봤다면 일단 Nuxt.js를 이용한 기본 개발환경은 준비가 되었다고 생각하면 된다.


이제 Router에 대한 이야기를 차례로 진행해보겠다.

안녕!


P.S : Nuxt.js에 대한 더 자세한 이야기를 보고 싶다면 링크를 따라가길 바란다. 한글화가 잘 되어있어서 읽기도 편하다.(https://ko.nuxtjs.org/guide)

댓글
댓글쓰기 폼