2. Root 컴포넌트 렌더링 과정 + ESLint, Prettier

Root 컴포넌트 렌더링 과정

alias

- 파일 시스템 경로에 별칭을 만들때 사용한다

 

App.vue가 Root 컴포넌트 

1. 맨 처음에 Web이 실행되면 index.html 파일을 실행한다.

2. 그러면 스크립트 태그에 선언된 메인 모듈을 가져온다. 그게 main.js 다.

3. main.js를 살펴보면 createApp이란 메서드가 있다. 이건 실제 Vue 애플리케이션. Vue인스턴스를 생성하는 메서드다.

4. 여기에 App.vue가 들어가게 된다.

5. 그리고 생성된 vue인스턴스를 mount() 메서드 안에 #app에 마운트 시킨다. 

6. App.vue에 있는 root 컴포넌트가 렌더링 된다.

---

ESLint, Prettier

https://ko.vuejs.org/style-guide/

Vue.js

애플리케이션을 개발할때 코드컨벤션은 협업에 굉장히 중요하다.

vue로 개발할때 어떤점이 좋았다, 안좋았다 알려주는 가이드인 스타일 가이드

이걸 ESLint를 사용하여 자동검사 할 수 있다.

@vue/eslint-config-prettier 

- ESLint와 Prettier의 불필요한 충돌을 끄는 설정

 

https://eslint.org/docs/latest/rules/

Rules Reference - ESLint - Pluggable JavaScript Linter

ESLint 공식사이트 Rules Reference 참고해서 사용하기

---

https://prettier.io/docs/en/options.html

Prettier · Opinionated Code Formatter

프리티어 공식사이트의 Options 참고해서 사용하기

---

settings.json 설정을 해보자

codeActionsOnSave는 vs코드 저장시 eslint 적용하라는 옵션이다.

settings.json 설정 화면

 

format on save 옵션 끄기. 이걸 반드시 꺼야 충돌이 안난다.

 

---

npm run lint

npm run lint 명령어로 전체 파일 포맷을 맞출수 있음