2021 10 04

Vue.js 코딩애플¶

개발환경과 Vue - nodejs 최신버전 설치

vue create 프로젝트명
그거 들어가서
npm run serve

vue 문법 - @click : onclick 자바스크립트 함수 - @input : 인풋에 값 입력시 js 실행 - v-model을 활용하여 html 태그들의 값을 가져올 수 있음 - input/textarea/select 등의 태그 - watch를 통해 데이터 변경을 감지하고 로직 부여 가능
```
export default {
  data(){
    return {
      month : 1
    }
  },
  watch : {
    month(){
      //month가 변경될 때 실행할 코드
    }
  }
}
```
- <transition name="작명"></transition> 태그를 활용하여 애니메이션 사용 가능
```
.작명-enter-from { 애니메이션 동작 전 상태 }
.작명-enter-active { 애니메이션 동작 중 상태, 대부분 transition 이런거 }
.작명-enter-to { 애니메이션 동작 후 상태 }
```
- 배열 같은 거 얕은 복사로 복사해두고 사용하자 (원본 건드리지 말고) - [...array]

컴포넌트 - 원하는 HTML 덩어리를 한 글자로 축약

<template>
  축약할 HTML~~
</template>

<script>
export default {
  name : '작명',

}
</script>
<style>
  넣을 스타일 
</style>

하위 컴포넌트 - vue 형식으로 작성 - "props" 문법으로 하위 컴포넌트한테 사용할 데이터 넘겨줌 - 하위 컴포넌트에서 데이터 만들면 되지 않나?
- 되긴하는데 부모도 쓰는 데이터라면 부모 컴포넌트에 만드는게 더 좋음 - 데이터 위로 전송하는건 진짜 더 어렵거든 - 데이터 사용하는 곳에선 최상위 컴포넌트에 만들것

자식 컴포넌트 -> 부모 컴포넌트 이벤트 보내기 - 자식에서 $emit() 를 활용하여 부모에게 이벤트 보내기 - 자식: $emit(작명, 전달할 자료) 로 부모에게 메시지 전송 - 부모: @작명=데이터 변경할 js 코드로 메시지 수신 후 필요 작업

Lifecycle hook - 약간 빈의 생명주기 갬성 - - 컴포넌트 보여줄 때 create -> mount - 이 사이에 서버 통신 - 컴포넌트 변경하여 재렌더링 update - 이 사이에 서버 통신 - 다른 페이지 이동 unmount
```
beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeUnmount()
unmounted()
```

그냥 function VS arrow function - 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions - 화살표 함수 표현은 전통적인 함수 표현의 대안 - 화살표 함수에는 몇 가지 제한점이 있고 모든 상황에 사용 X - this 사용 시 전역 객체 바인딩

중복되는 부분을 라이브러리화 하자! 1. 추상 클래스로 분리하고, 이를 익명 클래스로 객체화 시켜 활용하자 2. 추상 클래스 내의 abstract method가 필수가 아니라면 이를 함수형 인터페이스로 추출해보자

사고의 흐름 - 와 뭐이리 복잡하냐? 클래스로 한 번 분리하자 - 클래스로 분리하고 객체화해서 사용해보자 - 어랍쇼? 클래스 구조가 비슷하네? 추상화 시켜보자 - 비슷한데 어찌 추상화할지 안보여 -> 그냥 바로 클래스로 분리 - 차근 차근 의존성 제거는 추상 메서드로! - 상속으로 중복 제거시, 부모 클래스 수정하면 아래 자식들 다 영향가... 비추비추 - 어라? 클래스의 추상 메서드 중에 필수인게 있고 아닌게 있네? - 인터페이스로 분리해보자 - 클래스에서 쓸 메서드에 해당 인터페이스를 매개변수로 넘겨주자