inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발

단일 파일 컴포넌트 2

index 페이지에서 main.js 관련 질문입니다

206

Hwanse

작성한 질문수 8

1

안녕하세요 강사님~

어느덧 강의도 완강을 향해 달려가고 있습니다!

강의를 들으면서 이해가 가지 않는 부분이 있어서 질문이 있습니다.

vue cli 를 활용하여 프로젝트를 구성하지 않았던 3-component 시간에는  index 페이지에 app.js 모듈을 불러와서 vue 인스턴스를 시작하였는데요.

그런데 이번에  vue cli 를 활용하면서 생성한 프로젝트에서는 index 파일에 vue 인스턴스를 초기화하는 main.js 모듈을 포함하지 않아도 vue 인스턴스가 시작하는 것을 볼수가 있는데 어떠한 과정에서 그렇게 동작하는지 잘 이해가 안갑니다.

혹시 index 파일에서  명시한 /dist/build.js 모듈을 포함시키는 것을 볼 수 있는데 이 부분과 연관성이 있는걸까요?

javascript vuejs

답변 1

2

김정환

네 맞습니다. 이 부분은 웹팩을 좀 살펴 보아야 하는데요.

웹팩 설정파일인 webpack.config.js에 보면 entry와 output이 있습니다.

entry: './src/main.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
},

웹팩이 자바스크립트 파일을 하나로 합치는 작업을 하는데요 코드의 시작점을 지정해 주어야합니다. entry가 바로 그 시작점이고요 이 main.js에서 뷰 인스턴스를 만드는 작업을 합니다.

웹팩은 엔트리에서 시작해 모든 코드를 하나로 만들어서 output에 지정한 파일로 저장합니다. 그 경로가 바로 dist/bundle.js고요. html은 바로 이 파일, 웹팩으로 처리된(번들된) 파일을 로딩하기 때문에 vue 어플리케이션이 동작하는 것입니다.

강사님, 브랜치명 어떻게 만드셨어요?

2

220

1

이미지 파일 업데이트가 안돼있는 거 같습니다

1

516

1

git사용법을 잘 모르겠습니다..

1

507

1

@event 질문입니다.

1

265

1

return 문자열이 여러줄은 어떻게 설정하나요?

1

656

2

탭뷰에서 이벤트를 받아서 메인컨트롤러에게 전달만해주는 방식도 괜찮나요?

1

266

1

ResultComponent.vue 에러?

1

258

1

선생님 안녕하세요!

0

250

1

return new Promise 와 return Promise.resolve

2

477

1

바닐라

1

327

1

실습 관련 질무

1

251

1

event.preventDefault() 문의

1

300

1

컴퍼넌트 질문이 있습니다.

0

217

1

return this에 대해서 (재업로드)

0

359

1

return this에 대해서 이해가 잘 되지 않아요

0

1184

1

강의 내용을 따라 했는데도 안되는 문제

1

315

2

크롬으로 로컬 띄었더니 에러가나네요

1

327

0

에러가 나네요

1

334

2

git checkout 중에 질문드립니다.

1

308

1

bindEvent 메소드를 왜추가하는지 궁금해서 질문드립니다.

2

580

1

안녕하세요 vue.js 처음 입문하는데 강사님 강의로 시작하게 되었습니다.

0

221

1

학습내용 정리 관련 질문입니다!

0

182

1

lite-server로 구현해야하는 이유는 무엇인가요~?

1

532

2

에러가 나는데 무슨 에러인지 모르겠어요.

1

258

1