vue3 프로젝트 회고

회사에서 vue3로 프로젝트를 진행했다. 좀더 상세하게는 vite + vue3 + typescript + vue-route + pinia 정도 랄까? 먼저 vue3로 개발하는 것은 기존에 jsp + jquery 나 기타 view템플릿엔진(서버단) + jquery 를 이용해서 개발하는 것에 비해 자바스크립트를 잘 알고 있는 개발자라면 러닝커브가 엄청 낮았다. 어쩌면 내가 고급 기능들을 개발하지 않아서 일 수도 있지만(vue 가이드의 어려운 기능들은 사용할 필요가 없는 프로젝트 였고 어쩌면 내가 적용할 부분을 잘 모르는 상태 일 수도 있다.) 자바스크립트 and typescript 에서 선언된 값을 html 안에서 직접 사용하는 경험은 너무 직관적이었고 소스를 단순하게 만들어 줬다.

<script setup lang="ts">
import { ref } from vue
const name = ref("베트맨");
</script>
<template>
<div>{{name}}</div>
</template>
<style scoped>
...
</style>

위 코드를 보면 ref등은 몰라도 돠고 name이라는 상수에 정의한 배트맨이라는 이름을 아래 html 영역에 그냥 넣어주면 화면에 배트맨이 출력된다. 얼마나 아름다운지!

vuex대신에 pinia를 잘썼다.

vuex는 여러 강의에서 사용하는 법이나 문서에서 사용하는 법을 봐서 어떻게 사용하는지는 대강 알지만 실제로 프로젝트에는 Pinia를 적용하였다. 그냥 새로나온게 좋다. 에반유도 pinia를 쓰라고 어디선가 말한거 같다. 실제로 vuex보다 사용법이 비슷하지만 더 단순했다. 만족스러웠다.

setup을 잘썼다.

setup을 vue3의 방식이라고 생각한다. 처음에 말한것처럼 아름다운 코드가 나올려면 setup을 script에 속성으로 선언해야한다. 그럼으로써 vue2와 코딩방식이 약간 달라지는 부분들이 생기는데 쉬우니까 그냥 setup쓰면된다. 기존방식을 options api , 새로운방식을 composition api 라고 한다.

Typescript를 잘 썼다.

오류가 대폭 감소한다.(느낌이..) 일단 타입때문에 오류날 걱정이 없다. 린트에서 알려주는 부분들만 빨간줄이나 느낌표 안뜨게 잘 만들어주면 코드가 좋아진다. 인터페이스 정의하는걸 추천한다. (이건 무조건인가?)

공통util같은건 plugin으로 만들어라.

학습이 덜된상태에서 공통 부분을 정의해서 대충 js만들어서 컴포넌트마다 임포트해서 사용했는데, 이건 아닌거 같다. 아름답지가 않다. 아름답게 사용하려면 plugin으로 개발해보자.

컴포넌트로 만들수 있는건 다 만들어라.

서두에 말한것처럼 뷰가 아무리 좋다고 하지만, 파일이 점점 길어지면 복잡해지기 마련이다. 우리 프로젝트도 마찬가지였다. 그나마 나중에라도 컴포넌트화를 몇개 시키긴했는데, 이런걸 두고 알면서도 안했다고 해야할까? 분명 프로젝트 시작시점에서는 컴포넌트부터 정의하고 그걸기반으로 화면을 조립하자는 생각들을 가지고 있었는데 마지막에와선 좀.. 개판이었다. 오픈하고나서는 사실 고칠 엄두가 안난다. 그러니까 개발할때 똑바로 해라.

props와 emit을 주로 쓰고 expose는 될수 있으면 쓰지마라.

개인적으로 expose까지 쓰면 더 복잡해지는 느낌이었다. 내 숙련도의 문제일수도 있긴하지만…?

바닐라 스크립트를 지양해라.

웬만한건 npm검색해도 다 있고, vue의 기능으로 다 커버된다. 어쩔수 없는 경우를 제외하고는 바닐라 스크립트를 쓰지마라, 컴포넌트만 잘 설계하면 쓸일이 없을 수 있을꺼다.

스타일 설계를 잘해라.

우리 프로젝트는 모바일과 pc스타일이 별도로 적용되어야 해서 충돌해결하는데 시간을 많이 소요했다. 전역스타일과 지역 스타일로 적용할 것들을 잘 구분해서 설계를 하고 스타일의 스코프를 잘 이해하고 해라.

결론

오픈을 잘 하긴 했는데, 확실히 기존보다 사이트도 빠르고 코드도 더 깔끔해지고 좋아졌다. 그런데도 초반에 놓친것들때문에 더 좋아질수 있던것들이 아쉽다. 오픈하고나서 고치기에는 부담도 크고 (잘돌아가는 사이트를 고치는건 .. 그러다 잘못고치면..) 용기가 잘 나지 않는다. 그러니까 뭘하든 처음 설계가 중요하고 설계대로 구현하는게 중요하다라고 다시 한번 생각하게 된다.