너는 왜 Vue를 했니?

이종훈·2021년 8월 7일

vue 유사개발자

안녕하세요 '유사 개발자' 입니다.

왜 제가 유사 개발자라고 생각하냐면, 아직 완벽하게 깨우치지 못했고,
아직까지 많이 부족하기 때문에, 유사 개발자라는 칭호를 마음속 어딘가에 가지고 있습니다.

우선 오늘의 주제는 Vue를 선택한 이유, 그리고 제가 생각하는 입문을 처음 하시는 분들 중에
Vue를 사용하며, 실수하시는 부분들을 긁어 드리려 합니다.

난 아카이누가..좋은데...

가장 크게 핫해지고, 가장 많이 사용 하는 3대장이 있습니다.

이번글은 앵귤러는 포함되지 않습니다.

기존 웹 개발을 처음 시작했다면 먼저 무엇을 선택 해야할지 모르고,
주위에 개발자도 없는 상태면 가장 어려운 결정일수 있습니다.
~~필자 경험담~~

저 위에 나온 3개 다 전부 "도구" 일뿐이고, 저걸 못한다고, 웹 개발을 못한지 않고,
조금더 나은 환경에서 개발을 하고 좋은 환경에서 볼수있는 밑바탕을 그려주는 친구들입니다.

우선 맨 처음 선택을 하게 된다면 가장 고민인 부분은

Recat || Vue

이렇게 가장 추천을 많이 했고 고민을 갱장히 많이 했습니다.

그래서 맨날 뱃살을 잡고 고민을 했고,

뷰를 선택 하게 됐습니다.이유는 간단했습니다.

짧은 러닝커브, 그리고 호화로운 공식문서

리엑트에 비해 첫 공부를 시작하는 입장에선 React에 비해 Vue 자체가 러닝커브가 쉽습니다.
제가 생각하는 러닝커브가 짧은 이유는

공식문서화가 정말 잘 되어 있다.
템플릿화가 되어 있어, 일반 HTML 작업을 하듯이 작업을 하면된다.
~~Vue 개발자들은 성격이 착하다~~

저는 처음 개발을 시작할때 제가 프론트앤드 개발자가 될 줄 모르고 공부를 시작을 했고,
세계 최강 퍼블리셔가 되길 바라며 공부를 시작했기 때문에 React는 저에겐 너무 어려운 벽이였습니다.

그래서 오픈톡방에서 이것저것 물어보고, Vue개발자 한분을 만났는데 그분이 Vue를 추천하게 되어서 여기까지 왔습니다... 그분께 감사를 드려야할지...~~칼침을~~ 드려야할지...모르겠지만요..

우선 Vue를 보면 굉장히 퍼블리싱 하는거랑 비슷하게 생겼습니다.

<template>

</template>

<script>
export default {};
</script>

<style scoped>
</style>

딱 처음 보더라도 이 3년만에 만난 절친이랑 눈으로 쓰윽 훑고 어색하지 않은 느낌입니다.

그래서 저에겐 신세계였고 너무 편하다고 생각했습니다.

그래서 Vue를 선택하게 되었고 지금까지 Vue를 하며, 밥벌이를 하고 있습니다.

다만 지금 까지는 너무 Vue 자체를 신봉을 했지만 단점도 분명히 존재합니다.

Vue는 못생겼다

뷰는 다른 개발자가 보기엔 너무 못생겼습니다. 그리고 저 또한 못생겼다고 생각하고요,

왜냐하면 틀이 잡혀 있어도 너무 크게 잡혀 있습니다.

물론 이게 편할수 있지만, 뷰를 하다보면 메소드갔다가 라이프사이클 훅 갔다가 데이터 갔다가

정말 왔다갔다를 많이 하게됩니다. 그래서 MX master3 를 사시면 편하게 움직일수 있습니다.

하지만 그 부분을 해결한게 컴포지션 API이고, 이 부분은 별도의 컴포지션 api를 사용하던가,

Vue3로 작업을 하게 된다면 선택사항으로 가능합니다.

물론 저도 컴포지션을 사용을 해봤고 기존 뷰 옵셔널 api 에 비해 사용하기가 훨씬 편했습니다.

https://github.com/curriculum-of-coding/FrontEnd-web

로 컴포지션을 사용을 해봤고, 컴포지블하게 작성은 하지 못했습니다.

Vue에 대해 정확히 이해하고 짜지 않는다면, 코드 자체 퀄리티가 떨어지게 된다.

기본적으로 Vue에서 지원해주는 기능들이 몇가지 있습니다.

Vue를 못생기게 만드는 사람들

computed,method,watch 등

크게 가장 많이 쓰는 부분이고 가장 헷갈리는 부분입니다.

메소드로 리턴을 해서 할수도 있고, computed를 사용해서 해야할때가 존재합니다.

상황에 따라 맞게 사용을 해야 하는데

그냥 무작정, 메소드에 전부 때려박고 리턴을 해주는 코드를 본적이 있습니다.

이렇게 Vue에 대해 정확한 의도를 파악하지 않고 작성을 하게 된다면, 큰 문제가 생깁니다.

간단하게 method랑 computed랑 비교를 하게 된다면,

computed는 인자를 받을 수 없고, method는 일반 js function 처럼 인자를 받을 수 있습니다.

그리고 가장 큰 차이점은 '캐싱' 의 유무입니다. comptued는 캐싱이 되는 반면,

method는 리랜더를 거칠때 함수를 호출하게 됩니다.

의도를 가지고 사용을 하면 추후 문제가 누수가 될 문제를 덜어주게 되고,

추후 인수인계자가 코드를 보고 저렇게 머리를 탁 칠 일은 덜어지게 됩니다.

watch 의 비용 문제

watch 는 기본적으로 cost 자체가 높습니다. 매번 옵저버에서 그 객체를 보고 있게 됩니다.

그만큼 남용하게 된다면, 문제가 생기게 됩니다.

물론 대부분의 경우 computed로 처리가 가능하지만 watch를 사용해야 할 시점이 존재합니다.

다만 일부 개발자들은 이런 비용적인 문제를 생각하지않고, watch를 남발하게 되어,

성능상 이점을 가져가지 못합니다.

처음 Vue를 하면서 많이 하는 실수

템플릿 즉 html 단에 this를 사용한다.

<template>
  <div>{{ this.name }}</div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      name: 'LeeJongHun',
    };
  },
};
</script>

<style scoped></style>

이런식으로 당연히 스크립트 단에서 사용을 하니 this를 템플릿 단에 까지 끌어 올리게 된다.

물론 동작은 하나 굳이 this를 적어줄 필요 없이

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  name: 'test',
  computed:{
    name(){
      return 'LeeJongHun'
    }
  }
};
</script>

<style scoped></style>