Vue 프로젝트 투입 하루 전 읽어볼 글

필자는 여태까지 계속 React만 써오다가 인턴을 하게 되면서 처음으로 Vue와 Nuxt를 접하게 되었다.

 

기존 회사의 서비스가 Vue2 + Nuxt2로 작성되어 있어서 Vue3 + Nuxt3로 마이그레이션을 하는 일을 받게 되었는데, Vue에 대한 개념도 없어서 삽질을 많이 했다.

그래서 나처럼 모종의 이유로 React에서 Vue3나 Nuxt3를 처음 사용하게 될 사람들을 위해 도움이 될법한 글을 써보려고 한다.

---

 

공식문서 읽어보기

우선 Vue와 Nuxt를 다루게 된다면, 모르는 것이 생길때 마다 구글링해서 블로그를 찾아보는 것 보단 공식문서 내에서 찾아보고 정독해보는 것을 추천한다.

왜냐하면 대부분이 Nuxt2와 같이 이전의 문법으로 적힌 문서들이 많았고 Vue는 Options API와 Composition API 두 방식을 지원하기 때문에 어떤 방식을 사용해서 코드를 작성해야 할지 헷갈렸다. 또한 Nuxt2나 Vue2에서만 지원되는 라이브러리일수도 있으니 꼭 공식문서를 확인해보자.

 

---

Vue의 장점

라이브러리 선택의 부담 감소

최근 React로 개발을 하려고 하면 어떤 라이브러리를 선택하는 것 부터 부담을 느끼게 된다. 하지만 Vue는 대표적인 라이브러리가 정해져 있는것 같아 개발을 시작하는데 있어 부담이 줄어드는 것 같았다.

Vue의 싱글 파일 컴포넌트

Vue는 싱글 파일 컴포넌트(Single-File Components: SFC, 일명 *.vue 파일)라고 하는 아래와 같은 구조의 파일 형식을 지원한다.

<script>
</script>

<template>
</template>

<style>
</style>

어쩌면 이러한 점이 React에 비하면 개발자들에게 있어 자유도가 낮다고 느껴질수도 있다. 하지만 기존의 HTML + CSS + JS 기반으로 개발하던 개발자들이 처음 프레임워크를 접할때에는 더 친근하게 느껴질 수도 있을 것 같다.

필자는 위와 같이 각 영역이 나눠져 있어서 JSX로 작성된 코드를 볼때보다 가독성이 높아 구조를 파악하기 쉬웠던 것 같다.

SFC에 대해서 더 알고싶다면 공식문서를 읽어보자.

유용한 템플릿 문법

Vue는 다양한 템플릿 문법들을 지원해 React보다 동일한 기능을 쉽게 만들수 있었다.

만약 사용자의 input 값을 바로 받아와 HTML에 바로 반영해서 보여주는 기능을 만든다고 해보자.

만약 이 기능을 React에서 구현한다면, onChange 이벤트를 통해 값을 바꾸고 useEffect나 다른 hook을 통해 값의 변화를 감지해 HTML에 반영해주어야 할 것이다.

하지만 Vue에서는 약간의 템플릿 문법과 v-model을 사용해 손쉽게 구현할 수 있다.

이는 Vue가 양방향 데이터 바인딩을 지원하기 때문인데 emit을 통해 자식이 부모의 데이터를 수정할 수 있다.

개발 방식의 통일성

React에서는 다양한 JSX문법들을 지원하는데 이는 개발자마다 같은 코드를 작성하더라도 다양한 방식으로 같은 기능을 구현할 수 있게 해준다. 아래 3가지 예시는 다 동일한 기능을 한다.

// 1. 3항 연산자 사용
return (
<>
  { isLoggedin ? <p>Welcome User</p> : " "}
</>
)

// 2. && 연산자 사용
return (
<>
  { isLoggedin && <p>Welcome User</p> }
</>
)

// 3. if-else 사용
const WelcomeComponent = (isLoggedin : boolean) => {
  if(isLoggedin) {
    return <p>Welcome User</p>;
  } else {
    return ""
  }
}

하지만 Vue에서는 v-if 템플릿 문법만 지원하여 보다 통일성 있는 개발이 가능하다.

<p v-if="isLoggedin"> WelCome User </p>
<p v-else></p>

이러한 점은 새로운 개발자가 프로젝트에 투입되어 코드를 분석할 때에도 큰 장점이 될 것이다.

 

---

React와 Vue의 비슷한 문법

엄연히 Vue와 React는 다르기 때문에 아래 개념이 1대 1로 같지는 않다.

