OK DDODDO LAB

<BaseInput> 같은 커스텀 컴포넌트에서는 Vue의 구조 특성상 <label for="..."> 구조가 잘못되기 쉽습니다.

스크린리더는 이 input이 어떤 필드인지 알 수 없습니다.

<!-- 문제 있는 코드 -->
<template>
  <div>
    <label>{{ label }}</label>
    <input :value="modelValue" />
  </div>
</template>

<!-- 개선 포인트 -->

1. input과 label 연결을 위한 id 생성
   <template>
     <div>
       <label :for="inputId">{{ label }}</label>
       <input
         :id="inputId"
         :value="modelValue"
         @input="$emit('update:modelValue', $event.target.value)"
       />
     </div>
   </template>
   
   <script setup>
   const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
   </script>
2. aria-labelledby 대체 방식
   시각적으로 라벨을 숨겨야 할 경우:
   <label :id="labelId" class="sr-only">{{ label }}</label>
   <input :aria-labelledby="labelId" ... />
   
   
3. v-model 호환 개선
   defineProps(['modelValue', 'label']);
   defineEmits(['update:modelValue']);
   
   

QA 도구(Axe, Lighthouse, NVDA) 모두에서 라벨 오류가 사라졌으며, 해당 방식은 이후 전체 입력 컴포넌트에 공통 적용되어 코드 품질 및 접근성 준수도를 동시에 끌어올릴 수 있었습니다.

vue2 라우터 설치만 3번째...라우터만 설치하면 나타나는 에러늪!!!!

꼭? 필요한 설정이 있어서 기록합니다.

에러

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in [eslint]
D:\stduy\vue2-project\todo2\src\views\HomeView.vue
  13:11  error  Component name "home" should always be multi-word  vue/multi-word-component-names

 * 해결 *

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   lintOnSave:false  <--- 추가
})

vue.config.js 파일에 lintOnSave의 속성을 false로 추가해주면 컴포넌트 단일 이름의 에러 인식을 막을 수 있습니다.
동일 에러는 사라지고 정상 작동 되고있습니다.^^;

참고
https://velog.io/@ensun_p/Vue-router-%EC%84%A4%EC%B9%98-%EC%BB%B4%ED%8C%8C%EC%9D%BC-%EC%98%A4%EB%A5%98-%EC%A3%BC%EC%9D%98

실행

npm install vue-router --save

에러

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: navtest@0.1.0
npm ERR! Found: vue@2.7.16
npm ERR! node_modules/vue
npm ERR!   vue@"^2.7.16" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.2.0" from vue-router@4.3.1
npm ERR! node_modules/vue-router
npm ERR!   vue-router@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\okha4\AppData\Local\npm-cache\_logs\2024-04-17T10_28_35_801Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\okha4\AppData\Local\npm-cache\_logs\2024-04-17T10_28_35_801Z-debug-0.log

* 1차 *

검색을 하니  npm version과 vue router 간의 문제라고 하여.  npm 버전을 확인해보았습니다.

npm 10.2.4 버전 너무 최신인 듯 합니다.ㅜㅜ

1. npm 버전 변경
npm install -g npm@6.14.8

2. router 재 설치
npm install vue-router --save

에러

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@3. I'll try to do my best with it!
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated webpack-chain@6.5.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@vue%2fvue-loader-v15 - Not found
npm ERR! 404
npm ERR! 404  '@vue/vue-loader-v15@15.11.1' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of '@vue/cli-service'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\okha4\AppData\Roaming\npm-cache\_logs\2024-04-17T10_44_41_959Z-debug.log

이번에는 다른에러...ㅜㅜ

검색하니 아래와 같이 하면 되다고하여 실행 하였습니다.

npm i --legacy-peer-deps

드디어!!! 

* 해결 *

vue2 router 설치 어렵네요.ㅠㅠ
npm버전 잘 확인해 보세요.

https://github.com/vuejs/vue-cli/issues/6270

에러

error Component name "Header" should always be multi-word

( 구성 요소 이름 "***"는 항상 여러 단어로 이루어져야 합니다.)

* 해결 *

네이밍을 할때는 카멜 케이스, 파스칼 케이스, 케밥 케이스 으로 네이밍 단어를 구분해줘야만 여러 단어로 인식한다!

참고

eslint-plugin-vue 공식문서

에러
  0 errors and 29 warnings potentially fixable with the `--fix` option.

* 해결 *

npm run lint -- --fix