72. Reviewing the Files
npm create vue@latest
.eslintrc.cjs
ESLint 설정이 포함되어있습니다.module.exports된 객체에는 몇 가지 설정이 추가되어 있습니다.
root: true: 하위 디렉토리가 다른 규칙을 가질 수 있습니다. 디렉토리 내에서 구성 파일을 생성할 수 있습니다.
ESLint는 루트 디렉토리의 구성 파일 대신 내부 디렉토리의 규칙을 적용합니다.
이 속성을true로 설정함으로써 루트 구성 파일을 지정할 수 있습니다.extends: 다음으로extends라는 배열이 있습니다. 리눅스를 위한 규칙을 설정하는 것은 지루할 수 있습니다.
수십 가지의 규칙들이 있습니다.
우리의 파일은 매우 크게 될 것입니다.
큰 파일을 피하기 위해, 다른 구성 파일들로부터 규칙을 적용할 수 있습니다.
이 배열에서, 우리는 세 개의 파일로부터 규칙을 적용하고 있습니다.
첫번째 파일은plugin:vue/vue3-essential이라고 불립니다.
이는 뷰 컴포넌트의 코드 품질을 확인하는 규칙들입니다.
다음으로는eslint:recommended가 있습니다.
이 규칙들은ESLint패키지로부터 추천되는 규칙들입니다.
마지막으로@vue/eslint-config-prettier/skip-formatting파일이 있습니다.prettier는eslint의 규칙과 충돌할 수 있습니다.
이러한 충돌을 피하기 위해, 이 파일은eslint가prettier와 충돌하지 않도록 구성합니다.
대부분의 프로젝트에서, 이 파일들로부터의 설정들로 충분할 것입니다.overrides: 때때로 우리는 모든 파일에 동일한 규칙을 적용하고 싶지 않을 수 있습니다.
특정 파일에 특별한 규칙을 적용하기 위해 이 배열을 사용할 수 있습니다.
이 배열에서, 각 객체는 파일 세트를 나타낼 수 있습니다.
이 예제에서는cypress테스트 파일에 특별한 규칙 세트가 적용되고 있습니다.
전반적으로, eslint 구성 파일에 대해 설명이 끝났습니다.
style guide
다음 파일로 넘어가기 전에, 이 강의의 리소스 섹션에 있는 스타일 가이드 링크를 확인하시기 바랍니다.
스타일 가이드는 코드 서식 및 작성에 대한 추천 지침들을 나열합니다.
'추천'이라는 단어를 강조하고 싶습니다.
이러한 지침들은 대부분 선택적입니다.
Vue에는 필수, 강력 추천, 추천, 주의해서 사용 카테고리의 4가지 규칙 카테고리가 있습니다.
필수 카테고리의 규칙들은 매우 중요하게 여겨집니다.
이 규칙들을 따르지 않으면 우리의 애플리케이션에서 오류가 발생할 수 있습니다.
그들은 표준 관행으로 간주되므로 항상 따라야 합니다.
다른 카테고리에는 선택적인 규칙들이 포함되어 있습니다.
마지막 카테고리는 '주의해서 사용'이라고 불리며, 이 카테고리의 규칙들은 특별한 에지 케이스를 위한 것들입니다.
특별한 필요가 없는 한 정기적으로 사용해서는 안 됩니다.
이 가정에서 저는 Vue에서 지정한 규칙들을 최대한 따를 것이지만, 개념을 더 잘 설명하기 위해 때때로 이 규칙들에서 벗어날 수도 있습니다.
예를 들어, 코드에서 로그 문을 수행하지 않는 것이 권장되지만, 디버깅 목적으로 값들을 로그할 필요가 있을 수 있습니다.
이 규칙들을 원하는 대로 준수하시면됩니다.
cypress.config.ts
cypress 테스팅 도구 설정을 포함합니다.
나중에 테스팅 섹션에서 다루도록 하겠습니다.
package.json
다양한 의존성 목록을 포함합니다.scripts 객체에는 테스트와 관련된 명령어가 포함되어 있습니다.
프로젝트 린트 자동화에 대한 명령어도 포함되어 있습니다.
.vscode 폴더
Visual Studio Code 설정이 포함되어 있습니다.
경고를 원하지 않으면 해당 폴더를 삭제해도됩니다.
public 폴더
대부분 동일하며, 현재는 favicon 파일만 포함하고 있습니다.
src 폴더의 주요 변경사항
views, stores, router 3개의 새로운 디렉토리가 생성되었습니다.tests 디렉토리를 추가해 테스트 관련 파일을 작성할 수 있습니다.