인프런 커뮤니티 질문&답변
작성한 질문수
Where is the "vue entry point"?
24.07.07 11:18 작성
·
146
·
수정됨
0
index.html?...
당연히(?) 아무생각없이(?)
프로젝트 빌드하고 실행하면 entry point 가 index.html 이라고만 생각하고 있다가 ..이번 강의를 보면서
index_cloak.html 이 파일명을 변경해도
먼저 동작하네요
질문:
단순의 index.html은 파일명을 변경해도 상관없는지요?
동영상 cloak 부분을 설명하실때 내용을 보면
바로 파일명을 index_cloak.html로 변경해서 설명해주시는 걸 보면 .... 흐음..
" index.html 을 index_cloak.html 로 변경해서
index_cloak.html 부터 (?) 시작해라 " 같은 환경설정은 없는거 같은데..
JSP.. 같이
<welcom-file-list> 가 있는것도 아니고...
App.vue .. is root commonent? ..뭔상관?..
코딩님 쾌변좀 부탁드립니다. ^^
답변 3
0
2024. 07. 07. 13:00
아 그러면 코딩님 ..
강의를 보면
index.html 을 교체(rename) (index_cloak.html)로 변경하시고 바로 진행 하셨자나요..
index_cloak.html로 변경하셔서 설명 해 주시는데...
"index.html 이 아닌 (지금 변경한)index_cloak.html 이다 "
는 어떻게 아는지가 궁금하다 ... 입니다.
기존 index.html 은 버젓이 존재하고있는데 말이줘....
그려면 ...
index_cloak.html 를 index_helloworld.html
or
index.html을 index_where.html 로 재차
변경하면 어떻게 되는지요?
1. index.html
2. index_cloak.html
3. index_hello.html
4. index_내맘데로.html
안에 내용은 같을 것이고요...
너(vue) 뭐(어느파일) 부터 진입할래?
우째 아는 지요...? ..ㅠㅠ;;;
코딩님 답변 발췌
..................
index.html 파일은 애플리케이션의 기본 HTML 템플릿 파일로 사용됩니다. 이 파일은 Vue 애플리케이션이 실행될 때 브라우저에 의해 처음 로드되는 HTML 문서입니다.
....................
※ index.html을 index_cloak.html로 변경하시고 바로 설명(강의) 하셨어서요
--- 짐코딩 꼬투리 잡이 드림 ---
0
2024. 07. 07. 12:36
"강의에서는 v-cloak를 설명하기 위해 별도의 뷰 앱(cdn으로 설"치한)을 구성한 것입니다."
cdn으로 설치하고 진행 하는 부분을 여러번 돌려 보았는데요..
이해를 못하고 있었나 봅니다. (지금도 잘 모르겠음)
이번 강의 목정은 cloak 가 아니였는데...
..
암튼 감사드립니다.
--- 짐코딩 꼬투리 잡이 드림 ---
0
2024. 07. 07. 11:50
뷰 애플리케이션에서 진입점(entry point)은 애플리케이션이 시작되는 지점을 의미합니다. 진입점은 보통 애플리케이션이 실행되기 위해 필요한 초기 설정, 컴포넌트 로딩, 렌더링 등을 담당하는 코드가 위치한 곳입니다.
예를 들어, Vue.js 애플리케이션에서 main.js 파일이 일반적으로 진입점 파일로 사용됩니다. 이 파일에서는 Vue 인스턴스를 생성하고, 루트 컴포넌트를 렌더링하며, 플러그인이나 전역 설정을 적용하는 등의 작업이 이루어집니다.
다음은 Vue.js 애플리케이션의 일반적인 진입점 코드 예시입니다:
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')위 코드에서 main.js 파일은 애플리케이션의 진입점으로, Vue 인스턴스를 생성하고 App.vue 컴포넌트를 렌더링하며, 라우터와 스토어를 연결합니다. 이를 통해 애플리케이션이 시작되고 브라우저에서 표시됩니다.
그리고 말씀하신 Vue 애플리케이션에서 index.html 파일은 애플리케이션의 기본 HTML 템플릿 파일로 사용됩니다. 이 파일은 Vue 애플리케이션이 실행될 때 브라우저에 의해 처음 로드되는 HTML 문서입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue App</title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
<!-- built files will be auto injected -->
</body>
</html>따라서, index.html 파일은 Vue 애플리케이션의 기본 골격을 제공하며, Vue 인스턴스가 마운트되어 애플리케이션이 실행될 수 있도록 하는 역할을 합니다.
강의에서는 v-cloak를 설명하기 위해 별도의 뷰 앱(cdn으로 설치한)을 구성한 것입니다.
2024. 07. 08. 12:34
질문) 너(vue) 뭐(어느파일) 부터 진입할래? 우째 아는 지요...? ..ㅠㅠ;;;
답변) 제가
index_cloak.html에서 마우스 우클릭으로 Live Server 로 해당 페이지를 요청(실행)했으니까요.index_cloak.html 파일안에 보면 cdn으로 Vue를 설치했습니다.
그리고 Live Server (VSCode 확장 프로그램)으로 해당 페이지를 요청한거고요.
마우스로 해당 index_cloak.html 페이지를 요청했습니다.