[영상] 코딩애플 vue 강의 정리

1 강 설치와 세팅

node.js LTS 최신 버전으로 세팅 비주얼 스튜디오(에디터) 설치

npm install -g @vue/cli (npm 대신 yarn 사용가능)
에디터 부가기능 설치
vetur
Html Css Support
Vue 3 Snippets

(에러는 강의 하단에 정리되어 있음)
https://codingapple.com/unit/vue-3-installation-with-vue-cli/?id=139

vue create 프로젝명
vue3 선택 후 엔터

app.vue에 코드를 짜면 됨

<template> 안에 HTML을 짜고
<script> 안에 JS 짜고
<style> 안에 CSS 짜면 됨

미리보는 법
npm run serve

2 강 데이터 바인딩 문법

데이터 바인딩 : js 데이터를 html에 꽂아넣는 문법

사용 이유
1. html에 하드코딩을 해 놓으면 나중에 변경이 어려움
2. vue의 실시간 자동 렌더링 기능을 사용하기 위해
(=> 데이터 변경시 실시간 자동 렌더링 됨)

export default{
name: ‘App’,
data(){
return{
(object 데이터보관함)
},
components:{
}
}

Html 내용과 속성을 데이터 바인딩 할수 있음

사용할 때
내용: {{(자료 key)}}
속성: :style=“스타일 key”

5분 숙제

(script)
products: [‘역삼동원룸’ ,’천호동원룸’ ,’마포구원룸’ ],
(html)

<h4>{{products[0}}</h4>

<p>50만원</p>

<h4>{{products[1]}}</h4>

<p>가격은 아무거나</p>

<h4>{{products[2]}}</h4>

<p>가격은 아무거나</p>

3 강 v-for 반복문

(Html)
`<a v-for=“(a, i) in 메뉴들” :key=“a”>{{a}}</a>`
: key가 없으면 에러가 생김

(script)
메뉴들: [‘home’, ‘shop’, ‘about’],

배열안에 있는 a들이 각각 출력됨, i는 숫자로 출력됨

5분 숙제

(Html)
`<div v-for=“a in products” :key=“a”>
<h4>{{a}}</h4>
<p>50만원</p>
</div>`
(script)
products: [‘역삼동원룸’ ,’천호동원룸’ ,’마포구원룸’ ],

4 강 이벤트 핸들러로 허위매물 신고버튼 생성

(Html)
@click=“” : 클릭시
@mouseover
//함수를 넣을 수 있음

(script)
// 데이터 끝나는 부분에 methods를 만들어 함수를 추가함
data(){
신고수 : 0,
},
methods : {(여기에 함수 추가)}, //this.으로 시작함

5 강 모달창 만들기

assets 폴더 안에 이미지를 넣어서 사용함

동적인 UI 만드는 법
1. UI의 현재 상태를 데이터로 저장해둠
2. 데이터에 따라 UI가 어떻게 보일지 작성

(script)
data(){
return{
	모달창 열렀나: false,
}}

(html)
<div v-if=“모달창 열렀나”>
<h4 @click=“모달창 열렸니 = true”>

data(){}의 내용들을 state라고 부르기도 함

6 강 상품목록 만들기 진짜 데이터

파일(변수) 내보내기
export default 변수명
export {변수1, 변수2...}

파일(변수) 가져오기
import 변수명 from 경로
import {변수1} from 경로

데이터의 이미지, 타이틀, 가격들을 불러와서 상품 목록을 만듦

---

이후 강의
https://codingapple.com/course/vue-js/

커리큘럼 :
[Vue.js 3버전 기초와 부동산 사이트 만들어보기]

1. Vue CLI 프로젝트 기본 설치와 환경셋팅

2. Bootstrap-vue를 이용한 UI 개발과 반응형 레이아웃 

3. v-bind, v-for, v-if

4. HTML 컴포넌트화 하기 

5. Props 사용하기

6. Vue-router 설치와 라우터 개념

7. 라이프사이클 함수 사용하는 법 

8. methods, computed 에 기능개발하기

9. 라우터를 이용한 페이지 나누기

10. URL파라미터를 추가한 라우터 만들기

11. named routes, navigation guard 

12. Github Pages를 이용한 간단한 발행 

[인스타그램 웹앱버전 만들기]

1. Vue UI로 프로젝트 만들어보기

2. step에 따른 페이지 구분패턴 

3. 알아서 해볼 많은 숙제들 

4. FileReader, ObjectURL을 이용한 프론트엔드 환경에서의 이미지 업로드
5. 글작성과 발행기능

6. 커스텀 이벤트 만들어 사용하기 

7. 상위요소로 데이터 버스태워 전달하기 

8. Vuex 로 쉽게 데이터 관리해보기

9. Props를 갖다버리고 Slot을 이용하자

10. Axios를 이용한 Ajax요청 배워보기

11. Progressive Web App 발행과 셋팅

12. Vue 3 Composition API 사용법 

---

1. 부동산 쇼핑몰

모달창 내에 상세페이지 만들기
HTML 복잡해보이면 컴포넌트 Component 만들어 쓰셈
부모가 가진 데이터를 자식이쓰고 싶으면 props로 전해주셈
props 나머지 내용 조금 & 저번시간 숙제
자식이 부모데이터 바꾸고 싶으면 custom event 로 메세지만 주십쇼
사용자의 input을 받는 법 (v-model)
watcher로 데이터 감시하는 법
Vue에서 매끈한 UI 애니메이션 주는 법 2개
상품정렬기능과 데이터 원본 보존
Vue의 라이프사이클을 어디다 쓰냐면

2. bolg 레이아웃과 라우터
Blog 프로젝트 생성과 뷰에서 Bootstrap 4, 5 사용법

블로그 글목록을 만들어보자 & 데이터바인딩, props 복습
vue-router 설치와 기본 라우팅
상세페이지 200만개 만들기 (URL 파라미터)
심심할까봐 소개하는 Nested routes & push 함수
라우터 나머지 기능들 (hash mode, guards)
만든 Vue 사이트 build & Github Pages로 배포하려면

3. 인스타그램 만들기
뷰 인스타그램 프로젝트 생성 & 레이아웃 만들기
저번시간 숙제 & style 속성 데이터바인딩
서버로 ajax 요청하는 더보기 버튼 만들기
탭 만들기 & 탭으로 사진 업로드 페이지 만들기
서버없이 업로드한 이미지 다루기 (잡기술)
글 발행기능 만들기 (이쯤 되면 혼자서도 잘함)
업로드한 이미지 인스타그램 필터 기능 만들기 (잡기술)
props 싫으면 slot은 어떻습니까
멀리 있는 컴포넌트간 데이터전송할 땐 mitt
저번 시간 숙제와 Vuex 1 : 사용하는 이유
Vuex 2 : store에 있는 state 데이터 바꾸는 법
숙제해설 : 좋아요 & 좋아요 취소기능 만들기
Vuex 3 : actions 항목을 알아보자
Vuex 4 : mapState를 사용하면 편리할 수도 있음
Progressive Web App & 셋팅
버그찾고 싶으면 Vue devtools 설치합니다
Composition API 사용법 (팔로워 페이지 만들기)
Composition API 사용법 2 & 간단한 검색기능
Vue 강의 나가는 말 (강의 그만들으셈)