[인프런 강의 노트1] Vue.js 끝장내기 - 실무에 필요한 모든 것

회사에서 인프런 강의는 대부분 지원을 해주기에

프로젝트 기간동안 잘 모르고도 넘어갔던 것이랑

헷갈렸던 걸 되짚어보는 시간을 갖기 위해 인프론 vue 중급강의를 듣게 되었다

 

대부분 아는 내용이긴 하지만

한번 더 정리하는 기회가 되는 것 같아 나름 의미가 있다.

 

포스팅에선 새롭게 알게된 내용이나 기록해둘만한 것만 간단하게 메모하는 느낌으로

끄적끄적 해볼까 한다.

 

ESLint 에러 설정

 

*ESLint ? 쉽게 문법 구조 검사 도구 라고 생각해보자.

처음 세팅 시 필요한 건데,

ESLint 에러가 나면 localhost:portnumber는 까만 불투명 화면이 덮어지면서

에러문구가 보이고 시스템을 확인할 수가 없다.

로직문제는 아니고 단순히 문법?에 대한 오류인데 보통은 로그에 에러는 뜨더라도

시스템은 운영은 되어야 하기에 아래와 같이 설정한다.

- 프로젝트 최상단에 vue.config.js 파일을 만들고 아래와 같이 입력

module.exports = {
	devServer: {
		overlay: false,
	},
};

 

도구의 설정파일은 수정되었으면 서버 재실행을 해야한다.

 

혹시, vue create 시 이미 vue.config.js파일이 생성되고, 코드가 작성되어있는 상태라면

아래와 같이 devServer를 넣어주면 된다.

나는 이거때문에 조큼 애먹었음..

* 참고 : https://webpack.js.org/configuration/dev-server/#overlay

DevServer | webpack

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    client: {
      overlay: false,
    },
  },
});

---

jsconfig.json으로 파일절대경로 설정

파일 import 시 경로가 만약 "../../../../test.vue"식으로 된다면?

누가봐도 안이쁘다

"@/test.vue" 형식으로 import할 수 있도록 절대경로를 설정해주자

src를 절대경로로 설정한 내용

1) jsconfig.json 에서 node모듈과 빌드폴더인 dist를 제외하고 src경로를 @으로 지정

2) App.vue에서 Demo폴더의 test.vue는 "../../" 이 아닌 @ 를 통해 import