vue 개요 / 설치방법 / 개발방식 / 기본문법

코딩 자율학습 Vue.js 프런트엔드 개발 입문 (~3.3장)

• 강의링크: https://www.youtube.com/watch?v=hLaikZ_vy28

 

vue

1. 프로그레시브 프레임워크
2. MVVM 아키텍처
3. 뷰에 집중하는 프레임워크

 

vue 특징?

1. 가상 DOM 사용
2. 양방향 데이터 바인딩 (뷰↔뷰모델↔모델)
3. 설치간단

 

설치관련

1. node.js : 뷰가 노드 기반으로 실행하는 자바스크립트 프레임워크라 필요함
2. Vue CLI : 윈도우, 맥 등의 터미널에서 사용자 명령어 입력시 PC가 그에맞는 기능 실행해주는 처리함
3. 비주얼스튜디오 : 개발툴
   1. Vue - Official : 뷰에서 제공하는 문법 및 파일을 인식 가능하도록 하는 익스텐션
   2. Live Server : HTML 실시간 반영
   3. Prettier - Code formatter : 코드 이쁘게 정리
4. 크롬확장프로그램 : Vue.js devtools

 

개발방식

1. CDN (콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장해 제공하는 시스템)
   1. <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.js"></script> 을 추가하여 바로 개발 가능
   1. npm create vue@latest : 뷰 프로젝트 설정
   2. npm install : npm create 으로 생성된 package.json 파일 참조해 패키지 설치
   3. npm run dev : 뷰 어플리케이션 실행
   4. npm 이용하여 뷰 애플리케이션 생성
      NPM (node.js 패키지 관리 도구)

CDN vs NPM

1. cdn 은 빠르게 적용 가능 but 의존성 관리(=필요 라이브러리 관리)를 직접 해야함. 서비스 커질경우 난감
2. npm 은 의존성 관리 쉽고, 큰 프로젝트에서도 개발하기 편함 *

 

애플리케이션 기본 구조 (중요한것 위주)

1. package.json
   1. 중심! 기본정보 및 의존성 모듈 정보, 스크립트 명령 정보
   2. npm run dev 실행할 수 있는 근거가 script 부분의 dev 속성이 있어 실행 되는 것
      1. vite 라이브러리 실행해 개발 서버 구동
2. index.html
   1. npm run dev 실행시 해당파일 먼저 로드.
3. main.js
   1. 뷰 애플리케이션을 초기화하고 구성하는 역할. (index.html 에서 실행)
4. App.vue
   1. 컴포넌트 (SFC: Single File Components)
   2. 문법
      1. <script> : 컴포넌트에서 사용할 로직 불러옴
      2. <template> : html 태그 작성
      3. <style> : css 적용

 

디렉티브 사용

접두사 -v 가 붙음. <template> 영역에서 사용 (https://vuejs.org/api)
v-html, v-text, v-pre, v-bind...

---

출처
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=341090647&start=pebook