vue3 기초

vue3 강의를 수강하며, 학습한 내용을 정리하려고 한다!!
먼저 vue를 설치 한 후 생성되는 파일 및 vue에 대한 기초정보에 대해 간단히 정리해보겠다😉

Vue 프로젝트 기본 파일

1. vite.config.js

vite의 환경설정 파일
vite 명령어를 활용할 때 이 파일을 참고한다.

• alias
  파일 시스템의 경로에 별칭을 만들 때 사용한다.

alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },

위의 예시로 설명하자면, src 폴더의 경로를 @로 대신하겠다는 것이다.
별칭이 따로 없다면 상대경로를 활용해야 하기 때문에, alias를 활용하면 경로를 깔끔하게 작성할 수 있다.

2. package.json

npm으로 관리하기 위해 해당 프로젝트에 대한 정보를 담고 있는 파일
설치되어 있는 의존된 모듈의 리스트, 프로젝트에서 자주 사용하는 명령어를 script 내에 선언하는 등의 내용을 담고 있다.

3. node_modules

의존된 모듈이 설치된 directory

4. public

정적인 자산을 포함하고 있는 directory

5. asset

webpack이나 vite와 같은 빌드도구에 영향을 받는 이미지나 css등의 정적인 자산을 놓는 위치

6. App.vue

root component
웹이 실행되면 index.html을 렌더링하고, 그러면 index.html의 script 태그에 선언된 main.js을 불러와 실행시키게 된다.
그리고 main.js는 App.vue를 생성하고, index.html에 App.vue를 mount 한다.
=> 결국, App.vue가 렌더링 된다는 뜻

Vue 스타일 가이드

1. 컴포넌트 이름에 합성어 사용
   ❌ 안좋은 예시 ❌

app.component('todo', {
	// ...
})

export default {
	name: 'Todo'
}

✅ 좋은 예시 ✅

app.component('todo-item', {
	// ...
})

export default {
	name: 'TodoItem'
}

2. props 정의
   ❌ 안좋은 예시 ❌

props: ['status']

✅ 좋은 예시 ✅

// 최소한의 타입 정의
props: String

// 객체로 상세하게 정의하는 것이 좋다!
props: {
	status: {
    	type: String,
        required: true,
        
        validator: value => {
        	return [
            	'syncing',
                'error'
            ].includes(value)
        }
    }
}

Eslint / Prettier

eslint.config.js

rules 속성

각자의 rule을 추가하기 위한 속성이다.

예) console 사용금지 rule

rules: {
      'no-console': 'warn', // console 메서드 사용시 경고(warn) 표시
    },

=> rule 속성은 아래의 경우에 유용하게 사용할 수 있을 것 같다!!

rules: {
      'no-console': process.env.NODE_ENV === "production" ? "error" : "off" // production 상태일 때는 console을 에러로, 개발 중일 때는 console이 뜨도록
    },

prettierrc.json

prettier/prettier 속성

eslint와 prettier의 충돌을 피하기 위해 작성하는 것이다.

추가적은 프리티어의 option들은 공식 홈페이지로!
예)

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

settings.json

eslint.validate

eslint가 검사해야하는 언어를 Eslint 확장에 알려주는 것

예)

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown"
  ]

editor.codeActionsOnSave

VS Code에서 코드 파일을 저장할 때 자동으로 실행할 작업들을 설정하는 옵션

"editor.codeActionsOnSave": {
  "source.fixAll": "explicit" // 모든 자동 수정 작업을 명시적으로 실행
},
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // Vscode를 저장할 때 eslint의 규칙을 적용하라는 옵션
  },