[015] Vue.js 단일 파일 컴포넌트

 
2024.05.28(화)
 
Vue.js 4일차
7강 단일 파일 컴포넌트를 이용한!
Vue 애플리케이션 개발
 
계속 헷갈렸던 건..
터미널에서 폴더로 들어갈때:
ctrl+c > cd (파일명) / tap 키 활용 > npm run dev 

---

 
원쌤의 Vue.js 퀵스타트
 

• CH01 Vue.js 소개
• CH02 Vue.js를 위한 ES6
• CH03 Vue.js 기초와 Template
• CH04 Vue 인스턴스
• CH05 이벤트 처리
• CH06 스타일 적용
• CH07 단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발
• CH08 컴포넌트 심화
• CH09 Composition API
• CH10 vue-router를 이용한 라우팅
• CH11 axios를 이용한 HTTP 통신
• CH12 vue-router와 axios를 사용한 예제
• CH13 pinia를 이용한 상태 관리

 

---

 

CH07-1 단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발

 
컴포넌트:
구성 요소를 의미함
좁은 의미로는 UI 구성 요소
 
파일 확장자는 .vue
→ 단일 파일 컴포넌트 구조구나!
 
인스턴스화:
객체 지향 프로그래밍에서 클래스의 인스턴스를 생성하는 과정
ex. 클래스로부터 만들어진 특정한 객체=인스턴스
 
7.2 프로젝트 설정 도구
 
번들링(Bundling):
여러 모듈을 묶어서 하나의 모듈 파일로 만드는 과정
vite[비트] 많이 사용 ... npm init vue
 
▼ 프로젝트 만드는 과정
폴더 > shift + 마우스 왼쪽 > 파워shell 열기

[015] Vue.js 단일 파일 컴포넌트

프로젝트 관리 명령어
- 빌드 명령어: npm run bulid
- 개발 서버 시작 명령어: npm run dev
- 미리보기 명령어: npm run preview
 

[015] Vue.js 단일 파일 컴포넌트

 
▲ 위 상태에서 시작
 
7.3 생성된 프로젝트 구조 살펴보기
 
자료 확인
 
7.4 컴포넌트의 조합
 
컴포넌트간 정보 전달 ★
부모 → 자식: Props
자식 → 부모: emit
 
7.5 속성
 
속성을 이용한 정보 전달
- 자식 컴포넌트는 props 옵션
- 부모 컴포넌트는 v-bind 옵션 (단방향)
-> 속성으로 전달받은 데이터는 변경 불가
-> 부모에서 속성 값 변경시, 자식은 자동 렌더링
 
data를 소유한 컴포넌트만 수정할 수 있도록 해야함!
(수정 point가 흩어지면 안됨, 읽기만 허용)
 
속성을 이용해 객체 전달하기
전달할 속성이 많은 경우,
객체 하나로 통합해서 전달
 
속성의 유효성 검증
- 배열이 아닌 객체 형태로 속성을 정의
ex) required: [true/false] ... 필수요소 지정하고 싶을 때
- type에 생성자 함수 지정
 
src/components/CheckboxItem.vue
- 부모가 자식에서 정보 전달시
-> 자식 read only
-> 자식 자동 랜더링
 
7.6 사용자 정의 이벤트
 
이벤트란
자식 컴포넌트가 부모 컴포넌트에게 정보 전달 방법
$emit('이벤트명', [값]) ... 이벤트명은 문자열
- 부모 컴포넌트는 v-on 디렉티브 or @로 값을 받음
- 개수 제한 없고, 생략 가능
 
*emit는 일반적으로 자식 컴포넌트에서 발생함
이를 부모 컴포넌트에서 감지하기 위해 이벤트 핸들러가 필요함
→ 부모에 이벤트 핸들러가 필수인 이유
 
*CommonJS: require()함수 사용하여 모듈 호출
*ES6: import 구문 사용하여 모듈 호출
 
이벤트 처리 과정
부모-자식-손자 컴포넌트 계층 구조에서는
손자에서 부모로 바로 이벤트 전달 불가
 
*루프 돌린다:
프로그래밍 용어, 반복문을 실행하여 특정 작업 반복
 
이벤트 유효성 검증
emit 옵션 등록: 발신하는 이벤트에 대한 유효성 검사 수행
보통 Vue.js에서 컴포넌트에서 사용 가능한 이벤트를 등록하는 것
 
 
컴포넌트 분할과 정의
 
컴포넌트 분할 기준:
한 번에 변경되는 데이터를 렌더링하는 UI 단위로 컴포넌트를 분할
 
속성과 이벤트를 조합한 리팩토리
 
컴포넌트 단위로 나눠 개발 진행
 
*아이피 주소 보는 방법:
터미널 > ipconpig 작성 후 엔터
 

CH07-2 TodoList 예제 리팩토링

 
▲ 공동 네트워크로 공유할 때, 필수 세팅

피드백

 

• Node.js 포스팅 모아서 정리하기
• HTML로 SQLD 만들기