📝 Vue.js 정리

수정사항,

1. vuex -> pinia
2. vue create -> vue latest, vite 기반 빌드 툴 사용
3. optional API -> Compositional API 사용
4. 최신 기술로 업데이트 하는 중,,,

00. 왜 Vue 씀?

• 카카오 FE 개발자들은 리엑트랑 뷰 반반 쓴다고함
• 근데 왜 초절정 유행 리엑트 안쓰고 뷰로 새로운 페이지 만들어내는 경우가 많음
• 카카오든 네이버든
• 특히 네이버 뮤직 Vibe 바꿀때 Vue를 사용해서 바꿈 -> 어케암? 같은 V로 시작함 ㅎ

그래서 그 이유가 먼데?

• 일단 React, Vue, Angular 왜쓰냐면
• web-app 만들때 씀
• 페이지가 새로고침 되지 않고 부드럽게 전환되는 사이트
• 페이지를 새롭게 불러오는게 아니라 js로 html을 갈아치우면서 부드럽게 구현하는 것임

ok 왜 js로 안하고?

• 개귀찮고 코드가 길어짐
• 근데 왜 굳이 다른애들 최신유행 리엑트 안쓰고 뷰씀?

짱짱 쉬워서 씀

• ㄹㅇ 개 중요한 이유
• 사실 위에 말했던 3개 전부다 똑같이 만들 수 있음
• Angular는 매우 방대하고, Typescript를 강제로 써야함
• React는 기존 js문법을 매우매우 많이 활용하고
• Vue는 Vue 문법을 새롭게 배우라고 함

그래서 js 빡통일수록 Vue가 짱짱 쉬워지는거임

• 초보도 2~3시간 배우면 대충 만들 수 있음
• 코드로 설명해보면

// react의 if (1)
function App() {
  const conditional = () => {
    if (true) {
      return <p>이거 보여주셈</p>;
    } else {
      return <p>이거 말고,,</p>;
    }
  };

  return <div>{conditional()}</div>;
}

// react의 if (2)
function App() {
  return <>{true ? <p>이거 보여주셈</p> : <p>이거 말고,,</p>}</>;
}

// vue의 if
<template>
  <div>
    <p v-if="show">이거 보여주셈</p>
    <p v-else>이거 말고,,</p>
  </div>
</template>

같은 기능을 구현한다고 했을 때, React vs Vue의 차이

• 많은 경우에 vue가 더 깔끔함
• 특히 짜야할 코드가 더 복잡할수록 장점이 들어남
• HTML 중간중간 js 중괄호 같은걸 많이 섞지도 않고, 깔끔하게 HTML 스럽게 볼 수 있어서 페이지 구조 파악 쉬워짐
• 하지만 개인취향일 가능성도 있음

그래도 Vue가 쉽다고 해서 뭐 간단한 사이트만 만들수 있는게 아님

• 다른 라이브러리들과 기능적 차이는 거의 없음
• 세 라이브러리 모두 결과물은 똑같이 만들어 낼 수 있음
• 다만 구현하는 방법이 다를 뿐,,

매우 중요!! Right Way가 있음

• 리엑트는 코드짜는 방법이 매우 자유로움
• 모든걸 허용하는 문법, 예를들면 HTML을 배열에담아서 쓰던 함수에 넣다 빼든 프로그래밍 언어를 적극 활용하여 개발하게 됨
• for 하나만 쓰려고 해도, map, forEach, for in, for of 등 많은 반복문을 사용 할 수 있음
• 또 어디서 언제 어떻게 쓸지도 님들이 알아서 선택해야함

근데 Vue는 그런게 없음 정답이 정해져있음 ??? 이게 왜 장점임?

• 자유를 주면 중수, 고수는 편리할 수 있겠으나, 초보는 이렇게 해도 되나,,,? 싶으니까 인터넷 뒤지는 경우도 많음

• 그래서 코드 짜는 방법을 정해주고 가르쳐 주는 Vue가 초보한텐 쉽겠군

• 협엽할때 편리함을줌
• 코딩스타일이 자유로우면 코딩 스타일 맞추는데 시간이 매우매우 소모됨, 이거 귀찮다고 안맞추면 나중에 매우 힘듬

• 근데 정해져있다?? 어느정도 맞추기 쉬워진다

• 코드의 양이 많아지면!! 중요.. 코드짜는 법이 제한적인건 매우 큰 장점
• 무엇을 개발하던 틀에 맞추어 코드를 짜놔야 나중에 수정과 관리가 편해짐

그렇다고 Vue가 꽉막힌 틀딱 언어냐?? 그런건 아니고, JSX. functional compoent 같은 리엑트 스러운 자유로운 웹앱 프로그래밍도 지원함

01. 개발환경 세팅과, Vue 3 버전 설치

1. node.js lts 버전 설치
2. Vscode 에디터 설치
3. 아무데나 작업용 폴더 만들고 vscode에서 열기
4. npm init vue@latest 명령어 입력

5. 이후 옵션 선택

   ✔ Project name: … <your-project-name>
   ✔ Add TypeScript? … No
   ✔ Add JSX Support? … No
   ✔ Add Vue Router for Single Page Application development? … Yes
   ✔ Add Pinia for state management? … Yes
   ✔ Add Vitest for Unit testing? … Yes
   ✔ Add Cypress for both Unit and End-to-End testing? … No
   ✔ Add ESLint for code quality? … No
   ✔ Add Prettier for code formatting? … No
   Scaffolding project in ./<your-project-name>...
   Done.
   

6. 생성한 프로젝트 들어가서 시작하면 됨

   > cd <your-project-name>
   > npm install
   > npm run dev
   

7. 빌드하려면 빌드 명령어 입력하면 됨

   > npm run build