Skill/Programming - Server & Client

11.[Nuxt.js] 개념 및 소개

gyulee0220 2020. 1. 19. 16:23



1. Nuxt.js란?


Nuxt.js는 Vue.js 애플리케이션 개발을 보다 강력하고 사용하기 쉽게 만들어 주는 프레임워크이다. 우리는 앞서 Vue.js가 어떻게 구성되고 웹 어플리케이션으로 만들어 지는지 확인해보았다. 이후 개발자들은 조금 더 빠른 개발 속도를 위해 Vue.js를 빠르게 적용하는 방법을 고안했고, 이를 프레임워크로 만들었다.


Nuxt.js 개발자들이 소개하고 있는 Nuxt.js의 목표는 다음과 같다.


  • Nuxt.js의 주요 범위는 클라이언트/서버 배포를 추상화 하는 동안의 UI Rendering이다.
  • Node.js 기반의 프로젝트 혹은 기본 프로젝트 베이스로 사용할 수 있을 만큼의 유연한 프레임워크를 만드는 것이다.
  • Nuxt.js는 Vue.js 애플리케이션 서버 렌더링을 보다 즐겁게 개발하는데 필요한 구성 요소들을 미리 설정한다.
  • nuxt generate라고 부르는 배포 옵션을 제공하고 Vue.js 애플리케이션을 정적으로 생성할 수 있다.


- Nuxt.js의 특징


  • Vue 파일 사용
  • 코드 분할 자동화
  • 서버 사이드 렌더링
  • 비동기 데이터 기반의 강력한 라우팅 시스템
  • 정적 파일 전송
  • ES2015+ 지원
  • JS & CSS 코드 번들링 및 압축
  • <head> 요소 관리 (<title>, <meta>, 기타)
  • 개발 중 Hot module 대체
  • 전 처리기 지원 : SASS, LESS, Stylus 등



2. Nuxt.js 설치


  Nuxt.js는 프레임워크이기 때문에 미리 개발 환경 세팅을 위한 설치가 필수적이다. 비슷한 개념으로 Spring Framework와 React.js를 생각하면 편할 것이다. nuxt 프레임워크를 사용하기 위해 우선 패키지를 만들고 해당 패키지에 Nuxt 프레임워크 사용을 알려야한다. 


- Yarn 패키지 설치


  Nuxt.js를 설치하는 가장 보편적인 방법은 Yarn 패키지를 활용하는 것이다.


1
$ npm i -g yarn
cs



- 패키지에 Nuxt 스캐폴딩


  자신이 만들려는 패키지에 nuxt를 스캐폴딩해준다. create nuxt-app 명령어와 디렉토리 주소를 선언하면 간단히 완료할 수 있다.


1
$ yarn create nuxt-app </Directory>
cs


  명령어를 수행하게 되면 프로젝트를 만드는데 필요한 간단한 정보를 입력하라는 메세지를 확인할 수 있다. 프로젝트를 위해 아래의 질문에 작성을 해준다.


1
2
3
4
5
6
7
8
9
10
? Project name {프로젝트 이름}
? Project description My epic {프로젝트 설명}
? Use a custom server framework {사용할 프레임워크 선택}
? Use a custom UI framework {사용할 UI 프레임워크 선택}
? Choose rendering mode {렌더링 모드(SPA / Universal) 선택}
? Use axios module {Axios 모듈 사용 유무 선택}
? Use eslint {ESLint 사용 유무 선택}
? Use prettier {Prettier 사용 유무 선택}
? Author name {제작자 이름}
? Choose a package manager {사용할 패키지 매니저(yarn, npm) 선택}
cs


- 개발 서버 구동


  패키지 설치가 완료되면 이제 개발 서버를 구동해준다. 서버 구동 방법은 다음과 같다.


1
2
3
4
5
$ cd </Directory>
 
$ yarn dev
 
READY  Server listening on http://127.0.0.1:3000
cs


  이와 같은 방식으로 개발 서버를 만들 수 있고, 정상적으로 성공했다면 로컬호스트에 다음과 같은 화면이 뜨게 될 것이다.



그리고 웹 페이지를 만들기 위해서 다음과 같은 Vue기반의 HTML을 작성하면, 아래의 웹 페이지를 볼 수 있다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="container">
    <header>
      <h1 class="title"> {{ title }} </h1>
      <img src="https://miro.medium.com/max/750/1*NTGKGfvCt9bX_S8qqCBgBQ.png"></img>
      <nav>
        <nuxt-link to="/services"> Hello world </nuxt-link>
      </nav>
    </header>
  </div>
</template>
 
<script>
export default {
  data () {
    return  {
      title: 'Nuxt.js를 활용한 서버 사이드 렌더링'
    }
  }
}
</script>
cs




저작자표시 동일조건