최근에 팀내 개발자 중 A 개발자가 나한테 찾아와서는 템플릿 내부에 코드를 잘 작성하였는데 화면에서는 안보이고 있다고 찾아옴...

 

A 개발자 나름 문제 해결을 위해서 찾아봤는데 문제점은 template 태그가 존재하고 해당 태그의 css display가 none 이 되어 있어서 내부 코드들이 안 보이는 것 같다고 이것이 문제다! 라고 하였다...

 

 

그런데 정상적인 코드면 template 가 보일 이유가 있나?... 작성된 코드를 가보았당

 

 

어... 음 template 내부에 template 코드가 들어가있네... 

 

template 태그는 특정 디렉티브 ( v-if, v-for, v-else 등..) 이 없으면 template 엘리먼트 그냥 들어간다.. 단 최상위 탬플릿 태그랑 이런 것들은 별개 사항

 

결론은 vue 공식 문서 다 ~ 있으니까 다시 읽고 나한테 설명하라고 함

 

 

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

 

출처 - vue 래퍼..

'Front-end > vue' 카테고리의 다른 글

[vue3, vscode] - script setup 내부에 snippet 주석 만들기  (1) 2025.02.25
[vite, vue] 확장자를 생략하여 가져올 때 생기는 오류  (0) 2024.04.26
Vue 에서 input 태그에 @click과 @change 사용 시 생긴 이슈  (1) 2024.01.24
[vue, es-lint] no-unused-vars 에러 문구 해결  (0) 2023.05.25
[vue2] 상태관리 vuex 사용 시 this.$store 가 undefined 뜨는 현상  (0) 2022.11.23

최근에 사수가 퇴사하게 되면서 팀 사정상 부서 이동이 되었고... 기존 파트에서 사용하던 vue2 프로젝트를 vue3 로 변경하는 작업을 진행 하고 있는 중입니다.

 

작업은 vue3 버전 템플릿 형태는  tempate - script (setup) - style 형태로 아래와 같이 사용하고 있는데

<template>
    <div>

    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

 

 

컴포지션 api - setup 형태는 인스턴스 구조에 제약을 두고 있지 않다보니... 자동으로 snippet 이 적용이 안되고 있습니다.

 

그래서 개발자 개인적인 취향으로... 보기 좋게 작성 하기 위해서 vscode 내부에 snippet 를 임의로 커스텀 하여 사용 하였고 추가 된 주석은 아래와 같음..

 

 

<template>
    <div>

    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
// ✅ 1. Import 필요한 모듈
// ✅ 2. Props & Emits 정의
// ✅ 3. 반응형 상태 선언
// ✅ 4. Lifecycle Hooks (마운트/언마운트 시 로직 실행)
// ✅ 5. Watcher (props 값 변경 감지)
// ✅ 6. 이벤트 핸들러
</style>

 

코드 snippet 은 아래 설정 사용 하였습니다...

 

"Vue 3 Setup Component": {
      "prefix": "v3s",
      "body": [
        "// ✅ 1. Import 필요한 모듈",

        "// ✅ 2. Props & Emits 정의",

        "// ✅ 3. 반응형 상태 선언",

        "// ✅ 4. Lifecycle Hooks (마운트/언마운트 시 로직 실행)",

        "// ✅ 5. Watcher (props 값 변경 감지)",

        "// ✅ 6. 이벤트 핸들러",

      ],
      "description": "Vue 3 Composition API - setup() 기본 구조 템플릿"
    }

 

 

 

'Front-end > vue' 카테고리의 다른 글

[vue3] - html 내부에 template 태그가 보여요...  (1) 2025.02.25
[vite, vue] 확장자를 생략하여 가져올 때 생기는 오류  (0) 2024.04.26
Vue 에서 input 태그에 @click과 @change 사용 시 생긴 이슈  (1) 2024.01.24
[vue, es-lint] no-unused-vars 에러 문구 해결  (0) 2023.05.25
[vue2] 상태관리 vuex 사용 시 this.$store 가 undefined 뜨는 현상  (0) 2022.11.23

먼저, 현재 다니는 회사에 입사 후 제가 제일 먼저 한 업무는 Vue SPA 프로젝트 도입 이였습니다.

 

벌써 2년 넘게 근무한 회사이지만 초기 입사 시기 회사 특성 상 프론트 관련 된 프로젝트나 부서는 없었다 보니 .. 회사에 근무 하시던 분들은 온전한 vue 기능을 사용하지 않고 있었으며... 실제로 vue 프로젝트는 cdn으로 스크립트를 가져와서 작성 되어 있었다...

 

 

 

 

시간이 지날 때마다 코드는 수정한다고 하였지만 .. 오전 출근 하자마자 오류건을 발견하여 간단히라도 기록 남겼습니다.

 

 

