82. Disabling Vue's Rules
npm create vue@latest
이번 시간에는 Vue의 ESLint 규칙에 대해 빠르게 논의해볼 것입니다.
과거에 학생들이 ESLint의 일부 규칙에 대해 불만을 제기한 적이 있습니다.
여러분도 이 규칙들을 좋아하지 않을 수 있습니다.
이 경우, 규칙을 비활성화하는 것이 완전히 괜찮습니다.
우리 프로젝트에서 그것이 어떻게 이루어지는지 살펴보겠습니다.
우리는 'AppAuth'라는 컴포넌트를 만들었습니다.
모든 컴포넌트는 'App'이라는 단어로 접두사를 붙일 것입니다.
그렇지 않으면 ESLint가 컴포넌트 이름에 대해 불평할 수 있습니다.
컴포넌트는 다중 단어로 되어야 합니다.
이 관행을 좋아하지 않는다면, 이 규칙을 비활성화할 수 있습니다.
편집기에서 이 규칙을 어기는 것을 시도해보세요.
'AppAuth' 컴포넌트의 이름을 'Auth'로 변경하세요.
그리고 컴포넌트 내부에서 내보내는 객체의 이름을 'auth'로 변경하세요.
그 후에, 'App' 컴포넌트를 열어 이 변경사항을 반영하도록 업데이트하세요.
스크립트 블록의 import 문을 업데이트하여 컴포넌트 이름을 'AppAuth'에서 'Auth'로 변경하세요.
그 다음, 컴포넌트 객체를 새 컴포넌트 이름으로 업데이트하세요.
마지막으로, 템플릿으로 스크롤하여 컴포넌트 태그를 'Auth'로 이름을 변경하세요.
우리는 컴포넌트의 이름을 변경했지만, ESLint는 만족하지 않을 것입니다.
'Auth' 컴포넌트로 돌아가면 에디터에서 오류가 발생합니다.
오류 위에 마우스를 올리면, '컴포넌트는 다중 단어로 되어야 한다'는 메시지가 나타납니다.
오류 메시지에서 규칙에 대한 링크를 찾을 수 있습니다.
그것을 클릭해보세요.
Vue는 각 규칙에 대해 전용 문서 페이지를 제공합니다.
이 문제에 대한 완전한 이해를 위해 설명을 읽을 수 있습니다.
그러나 우리의 목표는 이 규칙을 비활성화하는 것입니다.
구성 파일을 업데이트함으로써 규칙을 비활성화할 수 있습니다.
파일을 열기 전에 규칙의 이름을 복사하세요.
제목에 있는 이름을 복사합니다.
편집기로 돌아가 'eslintrc.cjs' 파일을 엽니다.
파일 하단에 'rules' 객체를 추가합니다.
그 다음에, 규칙의 이름을 속성 이름으로 붙여넣고, 값을 'off'로 설정합니다.
규칙을 'off'로 설정하면 앱에서 비활성화됩니다.
'Auth' 컴포넌트로 전환하여 차이를 확인하세요.
오류가 사라지지 않는다면 편집기를 재시작하거나 파일을 다시 열어야 할 수 있습니다.
그렇게 하면 오류가 사라질 것입니다.
이렇게 간단합니다.
시연 목적으로, 이 규칙을 비활성화한 상태로 두겠습니다.
마음에 들지 않는 규칙이 있다면, 그것을 비활성화하는 것이 좋습니다.
규칙이 작동하는지 확인하기 위해 'components' 디렉토리의 컴포넌트 이름을 변경해보세요.
'AppHeader' 컴포넌트를 'Header'로, 'views' 디렉토리의 'HomeView' 파일을 'Home'으로, 'AboutView' 컴포넌트를 'About'으로 이름을 변경하세요.
이 파일들의 이름을 변경하면 import 문의 오류로 인해 애플리케이션의 작동이 중단됩니다.
import 문을 빠르게 수정합시다.
'App' 파일을 열고 스크립트 블록에서 파일의 새 이름으로 import 문을 업데이트하세요.
다음으로 'router/index.js' 파일을 엽니다.
이 파일도 오류를 발생시킬 것입니다.
미래의 강의에서 이 파일의 코드를 검토할 것을 약속드립니다.
지금은 import 문을 수정하는 데 집중합시다.
import 문에서 'view'라는 단어를 제거하세요.
배열 내의 import 문을 업데이트하는 것을 잊지 마세요.
이렇게 하면 문제가 해결될 것입니다.
페이지를 새로고침하면 페이지가 정상적으로 작동해야 합니다.
페이지에서 오류가 발생하지 않아야 합니다.
다음 강의에서는 상태 관리로 다시 돌아갈 것입니다.
