Vue1

2023.05.01 Vue - Vue 심화 문법

● Text Interpolation
 - 가장 기본적인 바인딩(연결) 방법
 - 중괄호 2개로 표기
 - DTL과 동일한 형태로 작성
 - Text interpolation 방법은 모두 일반 텍스트로 표현

● Directives
 - v접두사가 있는 특수 속성에는 값을 할당 할 수 있음
 - 값에는 JS 표현식을 작성 할 수 있음
 - directive의 역할은 표현식의 값이 변경될 때 ....
 - : 을 통해 전달인자를 받을 수 있음
 - . 으로 표시되는 특수 접미사 -directive를 특별한 방법으로 바인딩


● 새 Vue instance 생성
 - 각각의 instance 들은 연결된 DOM element에만 영향을 미침
 - 연결되지 않은 DOM이 Vue의 영향을 받지 않았던 것과 동일한 상황


● v-text
 - Template Interpolation과 함게 가장 기본적인 바인딩 방법
 - {{}}와 동일한 역할 (정확히 동일한 것은 아님)

● v-html
 - RAW HTML을 표현할 수 있는 방법
 - 단, 사용자가 입력하거나 제공하는 컨텐츠에는 절대 사용 금지







2023.05.02 Vue - Vue CLI

● Node.js
 - 자바스크립트는 브라우저를 조작하는 유일한 언어 (하지만 브라우저 밖에서는 구동할 수 없었음)
 - Node.js로 인해 브라우저가 아닌 환경에서도 구동할 수 있게 됨
 - NPM(Node Package Manage)
: 자바스크립트 패키지 관리자
: Node.js의 기본 패키지 관리자
: Node.js 설치 시 함께 설치됨



● Vue CLI
 - Vue 개발을 위한 표준 도구
 - 프로젝트의 구성을 도와주는 역할
 - 확장 플러그인, GUI, Babel 등 다양한 tool 제공


● Vue CLI 프로젝트 구조
 - node_modules
: node.js 환경의 여러 의존성 모듈
: python의 venv와 비슷한 역할을 함
: 따라서 .gitignore에 넣어주어야 하며, Vue 프로젝트를 생성하면 자동으로 추가됨

 - node_modules-Babel
: JavaScript compiler
: 자바스크립트의 ES6+ 코드를 구버전으로 번역/변환 해주는 도구
: 자바스크립트의 파편화, 표준화의 영항으로 작성된 코드의 스펙트럼이 매우 다양해져 버전에 따른 같은 의미의 
  다른 코드를 작성하는 등의 대응이 필요해졌고, 이러한 문제를 해결하기 위한 도구

 - node_modules-Webpack
: static module bundler
: 모듈 간의 의존성 문제를 해결하기 위한 도구
: 프로젝트에 필요한 모든 모듈을 매핑하고 내부적으로 종속성 그래프를 빌드함

 - Module
: 개발하는 애플리케이션의 크기가 커지고 복잡해지면 파일 하나에 모든 기능을 담기가 어려워짐
: 따라서 자연스럽게 파일을 여러 개로 분리하여 관리를 하게 되었고,
  이때 분리된 파일 각각이 모듈 즉, js 파일 하나가 하나의 모듈
: 모듈은 대개 기능 단위로 분리하며, 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됨
: Module의 의존성 문제
-> 모듈의 수가 많아지고 라이브러리 혹은 모듈 간의 의존성이 깊어지면서 
     특정한 곳에서 발생한 문제가 어떤 모듈 간의 문제인지 파악하기 어려움
-> Webpack은 이 모듈 간의 의존성 문제를 해결하기 위해 등장

 - Bundler
: 모듈 의존성 문제를 해결해주는 작업 = Bundling
: Bundling을 해주는 도구
: Bundling된 결과물은 개별 모듈의 실행 순서에 영향을 받지 않고 동작하게 됨




● Component
 - UI를 독립적이고 재사용 가능한 조각들로 나눈 것
 - CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 SW 구성 요소를 의미
 - 하나의 app을 구성할 때 중첩된 컴포넌트들의 tree로 구성하는 것이 보편적임
 - 컴포넌트는 유지보수를 쉽게 만들어 줄 뿐만 아니라 재사용성의 측면에서도 매우 강력한 기능을 제공
 - component based architecture 특징
: 관리가 용이(유지/보수 비용 감소)
: 재사용성
: 확장 가능
: 캡슐화
: 독립적



● SFC
 - Single File Component
 - 하나의 .vue 파일이 하나의 Vue instance이고, 하나의 컴포넌트이다
 - Vue instance에서는 HTML, CSS, JavaScript 코드를 한번에 관리
 - 컴포넌트 기반 개발의 핵심 기능



● Vue component 구조
 1. HTML(템플릿)
: HTML의 body 부분
: 눈으로 보여지는 요소 작성
: 다른 컴포넌트를 HTML 요소처럼 추가 가능

 2. 스크립트
: JavaScript 코드가 작성되는 곳
: 컴포넌트 정보, 데이터, 메서드 등 vue 인스턴스를 구성하는 대부분이 작성 됨

 3. 스타일(CSS)
: CSS가 작성되며 컴포넌트의 스타일을 담당