텍스트가 SVG로 변환되는 문제 about adorable-css

[0oooooooo0]

코드를 확인해보니 아래 주석친 부분 때문인 것 같은데 왜그런지 알 수 있을까요?

const isSVG = (node) => {
  return node.children?.every(
    (node) => node.type === 'VECTOR' || node.type === 'BOOLEAN_OPERATION'
    // node.type === 'TEXT'
  );
};

[developer-1px]

1
몇 가지 테스트를 해보는 과정에서 100% 실수로 들어간 것으로 보입니다. TEXT가 들어갈 이유가 없어요. 알려주신대로 TEXT쪽 코드를 해당 코드를 롤백해서 다시 커밋하였습니다. 확인해주셔서 감사합니다.

2
현재 가이드라인은 따로 문서화로 되어 있는 것은 없고 "무조건 Autolayout으로만 디자인 할 것!"이라는 합의만 있는 상태였습니다. 사실 그 것밖에 없기도 해요. 플러그인은 AutoLayout에 대해서만 반응하도록 개발이 되어 있습니다. 그리고 그렇게 해야만 개발에서 사용할 수 있는 마크업의 형태로 나오는 것이기도 합니다.

플러그인의 역할은 figma를 컨버팅한다라기 보다 제대로 만들었는지를 검사하는 테스트 도구에 더 가깝습니다. 원래 디자이너가 그린대로 퍼블리싱을 하면 개발에서 못쓰는 도구이니까요.

3
혹시 더 필요한 개발 사항이 있다면 언제든지 알려주세요. 지금은 프로젝트 진도가 디자인이 다 끝난 상태다 보니 피그마쪽 플러그인은 조금 소홀해지고 있는것이 사실입니다. 얼마든지 알려주시면 개선해서 공유 하겠습니다.

다시한번 제보 감사 드립니다.

[developer-1px]

제가 Nuxt에 대해서는 잘 몰라서 주신 링크를 토대로 확인했습니다. 일단 해당 링크로 들어가니 해당 프로젝트는 DEPRECATED 되었다고 하네요.
https://v3.nuxtjs.org/getting-started/bridge/
Nuxt-bridge 프로젝트를 이용해서 진행을 하라고 하고 있네요.

진행하라는 대로 하고 nuxt.config.js에 아래와 같이 입력하고

---

nuxt.config.js

import { defineNuxtConfig } from '@nuxt/bridge'
import {adorableCSS} from "adorable-css/vite-plugin-adorable-css"

export default defineNuxtConfig({
  bridge: {
    vite:true,
  },
  vite: {
    plugins: [adorableCSS()]
  }
})

---

index.vue

<template>
...
</template>

<script lang="ts">
import "@adorable.css"
import Vue from 'vue'

export default Vue.extend({
  name: 'IndexPage'
})
</script>

와 같이 하면 될 줄 알았으나...

nuxt/bridge#191
여기에서 나는 에러가 재현이 되고 있어요. 수정했고는 하는데 저는 발생을 하고 있어서 최종적으로 눈으로 확인을 하지 못했습니다.

일단 설정에 따르면 config는 위와 같이 입력을 하면 될 거라고 생각합니다.
해당 문제는 좀 더 확인을 해보도록 하겠습니다.

[developer-1px]

텍스트가 svg로 출력되는 이슈는 close하겠습니다.
Nuxt 이슈는 제가 따로 #21 로 이슈 관리하도록 하겠습니다.
감사합니다. :)

[0oooooooo0]

빠른 수정과 답변 감사드립니다! 혹시 한가지 더 질문 드려도 괜찮을까요?

Nuxt 2버전에서 adorable-css 라이브러리를 사용하고 싶은데 개발 환경 설정 방법이 궁금합니다.
그리고 Nuxt는 3버전부터 공식적으로 Vite가 추가될 예정으로 알고 있는데 Nuxt 2버전에서는 아래 라이브러리를 사용하면 될까요?
https://github.com/nuxt/vite

[0oooooooo0]

감사합니다. 저도 확인해보겠습니다 😀