1. Nuxt.js - 설치하기

Nuxt.js - 설치하기

1. Mac 에 설치

공식문서에 따르면 크게 두가지 방식이 있는 것으로 보입니다.

1. create-nuxt-app을 이용하여 project 구조를 미리 잡아 놓고 시작.
2. package.json 부터 완전 밑바닥 부터 세팅.

본인은 1번 방식으로 구성을 시작해볼까 합니다. 1번 방식 경우 webpack, webpack-dev-server, lint, test tool, git init, CI(github), UI framework 등 여러가지를 미리 세팅해줘서 유용할 듯 합니다.

1-1: Create Project Command

yarn을 사용하셔도 좋지만 전 npm으로 사용하였습니다

npm init nuxt-app@latest <project name> 

<project name> 부분에 원하시는 프로젝트 이름을 기입하셔서 원하시는 경로에서 터미널을 열어 입력하시면 됩니다.

위 명령어를 입력하시고 나면 생각보다 선택을 해야할 게 많습니다. 차근차근 살펴보도록 하죠.

1-2: Set Project

Write Project Name

? Project name: (test)

이정도는 생략합니다 ㅋㅋ

Select Project Programming Language

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

javascript와 typescript 중 선택할 수 있습니다.
테스트 프로젝트여서 굳이 typescript를 쓸 필요가 없을 것 같아 js를 이용하도록 하겠습니다.

Select Package manager

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

package manager를 결정해주시면 됩니다. 전 npm이 익숙하므로 default를 무시하도록 합니다 ㅎ..

Select UI Framework

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

Vue.js 기반이다 보니 Vue.js 에서 사용가능한 UI framework들을 사용할 수 있습니다.
(익숙한 Vuetify.js가 보이지만 test 프로젝트에 예쁜 UI는 필요없으니 None 을 선택합니다)

Select Nuxt.js modules

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를 자주 만들어서 사용하니, default module로 Axios를 설치해주는 듯 합니다.
• Progressive Web App (PWA)
  • PWA라 불리는 방식을 선택하면 아마 web app에서 사용가능한 기능들(ex camera, push notification)을 내장한 라이브러리를 제공해주지 않을까 추측해봅니다.(추측)
  • 아직 선택을 안해봐서 자세히는 모르지만, 선택해보고 설치되는 모듈을 비교해봐야 정확히 기술할 수 있을 듯 합니다.
• Content - Git-based headless CMS
  • 아마 git 기반의 hosting을 통한 정적 웹사이트를 만들 수 있는 방식의 라이브러리를 제공하지 않을까 합니다. (추측)
  • 아직 선택을 안해봐서 자세히는 모르지만, 선택해보고 설치되는 모듈을 비교해봐야 정확히 기술할 수 있을 듯 합니다.

이것 저것 조사해본 결과, 가장 현업에서 많이 쓰는 방식인 Axios 방식을 선택하는게 저한테 제일 맞을 것 같아서 Axios 방식을 선택했습니다.

Select Linting Tool

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

일반적으로 많이들 사용한 Lint tool을 선택하는 단계입니다. 본인은 ESLint를 현업에서 사용하고 있어서 ESLint로 선ㅌ개하였습니다.

Select Testing framework

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

Testing Framework를 선택하는 단계 입니다. 원래 Test Project라서 None을 선택하려다가 이참에 Test tool도 공부해보고자 Jest를 선택해 보았습니다.

Select Rendring Mode

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

이걸 선택하는 란이 조금 의아했는데, Nuxt를 사용하는 이유가 Universal (SSR / SSG) 방식으로 개발을 하기 위해서인데 Single Page App 을 선택가능하게끔 한 이유가 약간 궁금하긴 했습니다. 그래서 SSR 방식의 Web을 만들고 테스트해볼 것이기 때문에 Universal 방식을 선택하였습니다. (시간이 난다면 SPA 방식으로 선택을 해도 SEO가 잘 적용될 수 있는지에대한 체크가 필요할 것 같습니다)

Select Deployment target

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

쉽게 생각한다면, 웹사이트의 정적 버전을 생성할 것인가, 아닌가를 결정하는 단계입니다.

• Static
  • Static을 선택하게 된다면 완전히 완성된 정적페이지가 떨어지게 됩니다.
  • Static 파일을 만들어서 떨어뜨리므로, SSR이 아니라 서버 부하가 줄어들고 저사양 기기 혹은 불안정한 네트워크 상황에서 유리합니다.
  • BackEnd Infra구조가 일반적인 Apache 서버나 NginX로 서빙만 해줄 거라면 위 방식으로 해야하는게 맞지 않을까 합니다.
