MIND UPLOAD

# vuepress 블로그에 tui.grid 넣기

vuepress 블로그에 tui.grid 삽입 삽질기를 기록해 본다.

# 1. 설치

npm install --save @toast-ui/vue-grid
1

일단 패키지 설치해 준다.

# 2. vue 파일 생성

.components 아래 toastGrid.vue 파일 생성하고 소스 코드 작성해 준다.

# 3. 오류 해결

오류 해결을 위해 조치했던 것들을 남겨 본다..

# render function or template not defined in component

본인은 SPA 기반 개발을 했었어서 SSR에 대해서 잘 알지 못했다... 이번에 삽질 하면서 많은것을 알게 되었다.... 그간의 의문이 약간 풀리는 느낌..

공식문서에 친절하게 가이드가 나와있다. 뷰프레스는 ssr 기반이므로 component를 mounted 에서 임포트 해주도록 바꾸어준다.

mounted() {
    import('../../../node_modules/@toast-ui/vue-grid').then(module => {
        this.dynamicComponent = module.Grid
    })
}
1
2
3
4
5

그리고 컴포넌트를 마운트 되고 난 후 임포트 할 수 있도록 template 소스도 수정해 준다.

<template>
  <component
    v-if="dynamicComponent" 
    :is="dynamicComponent"
  />
</template>
1
2
3
4
5
6

# ReferenceError: global is not defined

vite용 해결책이긴 한데 둘다 SSR이라 원리는 같을거 같아 적용해 보았더니 해결되었다. tui-grid 에서 글로벌 필드를 사용하는데 vuepress에서 정의 되어 있지 않은것으로 추측 된다.

mounted 제일 처음에 소스 추가해 준다.

window.global ||= window;
1

# CSS!!!!!!!!!!!

그리드에 글자가 나오지 않아 또 한참 해멨다...하.. 그리드 공식 문서 대로 css를 임포트 하면 글자가 사라지는 것이다...?! 거의 없다시피 한 css 지식을 쥐어 짜내어 가로 폭을 결정하는 css 위치를 찾아 내었다.

.tui-grid-table 클래스를 보면 width: 1px; 로 되어 있는 것을 볼 수 있다. 이게 분명히 어디서 상속을 받던 스크립트로 조절을 해주던 조절을 해줄거 같은데 뷰프레스 css랑 어디서 충돌이 나는건지 .... 크롬 개발자 도구에서 소스를 보면 걍 1px로 고정되어 있었다. 나의 짧은 지식으로는 도저히 찾지 못하겠어서 내 컴포넌트 소스 상에서 제어해 주기로 결정했다.

그리고 또다시 시작된 css 삽질기... 그러던중 빛과 같은 해결책 발견...

width:max-content;

상위 div가 하위 div 의 너비를 상속받게 만드는 방법이다.

.tui-grid-table {
  margin: 0;
  width:max-content;
  box-sizing: border-box;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px hidden transparent;
  border-bottom: none;
  color: black;
}
1
2
3
4
5
6
7
8
9
10

이렇게 쓰면 안될거 같긴한데..... 뭐 내블로그니까 ^^

그리드 임포트 완료!

markdown.md

loading...

src\.vuepress\components\toastGrid.vue

loading...

#vuepress

← typeScript downgrade →