예전에 스프링과 타임리프 조합을 사용해보면서부터 SSR와 CSR의 적절한 조합이 최적의 프로젝트 환경이라고 생각을 해왔고 나중에 기회가 된다면 SSR + CSR을 조합해서 써봐야겠다고 다짐다짐을 했엇더랬다.
그런데다 최근 node.js 만능설과 vue.js에 빠진 내가 nuxt.js를 선택하지 않는 것은 거의 불가능에 가까운 일이었다. 그리고 UI/UX 프레임워크로는 부트스트랩과 vuetify 를 비교하다가 부트스트랩이 vue와 잘 맞지 않는 부분이 있고 bootstrap-vue 프로젝트 자체가 업데이트가 더딘 것이 보여서 최종적으로 vuetify 를 선택하게 됐다.
vuetify 는 굉장히 업데이트가 잘 되고 있는 프로젝트로 보인다. 그리고 vue.js와 궁합도 당연히 최적화되어있고... 부트스트랩-vue는 퍼포먼스에 대해서도 느리다는 이슈 글을 인터넷에서 본적이 있다.
그래서 프로젝트 환경을 nuxt.js + vuetify 로 최종 결정하고 개발환경 설정을 진행하기로 했다. 먼저 기본적으로 node 설치가 되어있는 환경이어야 된다. (당연히 ) 혹시 설치되어있지 않다면 LTS 버전으로 설치하면 된다.
npm create nuxt-app [프로젝트명]
난
"npm create nuxt-app nuxt-vuetify-tmp"
로 임시성으로 하나 만들어봤다. 여러가지 프로젝트 환경에 대해서 물어보고 그에 대한 답을 아래와 같이 했다.
[nhj7:~/workspace]$ npm create nuxt-app nuxt-vuetify-tmp
create-nuxt-app v3.6.0
✨ Generating Nuxt.js project in nuxt-vuetify-tmp
? Project name: nuxt-vuetify-tmp
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Lint staged files, StyleLint, Commitlint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript), Semantic Pull Requests, Dependabot (For auto-updating dependencies, GitHub only)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? nhj12311
? Version control system: Git
Lint
lint 는 기본적으로 다 적용을 했는데 pretieer는 vscode에 format document 기능과 맞지 않아서 빼버렸다. 종종 다른 코드들을 복붙해서 넣고 vscode에 format document로 정렬을 하면 프리티어랑 충돌이 난다. 이거 헷지 방법을 찾을 때까진 사용하지 않으려고 한다.
TypeScript vs Javascript
개인적인 선택이다. 대규모, 엔터프라이즈급 어플리케이션이라면 타입스크립트를 사용해야하는 것에 좋다라고 생각을 하지만 개인적인 소규모 프로젝트라서 편하게 작업할 수 있는 자바스크립트를 선택했다. 거기다... 개인적으로 타입스크립트를 잘 사용할줄 모른다.
Testing framework : Jest
사실 테스팅 프레임워크는 뭐가 좋은지 몰라서 깃허브 별이 제일 많은걸 골랐다. npm 트렌드 사이트에서 사용량이 가장 높기도 하고. 개인적으로 잘 모르면 한번 검색해보고 npm 트렌드에서 사용량이 높은것을 왠만하면 선택한다. ( 집단지성의 힘을 믿어보자. )
spa
vue.js를 사용하는 프로젝트이니만큼 spa로 동작하는 것을 선택했고...
CI는 깃헙 액션
ci는 깃허브 액션을 사용하려고 한다. 깃허브에 커밋 때리면 배포가 되면 된다. 깃랩으로 연동해볼까도 했지만 내 대부분의 프로젝트들이 깃허브에 올라가있기 때문에 깃허브를 유지하기로 했다. 프로젝트를 감출만한 시기가 되면 private로 돌리면 된다.
다 설정하고 나면 필수 라이브러리들이 자동 설치 되면서 기본 세팅까지 해준다. (개발환경 설정이 점점 쉬워지고 있다...)
🎉 Successfully created project nuxt-vuetify-tmp
To get started:
cd nuxt-vuetify-tmp
npm run dev
To build & start for production:
cd nuxt-vuetify-tmp
npm run build
npm run start
To test:
cd nuxt-vuetify-tmp
npm run test
하라는데로 프로젝트 폴더로 이동해서 개발 모드로 실행했다.
[nhj7:~/workspace]$ cd nuxt-vuetify-tmp
[nhj7:~/workspace/nuxt-vuetify-tmp]$ npm run dev (master✱)
> nuxt-vuetify-tmp@1.0.0 dev /Users/nhj7/workspace/nuxt-vuetify-tmp
> nuxt
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.3 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: client-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
ℹ Preparing project for development 09:58:07
ℹ Initial build may take a while 09:58:07
ℹ Discovered Components: .nuxt/components/readme.md 09:58:07
✔ Builder initialized 09:58:07
✔ Nuxt files generated 09:58:07
✔ Client
Compiled successfully in 7.22s
ℹ Waiting for file changes 09:58:16
ℹ Memory usage: 335 MB (RSS: 468 MB) 09:58:16
ℹ Listening on: http://localhost:3000/
바로 기본 세팅된 vuetify + nuxt.js 환경을 볼 수 있었다.
참고자료로 라이프 사이클에 대한 것들도 정리해본다.
ko.nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle/
Nuxt Lifecycle
No matter which tool you use, you will always feel more confident when you understand how the tool works under the hood. The same applies to Nuxt.js.
ko.nuxtjs.org
nuxt.js lifecycle hooks 라고 nuxt.js 동작 라이프사이클에 대한 도표인데 틈틈히 봐야겠다.
ko.nuxtjs.org/docs/2.x/concepts/context-helpers/
Context and Helpers
The context provides *additional* and often optional information about the current request to the application.
ko.nuxtjs.org
'dev > node.js' 카테고리의 다른 글
| node.js : self signed certificate in certificate chain 해결방법 (0) | 2022.04.26 |
|---|---|
| 형태소 분석(node.js, mecab) (0) | 2021.07.10 |
| These dependencies were not found - tls, net in ./node_modules/.../...js (0) | 2021.05.10 |
| node 스케줄러 - cron vs node-cron vs node-schedule 비교 (0) | 2021.03.06 |
| 헤로쿠(heroku) don't sleep, 잠들지마~(with node-cron) (3) | 2021.01.13 |
| 헤로쿠(heroku) 가입부터 node.js 배포까지 (5) | 2021.01.13 |
| vscode node.js 실행(launch.json 및 env 설정) (0) | 2020.04.25 |
| Nodejs 8+ Cannot debug JavaScript via Nodeclipse (Failed to connect to Standalone V8 VM) (2) | 2020.01.03 |
