잉어빵

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

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

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

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

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

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

출처 - vue 래퍼..

최근에 사수가 퇴사하게 되면서 팀 사정상 부서 이동이 되었고... 기존 파트에서 사용하던 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() 기본 구조 템플릿"
    }

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

// 커스텀 컴포넌트 형태
<커스텀 컴포넌트 v-model="모델명" @click="클릭 이벤트"/>


// 커스텀 컴포넌트 내부
<template>
	<div>
    	<!--문제 되던 코드-->
    	<input type="radio" v-model="모델명" @click="커스텀 클릭 이벤트"/>
        
        <!--수정 코드 -->
        <input type="radio" v-model="모델명" @change="커스텀 클릭 이벤트"/>
    </div>    
</template>


-- 이하 생략 --

커스텀 클릭 이벤트(evt) {
	this.$emit('click', evt);
}

vue에서 switch 컴포넌트를 만드는 중 커스텀 컴포넌트에 @click 이벤트를 달아야 하는 상황이 생겼습니다.

내부에는 radio 타입의 input 태그가 있고 그곳에 @click 이벤트를 달아서 클릭 시에 이벤트를 올려야지 생각했는데 의도와 다르게 작동하였습니다.

의도할 때는 해당 태그의 v-model 값이 변경 되고 함수가 실행 될거라고 생각하였으나 클릭 이벤트가 먼저 발생되었기 때문에 @change 이벤트로 변경하여 실행하였더니 의도된대로 잘 되었습니다.

정리 해보자면 @click 이벤트는 클릭 시 발생 되는 이벤트고 @change는 값이 변화된 것을 감지하고 실행 되는 이벤트기 때문에 차이가 있는것을 알 수 있었습니다.