[Vue.js] Side Project Tools 만들기 (4)

미니

 

---

Vue => Nuxt

Vue에서 Nuxt로 마이그레이션을 진행했다.

그러한 이유를 설명하겠다.

 

1.  초기 렌더링

이 프로젝트는 여러가지 툴들을 다루는 어플리케이션이다.

초기에 모든 툴들의 리소스를 가져오면 초기 렌더링 시간이 너무 오래걸린다.

사용자가 필요로 한 툴의 데이터만 가져오면 되기 때문에 CSR 방식은 부적합하다.

 

2. SEO 

여러가지 툴들이 사용되기 때문에 각각의 툴에 맞는 meta가 필요하다.

Vue에서도 meta를 지원하지만 내가 원하는 것은 각 페이지마다의 meta가 필요하기 때문에 SPA방식은 부적합하다.

 

이러한 이유로 Nuxt3로 마이그레이션을 진행하였다.

 

마이그레이션을 진행하면서, 기존의 Option API로 짜여진 로직을 Composition API로 리팩토링 하였고,

상태관리 라이브러리는 Vuex => Pinia로 변경하였다.

nuxt3에선 라우팅기능을 파일기반으로 사용하기 때문에 라우팅을 따로 import 하여 사용하지 않아도 된다.

---

마이그레이션을 진행하면서 Pinia가 Vuex를 사용했을때보다 훨씬 직관적이고 간단했다.

Pinia의 장점을 잠시 살펴보자.

1. TypeScript

Vuex와는 다르게 Pinia는 TypeScipt를 지원해준다. 

2. 간단한 API

mutations가 없어지면서 actions로 전부 해결 할 수 있었고, 또한 state를 바로바로 업데이트 할 수 있어 직관적이었다.

3. 스토어 모듈화

Vuex는 하나의 큰 Store를 제공한다. 근데 만약 여러 컴포넌트에서 Store에서 필요로 하는 것들을 작성하게 된다면

Store는 엄청 복잡해질 것이다.

그렇기 때문에  Namespace를 true로 하여, 메인 Store에서 moudles에 추가하는 식으로 사용된다.

Pinia는 더욱 간단하게 파일명으로 모듈화가 가능해 더욱 편리하다.

왜 Vue에서 공식적으로 Pinia사용을 추천하는지 알 것 같다.

현재 툴에서는 뽑기 기능, 또한 게임기능을 추가하고있다. 킬링타임용으로 사용하면 좋으니 방문해주시면 감사하겠습니다.

https://mini-mate-s.vercel.app/

홈 페이지 - 미니기여어