하지만 그 중에서 비슷한 기능을 하는 문법들을 비교해 보자면 아래 내용들이 비슷할 것 같아서 작성해보았다.

ref와 useState

둘 다 데이터의 상태값을 정의하고 변경하기 위해 사용한다.

ref는 .value 속성을 통해 데이터에 접근하고 업데이트 한다. 반면, useState는 상태 업데이트 함수를 통해 상태를 간접적으로 업데이트한다.

// Vue ref
const name = ref("초기값")
name.value = "바뀔값"

// React useState
const [name, setName] = useState("초기값")

const nameHandler = () => {
 setCount("바뀔값");
}

watch와 useEffect

둘 다 특정한 값의 변화를 감지하고 값이 변경되면 실행된다.

watch는 데이터나 속성의 변화를 감지해 데이터가 변화될때마다 실행된다. useEffect 또한 dependency array를 통해 데이터의 변화를 감지하고 그에 따라 내부 함수의 로직을 실행시킨다.

// Vue watch
const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`새로운 값: ${newValue}, 이전 값: ${oldValue}`);
});

// React useEffect
const [count, setCount] = useState(0);

useEffect(() => {
  document.title = `클릭 수: ${count}`;
}, [count]);

computed와 useMemo

둘 다 특정한 값이 변경되었을 때만 계산을 다시해 불필요한 계산을 방지하고 계산된 값을 캐싱하는데 사용된다.

computed는 종속된 반응형 데이터의 값이 변경 되었을때 실행되는데 이전의 계산한 값을 캐싱하여 쓸 수 있다. useMemo는 기존의 수행한 연산의 결과값을 저장해두고 다시 동일한 요청이 들어왔을때 캐싱된 결과를 반환한다.

// Vue computed
const count = ref(0);
const doubledCount = computed(() => count.value * 2);

console.log(`count된 값: ${count.value}, doubledCount된 값: ${doubledCount.value}`)

// React useMemo
function Component() {
  const [count, setCount] = useState(0);
  const doubledCount = useMemo(() => count * 2, [count]);

  return (
    <>
      <p>{doubledCount}</p>
      <button onClick={() => setCount(count + 1)}>카운트 버튼</button>
    </>
  );
}

---

Nuxt 란?

Nuxt는 React 진영의 Next와 같이 SSR을 할 수 있도록 도와주는 프레임워크이다. Nuxt는 웹 애플리케이션을 제작할 때 필요한 Vuex, 라우터, Axios와 같은 라이브러리들을 미리 구성하고 있다. 그렇기 때문에 SPA, SSR, 정적 웹사이트를 쉽고 빠르게 구성할 수 있게 도와준다.

Nuxt는 대표적으로 다음과 같은 기능들을 제공해준다.

• SSR
• SEO 최적화
• 초기 프로젝트 생성 비용 감소
• pages 폴더 기반의 자동 라우팅
• 코드 스플리팅
• ES6/ES6+ 변환

---

Nuxt 문법 몇가지

처음 Vue와 Nuxt를 동시에 접하게 되었을때, 어떤게 Vue의 문법이고 Nuxt의 문법인지 많이 헷갈렸다. 그래서 자주쓰이는 Nuxt의 간단한 문법들을 소개해 보려고 한다. 자세한건 공식문서를 찾아보도록 하자.

useCookie

이전 버전에서는 js-cookie 라이브러리를 사용했을 것이다. Nuxt3로 넘어 오면서 useCookie를 사용해 쿠키를 관리하면 된다.

const cookies = useCookie('cookie-accept');
cookies.value = "..."

useFetch

이전 프로젝트에서는 Axios를 주로 사용해 API통신을 했을 것이다. Nuxt3 에서는 useFetch를 사용해서 통신을 하면 된다.

const {data} = await useFetch('/api/...', {
  method: 'POST',
  body: {
    ...
  }
});

useRouter

Nuxt3에서 라우터 조작을 해야하는 경우 useRouter를 사용하면 된다. Nuxt3의 navigateTo는 미들웨어를 조작할때만 사용하는 것을 추천한다.

 

페이지 이동을 할때 하나의 팁을 주자면 router.push 를 사용할때 path보단 name으로 이동하는 것을 추천한다. path의 경우 /home 으로 이동하려 할때,현재의 주소가 /review 일 경우 /review/home 으로 이동되는 경우가 종종 있어서 name으로 이동하는 것을 추천한다.

const router = useRouter();

router.addRoute({ name: 'home', path: '/home', component: Home })
router.push({
  path: "/home"
})

router.push({
  name: "home"
})