๐ [Vue TodoList] 2. ์ปดํฌ๋ํธ ์์ฑํ๊ณ ๋ฑ๋กํ๊ธฐ
1. ์ปดํฌ๋ํธ ์์ฑ
-
ํ๋ก์ ํธ ํด๋์
src
๋ฐ์components
ํด๋๋ฅผ ์์ฑํ๊ณ ๊ทธ ์๋์TodoHeader.vue
TodoInput.vue
TodoList.vue
TodoFooter.vue
๋ฅผ ์์ฑํ๋ค. -
์ปดํฌ๋ํธ ๊ฐ์ ๊ฒฝ์ฐ ๊ด๋ก์ src/components ํด๋์์ ๊ด๋ฆฌ๋ฅผ ํ๋ค. (ํด๋ ๊ด๋ฆฌ, ์ถํ ์ฌํ์ฉ ์ ๊ทผ์ ์ฉ์ด)
-
์ ํ๋ฆฌ์ผ์ด์ ์ ๊ท๋ชจ๊ฐ ์ปค์ง ๊ฒฝ์ฐ
components/๊ธฐ๋ฅ/์ปดํฌ๋ํธ.vue
์ ๊ฐ์ ํ์ฑ์ผ๋ก ๊ด๋ฆฌ (๊ธฐ๋ฅ๋ณ๋ก ํด๋ ๋๋๊ธฐ)
์ปดํฌ๋ํธ ์ฝ๋ ๊ตฌ์กฐ
<template>
<!-- html ์
๋ ฅ -->
</template>
<script>
export default{
}
</script>
<style>
/* css ์
๋ ฅ */
</style>
2. ์ปดํฌ๋ํธ ๋ฑ๋ก
- ์์์ ์์ฑํ 4๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ๋ฑ๋กํ์ฌ ํ๋ฉด์ ๋ํ๋ผ ์ ์๋๋ก ๋ฑ๋กํ๋ค.
์ง์ญ ์ปดํฌ๋ํธ ๋ฑ๋ก ๋ฐฉ๋ฒ
component: { '์ปดํฌ๋ํธ ์ด๋ฆ' : ์ปดํฌ๋ํธ ๋ด์ฉ }
ํน์ ์ปดํฌ๋ํธ์์ ๋ค๋ฅธ ์์น์ ์๋ ์ปดํฌ๋ํธ์ ๋ด์ฉ์ ๋ถ๋ฌ ์ค๋ ๋ฐฉ๋ฒ
import ๋ถ๋ฌ์จ ํ์ผ์ ๋ด์ฉ์ด ๋ด๊ธธ ๊ฐ์ฒด from `๋ถ๋ฌ์ฌ ํ์ผ ์์น`;
- App.vue
<template>
<div id="app">
<!-- ๋ฑ๋กํ ์ปดํฌ๋ํธ 4๊ฐ๋ฅผ HTML์ ํ์ -->
<TodoHeader></TodoHeader>
<TodoInput></TodoInput>
<TodoList></TodoList>
<TodoFooter></TodoFooter>
</div>
</template>
<script>
// ์ปดํฌ๋ํธ ๋ด์ฉ ๋ถ๋ฌ์ค๊ธฐ;
// import ๋ถ๋ฌ์ฌ ํ์ผ์ ๋ด์ฉ์ด ๋ด๊ธธ ๊ฐ์ฒด from '๋ถ๋ฌ์ฌ ํ์ผ ์์น'
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'
export default{
components: {
// ์ง์ญ ์ปดํฌ๋ํธ ๋ฑ๋ก
// '์ปดํฌ๋ํธ ํ๊ทธ ์ด๋ฆ' : ์ปดํฌ๋ํธ ๋ด์ฉ(๋ถ๋ฌ์ฌ ํ์ผ์ ๋ด์ฉ์ด ๋ด๊ธธ ๊ฐ์ฒด)
'TodoHeader' : TodoHeader,
'TodoInput' : TodoInput,
'TodoList' : TodoList,
'TodoFooter' : TodoFooter
}
}
</script>
....
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ [Vue TodoList] 2. ์ปดํฌ๋ํธ ์์ฑํ๊ณ ๋ฑ๋กํ๊ธฐ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ahn-sujin/Vue-TodoList-2.-์ปดํฌ๋ํธ-์์ฑํ๊ณ -๋ฑ๋กํ๊ธฐ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค