Vue (3)

폼 입력 바인딩

• v-bind: 단방향 데이터 바인딩
• v-model: 양방향 데이터 바인딩
  한글입력에서는 한 글자가 완료되고 다음 글자로 넘어가야 반영이 되는 현상이 있음 ... v-bind 를 활용한 양방향 데이터 바인딩 방법으로 사용해야 함
• v-for 을 활용한 데이터 출력을 통한 바인딩
• v-model.lazy ... .lazy 를 통해 바인딩을 하면 입력할 때마다 동작하는 것이 아닌, 입력이 완전 끝나게 되면(enter 등을 통해 change 이벤트를 발생하면) 동작함
• .trim ... 앞 뒤의 공백을 제거하여 데이터를 갱신할 수 있다. (수정된 것으로 보지 않기 때문에 watch 를 동작시키지 않음)
• input 요소에는 숫자를 입력해도 문자 데이터로 인식 ... .number 를 통해 숫자로 변환할 수 있다.

---

컴포넌트 기초

• 전역 컴포넌트 / 지역 컴포넌트 ... 일반적인 컴포넌트의 등록은 지역을 우선으로 고려하고, 자주 사용하거나 언제든지 사용할 수 있어야 하는 컴포넌트는 전역으로 고려한다.
• 컴포넌트의 재사용 ... 캡슐화
• SFC ... 단일 파일 컴포넌트 (.vue) / 브라우저에서 직접 동작할 수 없기 때문에 js 로 변환하는 webpack, parcel 등을 활용해야 한다.
• 전역 컴포넌트

const app = Vue.createApp(App)
app.component('컴포넌트-이름', {
	template:`<div>{{ name }}</div>`,
    props: ['name'] // 외부로부터 데이터를 받아올 때 사용함 (name 이라는 이름의 데이터를 받아옴)
    data,
    methods,
    created,
    ...
})
const vm = app.mount('#app')

• props 를 통해 들어온 데이터는 외부에서 들어오기 때문에 수정 권한이 없음(readonly) ... this.$emit('커스텀 이벤트의 이름', 이벤트 함수) 를 통해 데이터를 변경할 수 있음
• 외부 데이터를 받아올 때는 props, 데이터를 내보낼 때는 $emit 을 사용한다.

---

Node.js 와 NPM

• Node.js: 자바스크립트 런타임 (자바스크립트가 동작하는 환경 ... 로컬 컴퓨터 / 웹 브라우저) ... 자바스크립트를 통해 제어를 하기위한 용도
• npm: node package manager
  npm init -y ... 패키지 시작
  npm install vue@next ... vue 3 버전 설치
  npm i serve -D ... 개발 서버 패키지를 설치 (실제 서버와 다름 ... 개발할때만 사용)
  -D ... 개발용으로만 사용 (실제로 브라우저 환경에서 동작할 때 필요한 패키지가 아님)
• npx: node package run(x)
• package.json 과 package-lock.json 을 함께 묶어 관리해야 환경이 달라져도 버전에 변동없이 유지 가능하다.
• node_modules 패키지는 용량이 크고, package.json 과 package-lock.json 을 통해 언제든 생성 가능하므로(npm i) github 등에 업로드 하지 않는 등 특별한 관리를 하지 않아도 됨
• gitignore -> node_modules/ .vscode/ .DS_Store/ ...

---

회고

v-model 이라는 디렉티브만을 통해 양방향으로 데이터를 연동시킨다는 점이 가장 큰 이점이 아닐까 생각된다.
컴포넌트에 들어서면서 props 와 emit 을 사용하여 데이터를 수정하는 방식에 약간 어려움을 느끼고 있다. 이 부분을 중점으로 공부해야 겠다.