Setting Guide

[Vue.js] Nuxt.js - 설치하기

Bittersweet- 2022. 2. 14. 12:31
728x90

특징

  1. 자동 변환 및 번들링 (웹팩 및 바벨 포함)
  2. 코드 Hot reload
  3. SSR, SPA, 정적 생성 선택 가능
  4. 정적 파일 제공 (./static/은 /에 매핑됩니다)
  5. nuxt.config.js 파일로 구성 가능
  6. 사용자 정의 레이아웃 (layouts/ 디렉토리 )
  7. 미들웨어 제공
  8. 모든 페이지에 대한 코드 분할
  9. 중요한 CSS 만로드 (페이지 수준)
  10. 전 처리기 지원 : SASS, LESS, Stylus 등
  11. <head> 요소 관리 (<title>, <meta>, 기타)
  12. ES2015+ 지원

전제조건

  1. Node - 최소 v10.13 최신 LTS 버전
  2. 텍스트 편집기 - VS Code(Vuter 확장) 또는 WebStorm
  3. 터미널 - VS Code의 통합 터미널 또는 WebStorm 터미널

 

1-1. Create Project command

npx create-nuxt-app <project-name>

or

npm init nuxt-app@latest <project-name>

 

 

1-2. Set Project

# 프로젝트명 입력

? Project name: (project-name)

# 프로그래밍 언어 선택

? Programming language: (Use arrow keys)
> JavaScript
  TypeScript

# 패키지 매니저 선택

? Package manager: (Use arrow keys)
> Yarn
  Npm

# UI 프레임워크 선택

? UI framework: (Use arrow keys)
> None
  Ant Design Vue
  BulmaUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js
  Oruga

# Nuxt 모듈 선택

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> Axios - Promise based HTTP client
  Progressive Web App(PWA)
  Content - Git-based headless CMS

    Axios - Promise based HTTP client

      DB - API Server - Client 의 구조로  HTTP를 통한 서버와의 방식을 위한 모듈

      Axios를 이용해서 request를 만들어 사용함

 

    Progressive Web App (PWA)

      PWA를 구성하는 기술을 사용할 수 있는 모듈

      - Web App Manifest : PWA에 대한 정보를 담아 Native App 같은 서비스 제공

      - Service Worker : 오프라인 캐싱

      - Push Notification :  푸시 알림

        참고.

        우리가 흔히 스마트폰에서 URL 주소로 볼 수 있는 모바일 웹사이트를 Web App(웹 앱)이라고 하고 스마트 폰에 설치해서 사용하는 애플리케이션 형태   를 Native App(네이티브 앱)이라고 한다

        이 둘의 장점을 합쳐 Web 같은 Native App을 Hybrid App(하이브리드 앱)이라고 하며, Native 같은 Web App을 PWA(프로그레시브 웹 앱)이라고 한다.

 

    Content - Git-based headless CMS

      Git으로 글과 이미지들을 관리하고 배포하는 컨텐츠 관리 시스템(Content Management System)으로 프로젝트 내에서 글과 이미지를 관리하도록 함

      Markdown, JSON, YAML, XML와 CSV 파일들을 작성하고 MongoDB와 같은 방식으로 불러옴

#  Linting 도구 선택

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> ESLint
  Prettier
  Lint staged files
  StyleLint
  Commitlint

# 테스트 프레임워크 선택

? Testing framework: (Use arrow keys)
> None
  Jest
  AVA
  WebdriverIO
  Nightwatch

# 렌더링 모드 선택 (SSR/SPA)

? Rendering mode: (Use arrow keys)
> Universal (SSR/SSG)
  Single Page App

 

# 배포 대상 선택 (서버 호스팅/정적 호스팅)

? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
  Static (Static/JAMStack hosting)

    Server

      Server를 선택할 경우, Deploy 시에 Node.js 서버를 미들웨어 역할로 띄워서 호스팅을 해준다.

      빌드한 결과물을 살펴보면, 미들웨어 서버(Node.js)에서 일종의 처리가  필요한 듯 해보이는데 Apach나 NginX 서버에서 올리려면 따로 서버측에서 세팅이 필요하다.

 

    Static

      Static을 선택하게 된다면 완전히 완성된 정적 페이지가 떨어지게 된다.

      Static 파일을 만들어서 떨어뜨리므로, SSR이 아니라 서버 부하가 줄어들고 저사양 기기 혹은 불안정한 네트워크 상황에서 유리하다.

      Backend Infra 구조가 일반적인 Apach나 NginX로 서빙만 해줄거라면 선택해주는 것이 좋다.

 

# 개발도구 선택

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> jsconfig.json (Recommended for VS Code if you're not using typescript)
  Semantic Pull Requests
  Dependabot (For auto-updating dependencies, GitHub only)

개발 편이성을 위한 절대 경로 설정을 위해 필요한 Tool로

jsconfig.json - VSCode

Semantic Pull Requests - git Action

Dependabot - git의 plugin으로 사용 가능

# GitHub 사용자명 입력

? What is your GitHub username? (username)

 

# 버전 관리 시스템 선택

? Version control system: (Use arrow keys)
> Git
  None

 

# 개발용 실행

npm run dev

 

# 빌드용 배포용 실행

npm run build
npm run start

 

# 개발서버 Host/Port 변경

개발 서버는 기본 localhost와 Port는 3000으로 잡혀져 있지만, 해당값을 변경하는 방법에는 몇가지 방법이 있다.

가장 보편적인 방법은 package.json을 수정하는 방법이 있다.

{
  "scripts": {
    "dev": "nuxt --hostname <host> --port <port>"
  }
}

# Nuxt.js Module

API 통신을 위한 Axios 설치와 로컬 환경에서 CORS문제를 해결하여 개발하기 위해 proxy를 설치한다. (plugins을 통해 설치할 수 있다)

npm으로 설치

npm i @nuxtjs/axios
npm i @nuxtjs/proxy

nuxt.config.js 파일에서 설치된 모듈을 import 해준다.

module.exports = {
  modules: ["@nuxtjs/axios"],
  axios: {
    proxy: true, // proxy 사용
  },
  proxy: {
    "/prefix-url": "proxy-url", // proxy url
  },
};

위에 보이는 것처럼 proxy 옵션에 url-prefix를 지정하게 되면 /prefix-url로 시작되는 API는 모두 proxy-url로 프록시된다.

이렇게되면 Axois의 사용이 가능하며 proxy까지 연동이 된다.

 

 

참고

https://github.com/nuxt/create-nuxt-app/blob/master/README.md

https://kdydesign.github.io/2019/04/10/nuxtjs-tutorial/

'Setting Guide' 카테고리의 다른 글

[Vuejs] TypeScript 추가 & 설정  (0) 2022.03.31
[Vue.js] Nuxt.js - 기본 프로젝트 구조  (0) 2022.02.17
[Vuejs] fontawesome 사용하기(npm)  (0) 2022.01.25
[가이드] code Formatter(ESLint,Prettier 설정)  (0) 2022.01.21
[가이드] Vue CLI 사용  (0) 2022.01.21

'Setting Guide'의 다른글

  • 현재글[Vue.js] Nuxt.js - 설치하기

관련글

댓글

티스토리툴바