[TIL] Vue 기초 7 - Vue 프로젝트 만들기 | 속성 | 사용자 정의 이벤트

번들링

• WebPack, Vite
• 웹팩은 초기 로딩 시간이 좀 필요한 단점이 있음

히든파일?

=> 리눅스/맥에서는 .~~로 쓰면 파일이 안 보이는 히든파일임

프로젝트 골격

• App.vue → 엔트리 포인트, 컴포넌트
• package.json ⇒. “type: module” ⇒ esmodule쓰겠다
• vite.config.js 
• '@': fileURLToPath(new URL('./src', import.meta.url)) => at 의미
• jsconfig.json
• "paths": { "@/*": ["./src/*"] }
• package-lock.json
  • 디렉토리 아니고 그냥 파일
  • 이 파일이 package.json에 의존하고 있음

App.vue

• script setup
• import 할 때는 파스칼 케이스만 가능
• 사용자 정의
• 파스칼, 케밥 케이스 모두 가능
• script scoped
• export 는 구조분해할당 필요, export default는 그냥 import하면 됨

컴포넌트 등록 방법

• 전역 등록
• 지역적으로 등록
  • import
• 사용자 정의 태그 만들기

속성

• props!
• 부모 컴포넌트는 v-bind로 자식 컴포넌트에 전달
• 자식 컴포넌트는 props 옵션으로 속성 정의
• 속성으로 전달받은 데이터는 변경이 불가하다(읽기 전용임)
• 부모에서 속성 값 변경하면 자식은 자동 리렌더링
• 전달해준 props는 참조를 전달해준 것. 따라서 이 참조를 바꿀 수는 없지만 참조의 프로퍼티를 수정하는 건 가능하지만 비권장.
• 자식 ⇒ 부모 컴포넌트로 전달하는 방법 : emit events
  • $emit() 활용
  • 부모에서 v-on 사용

속성의 유효성 검증

• 프로퍼티명이 속성명
• type에 생성자 함수 지정(String, Function, Symbol 등)

사용자 정의 이벤트

• 상태관리 툴 pinia(리액트에서는 리덕스 같은 거 쓰는 것처럼)

이벤트 유효성 검증

• 올바르게 이벤트를 발생시켰는지 검증
• 이름 오타 방지 등등 검증

emits: {
	이벤트명1 : (e) => {
	//true 리턴되면 유효
	//false 리턴되면 유효 노노
	},
	...
	}