prestomusic

vuejs

style guide

여러 컴포넌트에서 사용되는 기본 컴포넌트는 Base 접두사 붙이기
- BasePlayPauseButton
Single-instace 컴포넌트: The(props가 없어야 됨)
부모에 종속적인 컴포넌트: 부모 이름은 접두어로
- PlayerSliderHorizon
상위 개념의 단어를 앞에, 구체화된 단어는 뒤에(RunSearchBar > SearchBarRun)
컴포넌트에 folder를 사용하는 경우는 컴포넌트가 100개 이상 넘어가는 경우만
props의 네이밍: js에서는 camel-case, html에서는 kebab-case
Computed 바디는 최대한 쪼개서 작성

기본 환경설정

Base 컴포넌트 global에 등록하기

@ 패스에 사용하기

props

정적 props는 그냥 v-bind없이 사용해도 된다

동적 props는 (v-for 포함) v-bind를 사용

주의: 숫자 넘겨주기(배열, 객체 포함)

정적 props를 사용하면 문자열로 넘어간다. 숫자 타입을 넘겨주고 싶다면 동적 props를 사용(v-bind:props=”“는 쌍따옴표 내부의 문자열은 js expression으로 인식하므로)
```
<Component :index="42"></Component>
```

객체의 모든 속성 넘겨주기: v-bind만 이용

obj={id: 1, name: 'mando'}

<Component v-bind="obj"></Component>

<Component v-bind:id="obj.id" v-bind:name="obj.name"></Component>

v-model

이해 안됨, + custom events

slot

컴포넌트 내부에 데이터 넣기

슬롯을 이용할 UI 목록

앨범뷰, 아티스트뷰의 window 레이아웃
서브 섹션

dynamic components

V-bind:is를 이용해 컴포넌트간의 스위치가 일어나도록 할 수 있다

등록된 컴포넌트의 이름을 넣어준다(많이 사용할 듯)
컴포넌트 옵션 객체를 넣어준다

적용 목록

mainMenu에 따른 subSection의 스위치
장르뷰의 장르 스위치

lifecycle hooks

v-if

True: create > mount
False: destroy

v-show

무조건 생성: create > mount
True: update
False: update

JS

bind와 removeEventListener

등록한 이벤트를 삭제하기 위해 사용하는 DOM api. 반드시 등록된 함수를 콜백함수로 넣어줘야한다.

// InfiniteTextSlider
mounted() {
  window.addEventListener('resize', this._setAnimation.bind(this););
  this._setAnimation();
},

destroyed() {
  window.removeEventListener('resize', this._setAnimation.bind(this););
},

_setAnimation함수는 this를 바인딩 해줘야 하기 때문에 bind함수를 사용했다
문제는 bind함수는 새로운 함수를 리턴한다는 것!
그렇기 때문에 addEventListener의 인자로 들어가는 콜백함수와 removeEventListener의 콜백함수는 다르다
따라서 this.registeredSetAnimaitionFn = this._setAnimation.bind(this)를 이용해서 함수를 저장하여 사용했다