[VUE] 1. vite로 Vue 시작하기 / npm cache 오류 해결 / 라이프사이클 훅 학습하기

이직하게 된 회사에서 React나 Next가 아닌 VUE를 사용하게 되어서 출근하기 전까지 조금이라도 공부하기 위해 유튜브에 올라온 강의를 보며 학습을 시작하였다! 

 

https://www.youtube.com/watch?v=9lWaIhE05m8&t=430s

 

구디사는 개발자 9Din님께서 유튜브에 올려주신 강의로 학습하였다.

1️⃣ VUE 시작하기

구글링해본 결과 VUE는 Vue-CLI나 Vite 둘 중 하나로 시작을 하는 것 같았다

리액트로 예를 들면 CRA vs Vite 이런 느낌일라나.. 

 

📚 Vue-CLI vs Vite

1. Vue-CLI의 장단점

• 장점
  • 다양한 기능을 제공하며 Vue.js 애플리케이션의 빌드, 테스트 및 배포를 위한 다양한 구성을 제공합니다.
  • 프로젝트의 개발을 위한 설정을 쉽게 커스텀 할 수 있는 설정 파일을 제공합니다.
  • 대규모 운영 애플리케이션에 적합합니다.
  • 공식 Vue.js 팀에서 유지 보수하므로 업데이트와 일관된 개발 경험을 보장합니다.
  • Vue2, Vue3 모두 지원합니다.

• 단점
  • Vue-CLI는 간단한 프로젝트를 구성할 때 설정이 복잡하다 느낄 수 있습니다.
  • 프로젝트의 규모가 커질수록 빌드나 서버 실행의 속도가 Vite보다 느려집니다.

2. Vite의 장단점

• 장점
  • ESM(ES Module)을 기반으로 한 빠른 개발 서버입니다.
  • 설정이 간소화 되어있어 직관적인 구성 설정을 제공합니다.
  • Vue3에 최적화되어 있으며, Vue2가 사용 종료될 시점이 다가오므로 상당한 이점으로 작용합니다.
  • 속도와 간결성 때문에 중소 규모 프로젝트를 빌드하는 데 탁월합니다.
  • Vue 뿐만 아니라 Vanilla, React, Preact, Lit, Svelte, Solid, Qwik 등의 다른 프레임워크와도 사용할 수 있습니다.

• 단점
  • Vue-CLI만큼 많은 최적화 및 프로덕션 기능을 제공하지 않을 수 있습니다.
  • Vue-CLI에 비해 플러그인이나 커뮤니티 등이 부족할 수 있습니다.
  • 좀 더 전문화하기 위해서는 Webpack을 직접 이해하고 구성해야 할 수 있어 Vite의 모든 기능을 끌어내지 못할 수 있습니다.

 

난 강의에서 vite로 시작하였기에 똑같이 vite로 시작!

npm create vite@latest

• Project name: vue-baic
• Select a framework: Vue
• Select a variant: JavaScript

이렇게 지정해주고 내 프로젝트 폴더로 들어가서

npm install

 

이렇게 해주었는데 오류!

 

Your cache folder contains root - owned files, due to a bug in

npm ERR! previous versions of npm which has since been addressed

 

설치부터 오류가 발생하다니... 🥹

하지만 구글링을 통해 빠르게 해결해버리기-

 

https://velog.io/@zzaoman/npm-cache-%EB%AC%B8%EC%A0%9C

npm cache 문제

 

나는 이 블로그에서 처음에 하신 대로

sudo npm cache clean --force

 

이렇게 해주었더니 바로 해결되었다!

 

2️⃣ VSCode 확장 프로그램 설치하기

강의에서는 TypeScript Vue Plugin, Vue Language Features(Volar), Vue VSCode Snippets를 설치하셨다고 했는데 2024.04.09 기준 TypeScript Vue Plugin, Vue Language Features(Volar) 이 두 개는 지원하지 않고 Vue-Official로 대체되었다고 떴다. 그래서 나는 Vue-Official과 Vue VSCode Snippets를 설치하였다!

 

Snippets를 사용하면서 v-b를 치면 이렇게 많은 템플릿을 사용할 수 있어서 아주 편리하다

 

강의에서는 vbase-3을 사용하였다

<template>
  <div>

  </div>
</template>

<script>
export default {
  setup () {
    

    return {}
  }
}
</script>

<style lang="scss" scoped>

</style>

 

그럼 이렇게 뙇!!! 아주 편리하다..

 

3️⃣ 라이프사이클 훅 학습하기

출처: 구디사는 개발자 9Diin님 블로그 https://blog.naver.com/PostView.naver?blogId=weartstudio&logNo=223242014244&categoryNo=13&parentCategoryNo=&from=thumbnailList

 

1. beforeCreate(), created()

<template>
  <div>
    {{ count }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  beforeCreate() {
    console.log("lifeCycle is beforeCreate", this.count); // undefined
    this.test(); // 에러 남
  },
  created() {
    console.log("lifeCycle is created", this.count);
    this.test();
  },
  
  methods: {
    test() {
      console.log("함수 호출!!");
    },
  },
};
</script>

<style lang="scss" scoped></style>

• beforeCreate()에서는 컴포넌트를 생성하기 전이므로 data, method에 접근할 수 없다
• 따라서, count는 undefined이 뜨고 test를 불러오면 에러가 난다
• created()에서는 컴포넌트 생성 후 this 키워드를 사용해 data, method에 접근 가능하다
• 따라서, count는 0이 뜨고 test를 불러오면 '함수 호출'이라는 결과물이 나타난다

2. beforeMount(), mounted()

<template>
  ...
  <h1>Vue.js 라이프사이클 테스트</h1>
</template>

<script>
export default {

 ...

  beforeMount() {
    console.log("lifeCycle is beforeMount", document.querySelector("h1")); // null
  },
  mounted() {
    console.log("lifeCycle is mounted", document.querySelector("h1"));
  },
  methods: {
    test() {
      console.log("함수 호출!!");
    },
  },
};
</script>

<style lang="scss" scoped></style>

• beforeMount()에서는 UI가 렌더링되기 전이라 null이 뜸
• mounted()에서는 UI가 렌더링된 직후여서 해당 UI가 뜸

기술면접 준비하면서 그냥 마구 외웠을 때는 이해가 잘 안 갔는데 이렇게 그림과 코드를 같이 보면서 공부하니까 확실히 이해가 더 되는 것 같다!