[24.05.28] Vue.js_단일 파일 컴포넌트

01. 설치

• powershell 에서 진행

02. npm run dev

• vs코드 터미널 - cmd모드에서 진행
• 우리 개발 서버 만들어짐 / 여기서 진행하면 수정사항 바로 볼 수 있음
• 컨트롤 누르고 링크 > 나갈때 컨트롤 c

03. 속성

부모 > 자식

• props 생성 → 상수가 만들어짐

04. todoList

1. 계층구조 설계 순서

1) 컴포넌트 트리 찾기
2) 컴포들의 속성( props) 결정 : 어떤 데이터 넘길거냐
3) 이벤트 결정 : 자식은 어떻게 부모에게 넘길거냐
4) 이벤트 핸들러 : 데이터 처리

• 목록은 주로 v-for 로 컴포넌트 만든다
• 목록 안 목록이 있으면 또 반복문 작성

<구체적 설계>

1. 화면 ui상 컴포넌트 생각하고
2. 기능적으로 분리되는거 있느냐, 어떤 컴포를 생성할지 판단한다
3. 그담에, 전체 최상위 컴포넌트 만든다 (App)
4. 데이터는 누가 핸들링 할거냐 (최상위 컴포가 데이터 관리 : 일종의 전역 데이터)

   돔트리 생성 > 데이터 어디로? props으로 전달 > 이벤트 생각 : 자식은 어떤 이벤트로 부모에게 알려줄거고, 이벤트가 하는일은 뭐냐 (데이터 조작) > App의 데이터에서 추가, 삭제, 완료처리 > 어느 컴포넌트가 처리하냐에 따라 > 추가는 input이 작동 , 삭제, 완료는 item에서 작성

• html부분이라 케밥표기법 가능
• 어떤 데이터 넘길거냐 중요 (노란색부분)

[전체 TodoList 앱 화면]

2. InputTodo 부분

1) 이벤트 정의 → 스크립트 부분

• 스크립트에서 작성
• data()
• emits :
• methods : 이벤트핸들러함수 정의

2) input정의 → 탬플릿 부분

• 템플릿에서 작성
• 이벤트 핸들러 : @keyup 엔터키 업될때, 실행되라

💡 이 부분에 해당되는 컴포넌트들

3. Todolistitem 부분

)

• 이부분에 해당하는 탬플릿(이벤트핸들러), 스크립트(어떤이벤트인지정의) 작성

1) 스크립트부분
2) 탬플릿부분

• toto-done : 취소선 그리는
• 이벤트 : toggle / 그때 전달할거 : todoItem.id (id는 App에 있음)

💡 Item 하나 컴포넌트 완성

4. 목록 관리 부분

• props : 배열
• emits : 자체 이벤트 없고, item에서 부모쪽으로 전달하는 이벤트 2개 잇음(토글, 딜리트)
• 중계역할임

1) 스크립트 부분

• 중계만 해줄거니까
• 매소드 파트 없음, 인라인으로 처리할거임

2) 탬플릿 부분

• 목록이니까, for문으로 반복시킴

---

완성후, 소스보기 할 필요 있음

이게 다임 → 자바스크립트에 의해서 전부 다 처리되고 있음을 알 수 있다.

05.배포

• build

  npm build → 자바스크립트로 만들었다 → dist 폴더 만들어짐 → index.html하나 들어있음. assets - index.js 파일 있음 (여기에 모든vue파일 들어있음)

• 뷰에서 수정하면, 바로바로 적용가능하도록 되어있다.

06. 오후수업

1) Vue 보는방법

cd ch07
cd test-vue-app[폴더명]
npm i
npm run dev

2) 번들러

• 자동으로 파일 생성해준다.
• 배포용 파일을 만들때, 번들러 사용된다
• 암호화, 압축, 분할 등 파일 생성 옵션 → 번들러를 통해서 제어할 수 있다
• Vite 와 webpack가 있다 → 원하는 종류의 프레임워크를 선택해서, 번들러 빌드 할 수 있다.
• webpack은 vite 전에 쓰던 것 → vite가 10배 빠르다 → vue쓰는 사람에게 비트 권장
• npm : 프로그램 실행(터미널에서 명령어 실행), 설치해주는 역할 / vite : 자동 Vue, 등등 설치

※ 포트 번호 국룰(보통 기본포트 잘 안씀)

• vite : 5173
• 스프링 : 8080
• mySQL : 3306
• 리액트 : 3000

3) <template></template>

• html으로 작동 → 주석도 html식으로

4) <script></script>

• APP.Vue 스크립트에서 import하면, 지역컴포넌트라고 함

5) main.js

• 여기서 컴포넌트 만들면, 전역컴포넌트가 됨

6) options

prop 드릴링

• props가 드릴처럼 자식에게 전달, 전달,전달이 반복되는것

options api

• 생명주기를 디테일하게 컨트롤 한다.
• $로 쓸 수 있는 것들이 내장되어 있다.(디폴트 인스턴스=약간 예약어같음)

7) 바인딩

Vue.js

8) v-model

• 바인드랑 온을 합친거
• 우리는 아직 한글이니까 바인드 +온을 합쳐서 써야한다

9) props

• 내보낼때, props안에 템플릿으로 데이터 바로 적을 수 있다

💡 스크립트안에서는 : 파스칼로 디브안에서는 : html 대소문자 구분 못하니까 케밥으로 표현해야함