한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.
Vue.js
vue.js의 경우 사용난이도도 낮고, 성숙도도 높기에 기본적인 프레임워크의 정체성을 이해하는데 권장합니다.
1. CDN으로 Vue.js시작하기
Vue.js의 경우 CDN만 가지고도 프로젝트를 시작할 수 있습니다.
1-1 script삽입
<script src="https://unpkg.com/vue@next"></script>1-2 기본 구조 확인
index.html
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<h1>{{ message }}</h1>
</div>main.js
Vue.createApp().mount('#app')위와 같이 코드를 작성해주면 vue.js가 선택자를 통해 html의 선택자 부분(#app)에 vue.js문법을 사용할 수 있도록 도와줍니다.
1-3 동작 확인
main.js
//JS
Vue.creatApp({
data() {
return {
message: 'Hello World'
}
}
}).mount('#app')위 결과를 확인해보면, message데이터가 화면에 출력이 되는 것은 물론 메세지를 갱신되는 경우 갱신된 메세지가 바로 html에 반영되어서 화면에 출력되는 것을 확인할 수 있습니다.
이를 반응성이라고 하며 반응성때문에 vue.js와 같은 모던한 프레임워크가 선호되는 이유입니다.
2. Vue.CLI
vue.js는 단일 페이지 에플리케이션을 빠르게 구축할 수 있는 공식 CLI(Command-Line Interface)를 제공하기 때문에 터미털을 통해 손쉽게 명령을 실행할 수 있습니다.
※vue.cli의 경우 내부적으로 webpack을 사용하고 있으며, 웹팩에 대한 기본적인 옵션는 숨겨져있습니다. 또한 숨겨진 부분을 vue-cli-service를 통해 제공하고 있습니다.
https://cli.vuejs.org/2-1 Vue CLI 패키지 설치
$ npm i -g @vue/cli2-2 프로젝트 생성( vue create helloworld )
vue create 폴더명//어떤 설치를 진행할 것인지 묻게 됩니다.
Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint) //설치
Manually select features
$ cd 폴더명
$ code . -r2-3 package.json살펴보기
npm run으로 실행할 수 있는 명령들이 명시되어 있습니다.
"script": {
"serve" : "vue-cli-service serve",
"build" : "vue-cli-service build",
"lint" : "vue-cli-service lint"
}
... //lint에 해당하는 구성옵션 및 규칙을 만들어낼 수 있다.
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}//여기에 기본적인 구성옵션 외 원하는 구성옵션을 추가적으로 명시 가능.
},
"browserslist": [ //browserlist가 명시되어 있으므로 babel이라던가 postcss를 바로 사용 가능
"> 1%",
"last 2 versions",
"not dead"
]
}2-4 babel.config.js살펴보기
기본적인 preset이 명시되어 있습니다.
※구성옵션을 전부 다 vue.cli에서 관리를 하고 있기 때문에 입문자 입장에서는 구성옵션들을 최대한 신경쓰지 않고 vue.js문법에 집중해서 프로젝트를 만든다는 장점이 있지만 세부적인 내용을 정리하면서 나만의 프로젝트를 만들고 싶은 개발자 입장에서는 아쉬울 수 있습니다.
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}2-5 public > index.html살펴보기
vue.js를 통해 id가 app인 부분에 해당하는 내용을 연결해서 사용하는 것을 알 수 있습니다.
<body>
....
<div id="app"></div>
<!-- built files will be auto injected -->
</body>2-6 src > main.js살펴보기
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')creatApp을 vue라는 패키지에서 가지고 와서 바로 creatApp().mount()를 연결하고 있습니다.
mount라는 메소드를 통해 html의 app이라는 아이디를 가지고 있는 선택자를 선택해서, 프로젝트를 바로 연결해줍니다.
2-7 src > App.vue살펴보기
template / script / style이라는 세개의 구조로 나누어져있습니다.
template 에는 기본적인 html의 내용을 작성하며, script js내용을 작성, style css내용을 작성하면 됩니다.
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> // ★이부분은 지우고 프로젝트를 시작하면 된다.
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>