[Udemy Vue 완벽가이드 Section7] 82. Vue 코드 및 '.vue'파일 검사하기

# src 폴더

- src(source) 폴더에는 우리가 코드를 작성할 모든 JS파일이 있다.

- 결국, 우리의 메인 작업 디렉토리는 src 폴더.

- 이 src폴더에 Vue 애플리케이션 코드를 작성할 예정.

 

## main.js 파일

- 이 main.js파일이 메인 진입점이다.

- 여기에 지금까진 쓴 적 없는 import 구문이 있다. 이 import 구문은 JS의 기본 코드. 한 파일에서 다른 파일로 코드를 불러오는 JS 기능이다.

* ES 모듈에 대하여 ↓

2023.08.16 - [JavaScript] - 자바스크립트 ES6모듈 내보내기/불러오기(export/import)

* note: Vue 프로젝트는 main.js 파일을 먼저 로드하고 실행하도록 설정되어있다.

 

 

1/ import { createApp } from 'vue';

- 위 코드를 보면, Vue 프레임워크로부터 createApp을 불러온다.

- 이전엔 CDN으로 Vue를 가져와서 사용하여 전역에서 사용할 수 있는 Vue객체가 있었지만, 이제는 그 Vue객체가 없으니 Vue.createApp을 쓰지 않는다. 대신, 이제는 Vue 프레임워크로부터 createApp 메서드와 같은 항목을 불러올 수 있다.

<!--index.html-->
<script src="https://unpkg.com/vue@next"></script><!--CDN으로 vue를 가져오고있다.-->

//app.js
const app = Vue.createApp({}); //전역에서 Vue객체 사용

 

2/ import App from './App.vue'; createApp(App)

다음으로 App.vue 파일에서 가져온 것으로 Vue앱을 생성한다.

 

3/ mount('#app')

그 다음 Vue앱을 #app인 요소에 마운팅한다.

여기서 #app은 바로 public > index.html 파일 내에 id="app"이 있는 이 div태그.

<!--index.html-->
<div id="app"></div>

 

이렇게 import구문을 이용해 createApp을 호출하는 또 다른 방법이다. 이게 바로 모던 JS에서 파일 간에 기능을 내보내고 불러오는 방법.

 

 

## App.vue 파일

그렇다면 App.vue 파일은 뭘까?

createApp은 항상 data 등이 있는 객체를 취하는데, 왜 이 경우에는 App.vue파일에서 가져온 App을 createApp으로 전달하는 것일까?

const app = Vue.createApp({
 data(){
  return {}
 },
})

 

- App.vue 파일은 Vue.js의 특별한 기능. 또는 Vue CLI 프로젝트의 특별한 기능.

- App.vue 파일은 Vue앱을 작성할 수 있게하고, 보다 정확하게는 Vue 컴포넌트를 훨씬 나은 방법으로 작성할 수 있게 도와준다.

- App.vue 파일에서는 template, script, style 영역 이렇게 3개의 섹션으로 나눌 수 있다.

 

### template

App.vue 파일을 보면 template태그가 보인다. App의 템플릿이 여기에 들어있다.

//App.vue
<template>
 <img alt="Vue logo" src="./assets/logo.png">
 <HelloWorld msg="Welcome to Your Vue.js App" />
</template>

 

### script

구성 객체가 든 script 태그도 있다. key만 본 적 없는 다른 이름일 뿐, 여기에도 데이터를 추가할 수 있다.

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
 data(){},
 name: 'App',
 components: {
  HelloWorld
 }
}
</script>

 

### style

style태그도 있다.

- 스타일을 정의하는 태그. Vue앱에서 적용할 수 있는 CSS 스타일을 정의.

 

 

이 App.vue 파일은 Vue CLI가 백그라운드에서 코드를 변환해 작동하게 만든다.

 

template, script, style 이렇게 3가지 섹션으로 나눠 Vue앱을 정의하는 더 나은 방법으로 우리는 코드를 작성할 수 있다. 그리고 이 코드는 최종적으로 브라우저에서도 작동한다.

 

 

### App.vue 파일은 브라우저에서 어떻게 작동할까?

Using a Build Workflow!

Vue CLI로 생성한 프로젝트는 빌드 워크플로우를 사용한다.

 

 

아래는 순서대로 Build Workflow를 설명해보았다.

 

1/ Our Code : Uses next-gen and Vue-specific Syntax & Features.

우리가 작성한 코드가 브라우저에서 실행되지 않는 코드라는 걸 근사하게 표현한 것. 

대신 우리가 작성한 코드엔 JavaScript의 특화된 차세대 기능이 있고, .vue파일과 같이 Vue에 특화된 기능과 구문도 있다. 브라우저에서는 작동하지 않는 방식의 기능.

 

template, script, style 구조의 App.vue 파일을 브라우저에 로드하려고 하면 아무 일도 일어나지 않는다.

왜냐하면 브라우저는 해당 코드로 뭘 해야할지 모르니깐. 하지만, 이게 아주 중요한 포인트이다.

 

 

2/ "Build Step" : Changes code to use standard JS Code.

Vue CLI로 생성된 프로젝트에는 백그라운드에서 코드를 다루는 다양한 도구가 있고, 이 도구들이 해당 코드를 '빌드 단계(Build Step)'에 따라 브라우저에서 작동하는 코드로 변환한다.

이 빌드 단계는 우리의 코드에 일부 변환을 적용하여, 브라우저에서 작동하는 표준 JavaScript 기능을 갖춘 일반 JavaScript 코드로 변경하는 것을 의미한다.

 

 

3/ Development or Real Server : Host and run a regular JavaScript-based web app.

그 다음, 앱을 호스팅하는 개발 서버 혹은 실제 웹 서버는 화면에 무언가를 띄울 수 있게 된다.

 

 

최종적으로 우리 프로젝트가 내부적으로 이러한 설정을 갖추고 있다.

즉, npm run serve 스크립트는 개발 서버만 가동하는게 아니라, 코드 파일을 감시하고 코드를 변환하는 '빌드 프로세스'도 가동한다.

 

template, script, style로 구분되어 있는 코드도 결국 브라우저에서 실행하는 표준 JS로 변환한다.

**이 부분은 webpack이라는 모듈 번들러에 대한 설명을 추가하여 추후 더 설명을 덧붙일 예정.

 

App.vue 파일은 단일 파일 컴포넌트로 불린다. (Single-File Component)

이러한 SFC는 Vue 컴포넌트나 Vue 코드를 작성하기에 쉬운 방법을 제공한다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.