• Server
  • Server를 선택할 경우 Deploy시에 Node js서버를 중간에 미들웨어 역할로 띄워서 호스팅을 해주는 것으로 보입니다.
  • 빌드한 결과물을 살펴보면, 미들웨어 서버(Nodejs)에서 일종의 처리가 필요한듯 해보입니다. Apache나 NginX 서버에서 올리려면 따로 서버측에서 세팅이 필요할듯 해 보입니다.

위 옵션 들의 정확한 차이를 알기 위해 두개 다 선택해서 프로젝트 생성 및 빌드까지 모두 해보았습니다. 자신이 구성하고 있는 BackEnd Infra에 맞게끔 선택해서 사용하시면 될 듯합니다.

Select Development Tools

? 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, Sematic Pull Requests는 git Action을 이용하고, Dependabot은 git의 plugin으로 사용가능 합니다.

테스트 프로젝트인점을 감안하여, Default 설정으로 선택하였습니다.

Select Continuous Integration

? Continuous integration: (Use arrow keys)
❯ None 
  GitHub Actions (GitHub only) 

Create 단계에서 CI를 지원해주는 설정은 Github 밖에 없는 듯 해보입니다. 당장은 필요 없어서 None을 선택하였습니다.

Select VCS?

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

설명을 생략하도록 합니다

위의 선택들을 모두 마치고나면 package 설치 후, 드디어 개발에 들어갈 수 있습니다.

2. 기본 디렉토리 구성

본격적인 개발에 들어가기에 앞서 프로젝트의 디렉토리 구조에 관해서만 짚어보고 가보겠습니다.

├── assets
├── components
├── layouts
├── middleware
├── pages
├── plugins
├── static
├── store
└── test

위는 test proejct의 폴더의 2계층까지의 폴더만 출력한 모습이다. (node_modules 제외)
Vue.js의 구조와 생각보다 비슷한 모습을 많이 보이는데, layouts, middleware, pages, plugins, static 정도는 새로운 폴더인듯 해보입니다. 각각의 폴더안에 들어가면 README.md 파일에 잘 설명되어 있습니다.

1. layouts > README.md

# LAYOUTS

**This directory is not required, you can delete it if you don't want to use it.**

This directory contains your Application Layouts.

More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

Layout은 header, sidebar, footer 처럼 페이지에서 공통적으로 사용되는 영역을 정의해두는 기능으로써, 특정 UI영역 뿐만 아니라 HTTP Request Error 에도 사용하는 것으로 보입니다. 이 부분은 따로 섹션을 빼서 공부를 해야될 것 같습니다.

2. middleware > README.md

# MIDDLEWARE

**This directory is not required, you can delete it if you don't want to use it.**

This directory contains your application middleware.
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.

More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

readme에 적혀있는 그대로 특정 페이지 혹은 페이지 그룹에서 rendering 이전에 모종의 처리를 해주는 함수들을 정의해주는 부분인듯해 보입니다. 상당히 유용할듯 한데 middleware 역시 따로 섹션을 빼서 공부를 해야될 것 같습니다.

3. pages > README.md

# PAGES

This directory contains your Application Views and Routes.
The framework reads all the `*.vue` files inside this directory and creates the router of your application.

More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

링크로 걸려있는 문서에 들어가보면, 라우팅에 관련된 이야기들이 나오는걸로 보아 각각의 단일 페이지들에 대한 구조와 기본적인 템플릿을 정의해주는 부분이라고 생각이 됩니다.

4. plugins > README.md

# PLUGINS

**This directory is not required, you can delete it if you don't want to use it.**

This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.

More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

README.md에 적혀있는대로 root Component가 마운팅 되기전에 플러그인들을 정의해주는 폴더인 듯 해보입니다.

5. static > README.md

# STATIC

**This directory is not required, you can delete it if you don't want to use it.**

This directory contains your static files.
Each file inside this directory is mapped to `/`.
Thus you'd want to delete this README.md before deploying to production.

Example: `/static/robots.txt` is mapped as `/robots.txt`.

More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

README.md에 적혀있는 robots.txt를 봤을 때 거의 사용할일이 없어보이지만, constant 변수들 선언에 사용될 가능성도 어느정도 있어보이는 폴더입니다. 자세한건 nuxt로 만들어진 오픈 소스 웹 페이지를 좀 탐구를 해봐야할듯 하네요.

정리

생각보다 프로젝트 세팅에 공부해야할게 많았습니다. 선택할 수 있는 옵션이 많은 만큼 프로젝트 생성 시에 만들고자하는 서비스와, BackEnd 구조를 잘 파악해서 적합한 옵션들을 선택할 수 있도록 해야할 듯 합니다. 역시 개발환경세팅이 개발의 반이라는 이야기는 과언이 아닌걸로.. ㅎㅎ