title | date | categories | tags | ||||
---|---|---|---|---|---|---|---|
Vue Lesson |
2021-12-06 |
|
|
vue-lesson{:target="_blank"}
$ sudo apt update
$ sudo apt install nodejs // node download
$ nodejs -v // read version
$ sudo apt install npm // npm(node manager) download
sudo apt install git-all
- vetur, TSLInt(๋ฌธ๋ฒ ์ค๋ฅ ์ถ์ ), ESLint, auto close tag, Metarial icon thema, Night owl
- vscode git ๊ถํ์ค์ : https://hyeo-noo.tistory.com/184
- ํฌ๋กฌ ํ๋ฌ๊ทธ์ธ ์ค์ : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?hl=ko
// vue ์ค์น
jonah@jonah-15U530-LH10K:~/Documents/vue-lesson$ npm install @vue/cli
โ ๏ธ npm install -g @vue.cli : ๊ธ๋ก๋ฒ๋ก ์ค์นํ๋ฉด ์๋ฌ๋จ
npm WARN checkPermissions Missing write access to /usr/local/lib
๊ถํ ์๋ฌ์ธ ๋ฏํ๋ฐ ๊ท์ฐฎ์์ ์ ์ญ ์ต์ ๋บ
์ค๋ฅ ์ถ์ฒ
jonah@jonah-15U530-LH10K:~/Documents/vue-lesson$ vue -version
// ๋ฒ์ ์กฐํํ๋๋ ์ค๋ฅ๋์ ์ํค๋ ๋๋ก ์ค์นํจ
Command 'vue' not found, but can be installed with:
sudo snap install vue
โ ์ด๊ฑฐ ์๋
sudo npm install -g @vue/cli
โ ์ด๊ฒ๋ ์๋
jonah@jonah-15U530-LH10K:~/Documents/vue-lesson$ vue -version
bash: /snap/bin/vue: No such file or directory
root@jonah-15U530-LH10K:~# npm uninstall -g @vue/cli
npm clear cache --force
โ ๋ค์ ์ค์น
sudo npm install vue
sudo npm install -g @vue/cli
root@jonah-15U530-LH10K:~# vue --version
@vue/cli 4.5.15
root@jonah-15U530-LH10K:~# ls
node_modules package-lock.json snap
root@jonah-15U530-LH10K:/home/jonah/Documents/vue-lesson# vue init webpack vue-todo
โ vue init webpack vue-todo
: vue/cli2 ๋ช
๋ น์ด๋ผ ๋ค์ ๋ช
๋ น์ด๋ก 2๋ฅผ ์ค์นํ๋ผ๋ ์๋ฌ ์ถ๋ ฅ
Command vue init requires a global addon to be installed.
Please run npm i -g @vue/cli-init and try again.
// ์ค์น
root@jonah-15U530-LH10K:/home/jonah/Documents/vue-lesson# npm i -g @vue/cli-init
root@jonah-15U530-LH10K:/home/jonah/Documents/vue-lesson# sudo vue init webpack vue-todo
? Project name vue-todo
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (rec
ommended) npm
# Project initialization finished!
# ========================
To get started:
cd vue-todo
npm run dev
โ ์ค์น๋๊ธด ํจ. ๊ทผ๋ฐ vue/cli3 ๋ก ํด์ผ์ง.
// vue create
$ vue create vue-todo-cli3
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
โ ์๋ฌ
npm ERR! code EINTEGRITY
npm ERR! sha512-vKsoSQAyBmxS35JUOOt+07cLc6Nk/2ljLIHwmq2/NM6hdioUaqEXq/S+nXvbvXbZkNDlWOymPanJGOc4CBjSJA== integrity checksum failed when using sha512: wanted sha512-vKsoSQAyBmxS35JUOOt+07cLc6Nk/2ljLIHwmq2/NM6hdioUaqEXq/S+nXvbvXbZkNDlWOymPanJGOc4CBjSJA== but got sha512-z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg==. (0 bytes)
โ ํด๊ฒฐ : ์ฑ๊ณต!!
// ๋ก์ปฌ ํฐ๋ฏธ๋ ์ด์ด์ ๋ช
๋ น์ด ์
๋ ฅํ๊ณ
**jonah@jonah-15U530-LH10K:~$ sudo -i**
[sudo] password for jonah:
**root@jonah-15U530-LH10K:~# npm cache verify**
Cache verified and compressed (~/.npm/_cacache):
Content verified: 2240 (49187580 bytes)
Index entries: 3472
Finished in 8.761s
**root@jonah-15U530-LH10K:~# npm install -g create-react-app**
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@4.0.3
updated 1 package in 1.077s
// vscode ํฐ๋ฏธ๋์์ vue create ํ๋๊น ๋จ
**root@jonah-15U530-LH10K:/home/jonah/Documents/vue-lesson# vue create vue-todo-cli3**
๐ Successfully created project vue-todo-cli3.
๐ Get started with the following commands:
$ cd vue-todo-cli3
$ npm run serve
- ํ์์๋ ๋๋ ํ ๋ฆฌ๋ ์ ๋ถ ์ญ์
$ sudo rm -rf [directory]
- ์ด 4๊ฐ์ ์ปดํฌ๋ํธ๋ก ์ด๋ฃจ์ด์ ธ ์์
- viewport meta tag : https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
- favicon generator : https://www.favicon-generator.org/
- fontawesome font : https://cdnjs.com/libraries/font-awesome
- ์๋ต
-
์ฌ์ ๋น
- ํ๋ ์ ํธ ์ปดํฌ๋ํธ : ๋จ์ํ ํ๋ฉด์ ํํํ๋ ์ปดํฌ๋ํธ (input, list, footer)
- ์ปดํฌ๋ํธ : ์ฑ์ ๋์, ๋น์ฆ๋์ค ๋ก์ง, ๋ฐ์ดํฐ ์กฐ์ ํํ๋จ (app)
- ์ฆ, ์ ์ฒด์ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ ๋ฐ์ดํฐ๋ฅผ app ํ๊ตฐ๋ฐ๋ก ๋ชฐ์๋ฃ๊ณ , ์ฌ๊ธฐ์ ๋ฐ์ดํฐ ์กฐ์์ด ๋ฐ์.
- app.vue์ ๋ฉ์๋ ๋ชจ์(์ปดํฌ๋ํธ ์ปจํ ์ด๋)
<todo-input @addTodoItem="addOneItem"/>
<todo-list
:propsData="todoItems"
@removeItem="removeOneItem"
@toggleCompleteItem="toggleCompleteOneItem"
/>
<todo-footer @clearAll="clearAllItems"></todo-footer>
addOneItem(todoItem)
{
// ...
}
},
removeOneItem(todoItem, index)
{
// ...
}
,
toggleCompleteOneItem(index)
{
// ...
}
,
clearAllItems()
{
// ...
}
- todo.vue์์๋ ui์ ํํ, emit์ผ๋ก ์ด๋ฒคํธ ์ฌ๋ฆฌ๊ธฐ๋ง ๋ด๋น(ํ๋ ์ ํ ์ด์ ๋ ์ปดํฌ๋ํธ)
// input
addTodo()
{
this.$emit('addTodoItem', this.newTodoItem);
}
// list
removeTodo(todoItem, index)
{
this.$emit('removeItem', todoItem, index);
}
,
toggleComplete(index)
{
this.$emit('toggleCompleteItem', index);
}
-
์ด๋ค ๊ฒ๋ค์ด ์์ ๋๊ณ , ์ญ์ ๋๋์ง ์ก์์ผ๋ก ๊ตฌ๋ณ์ด ์ด๋ ค์ โ vue ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ ๊ณตํ๋ ํธ๋์ง์ , ์ ๋๋ฉ์ด์ ์ ์ด์ฉํด ๋ฌธ์ ์ ํด๊ฒฐํ๊ธฐ
-
x-template : ES5 ๊ธฐ์ค / ํฌํ๋ฆฟ์ ๋ชจ๋ํํ ํํ๋ฅผ ์ฌ์ฉํ ๋ ์
<script type="text/x-template" id="modal-template">
// register modal component Vue.component("modal", { template: "#modal-template" }); // #modal-template id๋ฅผ ๊ฐ์ง x-template์ ์ฐพ์ modal ์ปดํฌ๋ํธ๋ก ๋ง๋ค๊ฒ ๋ค
-
Slot ํ๊ทธ : ํ๊ทธ๋ฅผ ์จ ๋์ผ๋ฉด Modal.vue๊ฐ ์ฌ์ฉ๋๋ ์ปดํฌ๋ํธ์์ ์ฌ์ ์ ๊ฐ๋ฅ
- Modal.vue
<!--MODAL HEADER--> <div class="modal-header"> <slot name="header"> default header </slot> </div> <!--MODAL BODY--> <div class="modal-body"> <slot name="body"> default body </slot> </div> <!--MODAL FOOTER--> <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> <!--THIS slot PART: you can refactor this <slot>part</slot> on TodoInput.vue(where it is slot implemented)--> </div>
- Input.vue
<modal v-if="showModal" @close="showModal = false"> <!-- *** you can use custom content here to overwrite default content *** --> <h3 slot="header">custom header<!--Not "default header" in Modal.vue--></h3> <h3 slot="body">custom body<!--์ฌ์ ์--></h3> <h3 slot="footer">custom footer<!--์ฌ์ ์--></h3> <!-- slot: refactoring specific component or any part. so, you may reuse UI parts in any compnent--> </modal>
- ํ๋ฉด : default heaer๊ฐ ์๋ custom header๊ฐ ์ถ๋ ฅ๋จ
-
https://vuejs.org/v2/guide/transitions.html#List-Entering-Leaving-Transitions
- List๋ฅผ ์ถ๊ฐํ์ ๋, ๋ณด๋ค ๋ถ๋๋ฝ๊ฒ ๋ค์ด๊ฐ๊ณ , ์ง์ธ๋๋ ๋ถ๋๋ฝ๊ฒ ์ง์์ง
- ES6๋ฅผ ์ฌ์ฉํ๋ฉด ์๊ฐ์ ํจ์จ์ ์ด๊ณ , ๋น ๋ฅด๊ฒ ํ๋กํ ํ์ดํ ํ ์ ์๊ณ , ๋น ๋ฅด๊ฒ ์ฌ๊ฐ๋ฐ ํ ์ ์์ผ๋ฉฐ, ๊ฐ๋ฐ์ ์ค์ค๋ก๊ฐ ํธํด์ง
- ES6๋ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์ง์๋๋ ์ธ์ด๋ ์๋
- ๊ทธ๋์, BABEL๋ก ์ต๋ํ ํธ๋์คํ์ผ๋ง(ํธํ ๊ฐ๋ฅํ ES5๋ก ๋ณํํ๋ ์ปดํ์ผ๋ง)ํด์ผ ํจ
- vue CLI๋ฅผ ์ด์ฉํด์ ํ๋ก์ ํธ ๊ตฌ์ฑํ๊ธฐ ๋๋ฌธ์, webpack.config ๋ฑ์ ์ค์ ํ ํ์๊ฐ ์์ง๋ง, ๋ฌด์จ ๊ธฐ๋ฅ์ ํ๋์ง๋ ์๊ณ ์์ด์ผํจ.
์์ชฝ
์ด ES6 ๋ฌธ๋ฒ โ์๋์ชฝ
๋ธ๋ผ์ฐ์ ๊ฐ ํธํ ๊ฐ๋ฅํ ES5๋ฌธ๋ฒ์ผ๋ก ๋ณํ
-
๊ธฐ์กด js๊ฐ ๊ฐ์ง ์ ์ฐํจ, ํน์ ์ ๋งค๋ชจํธํจ์ ๋ฏธ์ฐ์ ๋ฐฉ์งํจ.
-
const ๋ ๊ฐ ์ฌํ ๋น ๋ถ๊ฐ
-
let์ ๊ฐ ์ฌํ ๋น ๊ฐ๋ฅ
- for๋ฌธ ์์์ var i๋ฅผ ์ ์ธํ์ ๋, i๋ ์ ์ญ๋ณ์๊ฐ ๋จ
-
Hoist : ๋์ด์ฌ๋ ค์ง๋ค
-
ํจ์ ํํ์ X, ํจ์ ์ ์ธ๋ฌธ๊ณผ ๋ณ์๋ง ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ ํ๋ ๋จผ์ ๋จ
- ์ ์ฝ๋๋ ์ค๋ฅ๊ฐ ๋์ง ์์
- 1์์ - var i, function์ด ์๋ก ๋์ด์ฌ๋ ค์ง
- 2์์ - sum, i = 10 ํ ๋นํ๋ ๊ฒ์ ๋งจ ๋ง์ง๋ง์ ์ด๋ฃจ์ด์ง
- ๊ฒฐ๋ก ์ ์ผ๋ก, ์ ์ฝ๋๋ ์๋์ฒ๋ผ ๋จ
- for๋ฌธ ์์์ ์ ์ธํ let i๋ for๋ฌธ ๋ฐ์์ ์ ๊ทผ ๋ถ๊ฐ
- let x, const x๋ ๋ค๋ฅธ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ๊ฐ์ง๊ณ ์์ผ๋ฏ๋ก, ๋์ ์ถฉ๋์ด ๋์ง ์์
// ES5 : function
function () {
}
// EX6 : arrow
() => {
}
์ค์ต : BABELํํ์ด์ง
- ES5 ๊ธฐ์ค ๋ชจ๋ ๊ธฐ๋ฅ์ด ์์์ โ Common js๋ฅผ ๊ฐ์ ธ๋ค ์จ์ ๋ชจ๋์ ์ฌ์ฉํ์
- ๋ชจ๋ : ํน์ ๊ธฐ๋ฅ์ ์ํํ๋ ํ ๋จ์, ๋ฉ์ด๋ฆฌ
- ์ฌ์ฌ์ฉ์ฑ์ด ๋ฐ์ด๋ ๊ธฐ๋ฅ๋ค์ ๋ฌถ์ด ํ์ํ ๋๋ง๋ค ๊ฐ๋ค ์
- ํ์ผ๋ณ๋ก ์ค์ฝํ๋ฅผ ๊ฐ์ ธ๊ฐ
- import ๋ฅผ ํ ๋ export๊ฐ ์คํ๋จ
- default : ํ ๊ฐ ํ์ผ์์ ํ๋๋ง export ๋จ โ ๋ค๋ฅธ ๊ฒ๋ค์ด ์ธ๋ฐ์์ด import๋์ง ์๊ฒ ํจ โ ๋ชจ๋ํ(encapsulation)
- ์๋ง์ ์ปดํฌ๋ํธ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌ
- ๋ฆฌ์กํธ(flux ํจํด), ์ต๊ทค๋ฌ๋ฅผ ๋ต์ต, ์ฅ์ ์ ๊ฒฐํฉํ๋ ๊ณผ์ ์์ ์๊ธด ํ์ ํ๋ ์์ํฌ
- state(
data
), getters(computed
), mutations(sync method
), actions(async method
)
- ์ฑ์ด ์ปค์ก์ ๋, ๊ด๋ฆฌํ ์ ์๋ ํจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ
- ํ์ด์ค๋ถ ๊ฐ๋ฐ์๋ค์ด MVCํจํด, ๋ฆฌ์กํธ๋ก ๊ฐ๋ฐํ๋ค๊ฐ ๋ง๋ค์ด๋
- ์ ์ฒด์ ์ฑ์ ํ๋ฆ์ ์ถ์ ํ๊ธฐ ์ํจ
- Unidirectional data flow : ๋ชจ๋ ๋ฐ์ดํฐ ํ๋ฆ์ด ํ ๋ฐฉํฅ์ผ๋ก๋ง ์์ง์
- Dispatcher : ๋ชจ๋ธ์ ๋ฐ๊พธ๊ธฐ ์ํ ์ญํ ๋ฑ ํ๋ ์์.
- ๋ฐ์ดํฐ์ ํ๋ฆ์ ์ถ์ ํ ์ ์์ โ ์ด๋ค ๋ฒ๊ทธ๊ฐ ์๊ธฐ๋์ง ํ์ธํ ์ ์์.
- ๋ฐ์ดํฐ์ ํ๋ฆ์ ์ ํํ์์ผ ํฅํ์ ๋ฐ์ํ ์ ์๋ ๋ฌธ์ ์ ๋ฐฉ์ง
- store = model
- ๋ง์ฝ porps๋ฅผ ์ฌ์ฉํ๋ค๋ฉด, ์ฝ๋๊ฐ ๋ณต์กํด์ง
- state : ์ํ
- view(
ํ ํ๋ฆฟ ํ๋ฉด์์ add ๋ฒํผ ํด๋ฆญ
) โ action ๋ฐ์(addTodo๋ฉ์๋ ๋ฐ์
) โ state ๋ณ๊ฒฝ๋จ(this.item.push(โitemโ)
)
-
์์์ : vue components
-
ํ๋ฆ ์์ :
-
์ปดํฌ๋ํธ
โ ๋น๋๊ธฐ๋ก์ง(action) : ๋น๋๊ธฐ ๋ฉ์๋ ๋ก์ง๋ง ์ฒ๋ฆฌ, data๋ฅผ ๋ฐ๊พธ์ง๋ ์์. mutation ์ฝ๋ง ํ ์ ์์.
โ ๋๊ธฐ๋ก์ง(mutation) : ๋๊ธฐ ๋ฉ์๋. ์ค์ data๋ ์ด ๋จ๊ณ์์ ๋ฐ๊ฟ.
โ ์ํ(state)
-
- EX6๋ก ์ค์น
- vuex๋ ๋ณดํต store๋ผ๊ณ ํ๋๋ฐ, ๊ดํ์ ์ผ๋ก ์ ์ฅํ๋ ํด๋๊ฐ ์์ โ /src/store/store.js
- store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex); // use vue plugin
- use : ๋ทฐ๋ฅผ ์ฌ์ฉํ ๋, ์ ์ญ์ผ๋ก ํน์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ณ ์ถ์ ๋ โ ํน์ ์ปดํฌ๋ํธ์์
this.$store
์ ๊ฐ์ด ์ธ ์ ์์
- mutation์ ์ฒซ๋ฒ์งธ ์ธ์๋ ๋ฌด์กฐ๊ฑด state
- 20 = anotherNum
- payload : ๊ดํ์ ์ด๋ฐ ์ด๋ฆ์ผ๋ก ์ฌ์ฉ
- ์๋ต
vue components
โ (commit) โmutation
โ (mutate) โstate
: mutation์ state์ ๊ฐ์ ๋ณ๊ฒฝํ๊ธฐ ์ํจDevtools(๊ฐ๋ฐ์๋๊ตฌ)
๋ก state๊ฐ์ ํ์ธํ ์ ์์
- context : actions์์ mutation์ ์ ๊ทผํ ์ ์๋๋ฐ, ์ ๊ทผํ ์ ์๋ ๊ฒฝ๋ก
- ์ฆ, actions๋ mutation์๊ฒ ์ ํธ๋ฅผ ๋ณด๋ด๋ ์ญํ
- actions์์ ๋น๋๊ธฐ ๋ฉ์๋๊ฐ ์ฒ๋ฆฌ๋๋ฉด, ๋ฌด์กฐ๊ฑด mutation์ผ๋ก ๋ค๊ณ ์์ ๊ฐ์ ์ฒ๋ฆฌ โ ๊ท๊ฒฉํ๋จ
- this.$store.state.num
- this.$store.getters.countedNum
- this.$store.commit.clickBtn
- this.$store.dispatcher.asyncClickBtn
- ์๋ต
- ์๋ต
๐ก getters๋ computed์ ์์ฑ์ด ๊ฐ์ผ๋ฏ๋ก computed์, mutations๋ method์ ์์ฑ์ด ๊ฐ์ผ๋ฏ๋ก method์ helperํจ์๋ฅผ ์ ์ธ!
-
getters๊ฐ 3๊ฐ ์์ ๋,
-
์ด๊ฑธ ์ฐ๊ธฐ ์ํด ์ ๊ทผํ ๋ ํ๋ํ๋ ๊ฐ์ ธ์์ ์ฌ์ฉํ๋ฉด ๋ฒ๊ฑฐ๋ก์
-
map helper ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ํ์ดํ ์๊ฐ์ ์ค์ผ ์ ์์
-
app : ํ์ ์ปดํฌ๋ํธ๋ง ๋ฑ๋ก๋์ด ์์
-
store : ๊ธฐ์กด app์ ์๋ ๋ฉ์๋ ๋ฑ ์ฝ๋ ๊ธฐ๋ฅ๋ค์ด ์ ๋ถ store์์ ์์ฒญ
-
list, input, footer : store์์ ํ์ํ ๊ธฐ๋ฅ๋ค์ ๋ถ๋ฌ์์ ํธ์ถ
โ ํ์ง๋ง store์ ๋ชจ๋ ๋ฉ์๋๋ฅผ ๋๊ฒ ๋๋ฉด ์ถ์ ์ด ํ๋ค์ด์ง๋ฏ๋ก, ๋ชจ๋ํ, ๋ถ๋ฆฌ๊ฐ ํ์ํจ. (modules๋ฅผ ์ด์ฉํด ๊ตฌ์กฐํ)
// cli2
# npm i -g @vue/cli-init
# sudo vue init webpack vue-todo
$ cd vue-todo
$ npm run dev
// cli3
**root@jonah-15U530-LH10K:/home/jonah/Documents/vue-lesson# vue create vue-todo-cli3**
$ cd vue-todo-cli3
$ npm run serve
- vscode ์์ ํ์ผ ์ด๋ฆ์ ๋ฐ๊พธ๊ฑฐ๋ ์ญ์ ํ๋ ค๊ณ ํ ๋ ๋จ๋ ์ค๋ฅ
Error: EACCES: permission denied, rename '/home/jonah/Documents/vue-lesson/vue-todo-cli3/src/components/HelloWorld.vue' -> '/home/jonah/Documents/vue-lesson/vue-todo-cli3/src/components/111.vue'
-
ํด๋น ๋๋ ํ ๋ฆฌ์ ๋ํ ๊ถํ ์ค์ ์ ํด ์ค(์ฌ์ฉ์ ๊ณ์ )
โ ๊ท์ฐฎ์์ ์ ์ฒด ๋๋ ํ ๋ฆฌ ๊ถํ ํ์ฉํจ
jonah@jonah-15U530-LH10K:~$ ls -la /usr/local/lib/node_modules
total 16
drwxr-xr-x 4 jonah jonah 4096 Dec 6 23:42 .
drwxr-xr-x 5 root root 4096 Dec 6 23:16 ..
drwxr-xr-x 3 jonah jonah 4096 Dec 6 23:42 create-react-app
drwxr-xr-x 4 jonah jonah 4096 Dec 6 23:20 @vue
-- ์๋ ์ด๋ ๊ฒ ํด์ผ ํ๋๋ฐ
jonah@jonah-15U530-LH10K:~$ sudo chown -R jonah:jonah /usr/local/lib/node_modules/
[sudo] password for jonah:
-- ์๋๊ธธ๋ ์ ์ฒด ๊ถํ ํ์ฉ
jonah@jonah-15U530-LH10K:~$ sudo chown -R jonah *
- https://curryyou.tistory.com/344
- ๊ณ์ ์ ์ฅ : https://www.hahwul.com/2018/08/22/git-credential-helper/
- https://velog.io/@ywoosang/Node.js-%EC%84%A4%EC%B9%98
- https://github.com/ABarthDew/vue-lesson
- vscode git ๊ถํ์ค์ :https://hyeo-noo.tistory.com/184
- ํฌ๋กฌ ํ๋ฌ๊ทธ์ธ ์ค์ : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?hl=ko
- npm install -g option error : https://superbaik.tistory.com/entry/Error-npm-๊ธ๋ก๋ฒ-์ค์น-๊ด๋ จ-์๋ฌ
- sudo npm -g install @vue/cli : https://askubuntu.com/questions/1139728/how-do-i-install-vue-cli-in-ubuntu
- vue/cli2, 3 ์ฐจ์ด์ : https://blog.metafor.kr/201
- vue create error : https://stackoverflow.com/questions/47545940/when-i-run-npm-install-it-returns-with-err-code-eintegrity-npm-5-3-0