Element UI

1. split-pane : vue-splitpane 컴포넌트를 사용하여 컴포넌트의 ui를 vertically or horizontally하게 나눌 수 있다는 것을 배웠습니다. 사용상의 이점은 layout 나누기를 수월하게 할 수 있을 것 같습니다. percent로 비율을 지정합니다.

    <split-pane
      split="vertical"
      @resize="resize"
    >
      <template slot="paneL">
        <div class="left-container" />
      </template>
      <template slot="paneR">
        <split-pane split="horizontal">
          <template slot="paneL">
            <div class="top-container" />
          </template>
          <template slot="paneR">
            <div class="bottom-container" />
          </template>
        </split-pane>
      </template>
    </split-pane>

2. el-row : 행을 보통 div로 나누었는데 elementUI에서는 el-row로 사용해서 행을 나눕니다.

3. el-dropdown > el-dropdown-menu > el-dropdown-item
   el-dropdown-menu tag 에는 slot 속성을 사용하는 것을 확인했습니다.
   el-dropdown-item이 el-dropdown-menu의 slot 값이라고 생각합니다.
   

<el-dropdown>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>Action 1</el-dropdown-item>
    <el-dropdown-item>Action 2</el-dropdown-item>
    <el-dropdown-item>Action 3</el-dropdown-item>
    <el-dropdown-item disabled>Action 4</el-dropdown-item>
    <el-dropdown-item divided>Action 5</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

4. el-dialog tag :visible.sync 값에 boolean 값을 주어서 팝업창이 보이도록 하는 것을 배웠으며 팝업창의 형식을 테이블 표 형식으로 하려고 el-table tag를 활용하여 다이얼로그 태그안에 nesting하여 활용했습니다.

5. fetchData : API post method를 호출할 때, axios의 request 객체를 사용하여 API 통신하는 것을 배웠습니다.

private async fetchData(id: number){
	try {
    	const { data } = await getArticle(id, { params })
        this.postForm = data.article
        ...
    }
}

export const getArticle = (id: number, params: any) =>
	request({
    	url: `/articles/${id}`,
        method: 'post',
        params
    })

Tailwind CSS

1. class 속성을 이용하여 sizing, color, typography, shadow를 적용함 구체적으로 배경색은 bg-gray-100 or bg-gray-200 등의 syntax로 적용하는 것을 배웠습니다.