오늘 한 일:

• prestoMusic: VueJS를 이용해 웹 스킨 제작
  • 뷰 별 UI 구현
    • 앨범 뷰

내일 할 일:

• prestoMusic: VueJS를 이용해 웹 스킨 제작
  • 앨범, 리스트, 장르 UI 구현
  • canvas 태그 사용해보기

prestomusic

AlbumView

Album Component

앨범을 컴포넌트화 하였다

AlbumWindow Component

앨범이 선택되었을 시 나타나는 컴포넌트. 인스턴스의 isAlbumSelected 값이 true이면 나타난다.

flow

open

1. 앨범이 선택된다: album-selected이벤트
2. openAlbumWindow(album)
   1. isAlbumSelected = true
   2. v-if=”isAlbumSelected”
   3. selectedAlbum = album
3. <AlbumWindow v-bind:album="selectedAlbum"/>

close

1. AlbumWindow 바깥영역이 선택된다
2. 이벤트 발생: click-outside
3. closeAlbumWindow()
   1. isAlbumSelected = false
   2. v-if=”isAlbumSelected”
   3. selectedAlbum = null

설계

<div class='album-window-wrap'>
	<div class="album-window" style="z-index=1000"></div>    
</div>

• mount될 때 outsideclick 기능 넣기

vueJS

require: static asset 다루기

static asset를 불러오려면 <img src="./path"> , background: url('./path') 처럼 path를 이용한다. 런타임 단계에서 다음과 같은 코드를 만나면 vue-html-loader나 css-loader가 해당 패스를 참고해 asset들을 찾아온다.

하지만 런타임 이전에, 빌드를 거치면서 작성 시점과는 다르게 폴더 구조가 변경된다. 따라서 빌드 이전에 위의 패스들은 webpack을 통해 적절한 url로 다시 변경되어야만 한다. 이때 위의 패스들은 file-loader, url-loader에 의해 빌드된 파일 구조에 맞춰서 적절한 url로 변경된다.

html과 css와는 다르게 js상의 url이 존재하는 경우 webpack에게 빌드시에 적절한 url로 변경하도록 알려줘야 한다. 이때 require가 사용된다.

<template>
    <img v-bind:src="album.picture">
</template>

props: {
    album: {
      type: Object,
      default() {
        return {picture: require('../../assets/album_picture/1.jpg')};
      }
    }
  }

• require를 통해 인자로 들어온 path는 file-loader에 의해 적절한 형태의 url로 대체된다
• template를 통해 DOM이 생성될 때 대체된 url이 src 속성에 사용되고, 알맞은 asset을 불러오게 된다

엘리먼트의 속성이 vue instance의 데이터를 이용할 경우: v-bind

<template>
    <img v-bind:src="album.picture">
</template>

템플릿이 인스턴스의 데이터를 이용할 경우 v-bind 속성을 이용하자