vue.js를 상용서비스로 도입해보기

리마인드팁 서비스는 여러가지 웹 및 앱을 개발하고 운영하던 개발자 그룹, { 미래클(美.來.Cle) 스튜디오 }의 신규 서비스입니다.

이번에 베타서비스로 론칭한 리마인드팁은 실험적인 목표를 가지고, 과감하게 vue.js를 도입해서 개발했습니다.
(익숙하면서도 레퍼런스가 넘쳐나는 react를 포기하는게 힘들었던 것은 안비밀…)

이번 프로젝트에서 vue.js를 도입해본 이유는 다음과 같습니다.

  • 2022년 2월! vue 3가 공식사이트에서 디폴트 버전이 되었습니다.
    (vue3가 지금까지 정식서비스가 아니었다는 것은 아닙니다.)
  • 코로나로 인해서 완전히 새로운 작업 형태를 시도해야만 했습니다.
  • (가장 중요!) 총괄 팀장께서 vue.js에 푹 빠져 있었습니다. (그것도 vue2버전 잘 쓰던 분이!!!!)

결론부터 말씀드리면, (너무나 당연하게도) 장점과 단점이 있었습니다.

  • 장점
    1. vue.js의 템플릿 언어는 html과 거의 같습니다. 즉, 기존 개발자에게 러닝커브가 몹시 낮습니다.
      (vuejs.org의 튜토리얼만 잘 따라가도 기본 교육이 쉽게 끝납니다.)
    2. HTML, SCRIPT, CSS가 하나의 파일 안에 잘 정리되어 들어가 있어서 다른 사람이 작성한 코드를 읽기가 어렵지 않습니다. 이 부분은 v-for, v-if 등 기본 형식이 강제되어 있어서 더 그렇습니다.
      (VSCode에서 익스텐션을 설치하면 HTML, SCRIPT, CSS를 별도 파일처럼 분리해서 보여주는 기능도 있습니다.)
    3. ES든 TS든 익숙한 방식으로 개발이 가능합니다.
    4. 아주 활발하게 발전하고 있는 언어입니다.
  • 단점
    1. react를 잘 쓰고 있었다면, 굳이?
    2. vue2의 option방식, vue3의 composition 방식이 혼재되어서 잘 사용됩니다.(응? 장점인가요?)
      (팀장님…. 도입했으면 하나로 쭉 미셔야지, 섞어서 쓰면 어떡합니까?)
    3. 아직은 레퍼런스가 비교적 적습니다.
    4. 공식적인 빌드툴이 익숙한 사람이 많은 webpack이 아닌 Vite(빗)입니다.
    5. 아주 활발하게 발전하는 툴이다보니 공식 추천(?) 라이브러리가 확확 바뀝니다.

나열한 장점/단점은 절대적인 것은 아닙니다. 기타 등등의 장/단점이 많이 존재하고 있으며, 팀에서 결정하는 개발방식에 따라서 많은 장점이 단점이 될 수도 있고, 반대로 단점이 장점이 될 수도 있습니다.

– 솔직히 억지로 쓴 장/단점들이구요. vue3든 react든 익숙한 개발방식이 최고입니다.
vue3든 react든 svelt를 쓰든지, 이제 언어가 문제가 되는 시대는 아닌것 같습니다.

공식 라우터 툴인 vue-router, vuex는 jquery만 쓰다가 처음 넘어온 개발자도 꽤 빠르게 익숙하게 사용하는 장면을 목격하기도 했습니다.
(코드의 수준은 일단 논외로 할게요. 어짜피 우리 모두 다 더러운 코드 생산에 일가견이 있다고 믿어 의심치 않으니까요!!)

그런데 vuex로 시작했지만, 지금 공식 store 플러그인이 Pinia로 바뀐 사태가… evan you님!!!

Angry Season 9 GIF by Shameless - Find & Share on GIPHY

사실은 vuex써도 별 영향은 없습니다. 다들 그냥 안쓰시고 wrapper 만들어서 쓰시잖아요?
하지만!!!! 훌륭하게 만든 wrapper가 있는데도 불구하고, 다이렉트로 사용한 개발자 B님도 있지만,
vue의 강점으로 자기 담당 컴포넌트 안에서 자기만 쓰고 안꼬이게 잘 끝났습니다.
단, 유지보수는 B님이 피똥싸면서 하시는걸로…. 퇴사하고 유지보수 안되면 고소들어갑니다)

저희 팀에서 내린 진짜 결론입니다.

☆ vue3에 관심이 있으시면, 그냥 도입해보세요.

☆ react 에서 굳이 바꾸실 필요 없으시면, 그냥 react 쓰세요.

저희가 훌륭하고 아름답고 깔끔한 페이지 생산을 못하는 것은 저희 능력 탓일뿐,
프레임워크나 라이브러리는 아무 잘못 없다고 100% 확신하고 있습니다. (저희 팀 한정입니다. ㅠㅠ )

Coding Computer Science GIF by XRay.Tech - Find & Share on GIPHY

Categories:

dev

No Responses

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다