먼저 바뀌기 전 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>타이틀</title>
        <style lang="scss">
        	body {
            	.wrap {
                	//....자식 관련 리소스들
                }
            }
        </style>
    </head>
    <body>
		<div class="wrap">
        	//.... 자식 관련 리소스들
        </div>
	</body>
</html>

 

바뀐 코드

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>타이틀</title>
        <style>
        	body {
            	// body 관련 코드..
            }
            
            body .wrap {
               // wrap 코드..
            }
            
            body .wrap ....자식코드들 {
            
            }
        </style>
    </head>
    <body>
		<div class="wrap">
        	//.... 자식 관련 리소스들
        </div>
	</body>
</html>

 

 

 

원인

  • 기존 css 네스팅방식은 sass, less 등 에서만 사용 하였지만 css 에서도 사용할 수 있게 되면서 최신 브라우저에서는 호환이 됨
  • 그러나 최신 브라우저에서 '만' 가능한 부분이기 때문에 구형 웹 브라우저 또는 모바일에서는 사용 할 수 없음
  • style lang ="scss" 는 vue cli 에서 편의를 위해 제공하는 기능이기 때문에 *.vue 확장자가 아니라면 사용 X

결론

  • 구형 웹브라우저 등을 위한 컴파일 된 스타일 형태로 전달하거나 css 형태로 전달하기
  • style lang = "scss" 사용하고 싶으면 vue파일 사용해라

 

참조

https://developer.chrome.com/docs/css-ui/css-nesting?hl=ko

 

CSS 중첩  |  Chrome for Developers

즐겨 사용하는 CSS 전처리기 기능 중 하나인 중첩 스타일 규칙이 이제 이 언어에 내장되어 있습니다.

developer.chrome.com

https://www.mizzu-creations.xyz/css-nesting

 

더 나은 CSS 코드 작성을 위한 CSS Nesting

CSS Nesting의 시대가 도래했다! CSS Nesting을 통해 CSS 코드 작성을 개선하는 방법

www.mizzu-creations.xyz

https://cli.vuejs.org/guide/css.html#pre-processors

 

Working with CSS | Vue CLI

Working with CSS Vue CLI projects come with support for PostCSS, CSS Modules and pre-processors including Sass, Less and Stylus. Referencing Assets All compiled CSS are processed by css-loader, which parses url() and resolves them as module requests. This

cli.vuejs.org

 

'etc > HTML-CSS' 카테고리의 다른 글

[CSS] - 자기 만족 정리 2  (0) 2024.11.22
[CSS] - 자기 만족 정리  (0) 2024.11.22
GNB·LNB·SNB·FNB 용어에 대해서  (0) 2024.01.23
input type="file" 에서 같은 파일(명) 등록하기  (0) 2022.11.24
[css 이론 및 기본 ] box (Block , Inline, Inline-block)  (0) 2020.12.01

vue-cli 에서 vite 프로젝트로 변경 하던 와중 기존 파일 명칭(실제로 index.vue가 있음)을 생략하고 폴더명만 작성해도 불러왔던 코드들이 제대로 실행 되지 않는 오류가 발생 됨

// 작성된 코드
import dirComponent from './component/dir';

// 이렇게 작성해야지 파일을 찾음...
import dirComponent from './component/dir/index.vue';

 

여러 구글링을 통해서 확인한 결과 위와 같이 실제 내부에는 index.vue 파일이 존재하지만 간략히 작성할 경우에는 vite에서는 찾지를 못하기 때문에 꼭 파일명과 확장자명을 작성해줘야 한다는 글들을 확인했음.... (그러면 생략한 몇백 몇천개의 파일을 하나하나 .vue 확장자명을 붙혀야함...)

 

하지만... 다른 js, ts, jsx, tsx 등과 같은 파일 확장자명은 잘만 찾아 오던데?... 라는 의심으로 레퍼런스를 잘 찾아본 결과 vite는 참 불친절하게도 .vue 파일 확장자 명을 제외한 다른 애들은 잘 가져온댄다.

 

 

그래서 당장 vite.config.js 파일을 켜서 수정 해버림

 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
     plugins: [vue()],
     resolve: {
        extensions:['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue'] //.vue 추가!
     } 
})

 

잘된다... 야호

 

참고 : https://ko.vitejs.dev/config/shared-options.html#css-postcss

 

Vite

Vite, 차세대 프런트엔드 개발 툴

ko.vitejs.dev

 

'Front-end > vue' 카테고리의 다른 글

[vue3] - html 내부에 template 태그가 보여요...  (1) 2025.02.25
[vue3, vscode] - script setup 내부에 snippet 주석 만들기  (1) 2025.02.25
Vue 에서 input 태그에 @click과 @change 사용 시 생긴 이슈  (1) 2024.01.24
[vue, es-lint] no-unused-vars 에러 문구 해결  (0) 2023.05.25
[vue2] 상태관리 vuex 사용 시 this.$store 가 undefined 뜨는 현상  (0) 2022.11.23

+ Recent posts

티스토리툴바