inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)

Lazy Load (비동기 컴포넌트) 구성하기

선생님 안녕하세요

166

김태희

작성한 질문수 36

1

    component: () => import(/* webpackChunkName: "contact", webpackPrefetch:true */ '../views/Contact.vue')

저는 여태 언어를 사용해오면서 주석은 무조건 컴파일러가 무시하는 부분이라고 알고있었는데 어떻게 이 코드에서 주석처리 되어있는 부분이 작동을 할수있는지 여쭤보고싶습니다!

vuex vuejs

답변 2

1

김태희

여태 배웠던것에 대한 고정관념을 버리고 개발에 임해야겠다는 생각을 가지게됬습니다 훗날 저도 vue같은 프레임워크를 직접 개발할정도의 실력이 된다면 주석이라는것은 무조건 컴파일러가 무시한다라는 생각을 가지고있다면 이렇게 주석을 가지고 다양한 시도를 하지 못할것 같네요

색다른 경험을 한 것같아 정말 기분이 좋습니다! 선생님이 말씀해주신 답변도 명쾌하고요! 아침 일찍부터 감사드립니다 :D

0

개발자의 품격

여태 저도 김태희님이 문의하신 내용에 대한 의문을 안가졌었고, 제가 vue 강의를 하면서 그 누구도 이런 질문을 안했었는데,

김태희님께서는 이미 훌륭한 개발자가 될 자질을 가지고 있는것 같습니다.

응원하겠습니다.

1

개발자의 품격

안녕하세요.

너무 좋은 질문을 해주셔서 감사합니다. 말씀하신것처럼 주석은 컴파일러가 무시하는 부분이 맞습니다.

vue router 문서에서 제공하는 사용 문법 그대로 적용해서 사용하면서, 말씀하신 주석 부분이 어떻게 실행이 되지? 라는 의문을 가진적이 없는데 이렇게 좋은 질문을 해주셔서 감사합니다.

문의하신 부분에 대한 제 답변을 말씀드리겠습니다. vue에서 내부적으로 어떻게 처리하고 있는지는 모르겠지만, 결국 주석이라는 것도 해당 언어마다의 약속입니다. 주석에 대한 표기법이 약속이 되어 있고 해당 표기법을 사용한 것은 주석이고, 이건 코드로 실행하지 않겠다라고 약속이 되어 있는 거라고 생각하면 좋을 것 같습니다.

문의하신 부분에 대한 vue에서의 내부 처리로직은 모르겠지만,

작성된 코드를 실행을 위한 용도로 읽을수도 있지만,  실행이 아닌 파일 그 자체로, 파일 안의 내용을 읽는 코드를 짜는건 어려운 일이 아닙니다. 단순하게 import 안에 /**/ 부분이 있는지 문법적으로 확인하고, 있다면 /**/안의 내용을 파싱해서 처리하는 것은 어려운일이 아니기 때문에 주석으로 되어 있지만 프로그램적으로는 얼마든지 처리가 될 수 있는 부분이라고 생각합니다.

또한 /* */ 안에 내용을 보시면 일반적인 주석처럼 아무 내용이나 적을 수 있는게 아니고 특정한 형식을 갖는 정해진 key/value만 넣을 수 있게 한 것을 보면 주석 안에 내용을 파싱하고 자바스크립트 오브젝트 key/value 처럼 사용하는 것으로 추측이 됩니다.

제가 답변 드리는 내용이 정답이 아닐수 있지만, 요지는 주석으로 되어 있지만, 프로그램적으로 사용하는 것은 가능하다는 취지에서 답변드렸습니다.

google login 를 따라하다가 오류 발생

0

934

1

Expected indentation of 2 spaces but found 4 오류

0

873

1

카카오 로그인 에러가 뜨세요

0

433

1

Multi-word질문드립니다.

0

232

2

설치 이후 npm run serve 화면 안나옴

0

650

1

vue cli 문제

0

359

2

요청드립니다.

0

158

0

eslint 에러발생

0

1378

1

main.js 질문드립니다.

0

226

1

vuex-persistedstate 는 동작 자체를 안하네요?

0

367

1

15강.조회화면 저장실습 - params안됨

0

285

1

array 넘겨주기

0

162

0

유튜브 4시간 강의와는 어떤 차이가 있을까요?

0

283

1

prefetch기능

0

736

1

테이블 list 랜더링 되지 않습니다.

0

251

1

펑션을 한 depth 더 들어가면 $호출이 안되는 이유가 뭘까요?

0

284

2

name 값이 없는 경우 오류

0

207

1

vue config 파일 문의

0

343

1

실무 레벨에서 공통코드(기준정보)는 어떻게 구현 할까요?

0

323

1

강의자료가 따로 있나요?

0

360

1

computed 대신 직접 this.$store.state.user 사용은 안되나요?

0

168

0

lazy-load의 성능에 대해서 질문이 있습니다.

0

201

0

Prefetch 관련 질문 드립니다.

0

142

1

저는 왜 하나의 단어가 지정이 안될까요?

0

310

1