- ์ ์: ์ํ์ญ
- ํ์ด์ง: 520์ชฝ
- ๋ฐํ์ผ: 2017-09-05
- ์ถํ์ฌ: ๋ฃจ๋นํ์ดํผ
์คํ์๋ ์ฌ๊ธฐ๋ฅผ ํ์ธํฉ๋๋ค.
- ๊ฐ ์ฅ๋ณ๋ก ์์ ๋ฅผ ๋ถ๋ฅํ์์ต๋๋ค.
- ์ฅ๋ณ๋ก ์ฌ๋ฌ๊ฐ์ ํ๋ก์ ํธ๊ฐ ์๋ ๊ฒฝ์ฐ๋ ์ฅ๋ณ๋ก Readmeํ์ผ์ด ์์ต๋๋ค. ๊ฐ ์ ๋ง๋ค ์ด๋ค ํ๋ก์ ํธ๋ฅผ ์ฌ์ฉํ๋์ง ๋ช ์๋์ด ์์ต๋๋ค.
- ์ด ์ฑ
์์ ์ฌ์ฉํ๋ ์๋น์ค API ์์ ๋ ๋ค์์ ํ์ธํ์ธ์.
- API ๋ค์ด๋ก๋ : https://github.com/stepanowon/contactsvc
- API ์ฌ์ฉ๋ฒ : http://sample.bmaster.kro.kr
-
CHAPTER 01 ์์ํ๊ธฐ
- 1.1 Vue.js๋?
- 1.2 ๊ฐ๋ฐ ํ๊ฒฝ ์ค์
- 1.2.1 Node.js ์ค์น
- 1.2.2 Visual Studio Code ์ค์น
- 1.2.3 ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๋ฐ Vue.js devtools ์ค์น
- 1.2.4 Vue-CLI ์ค์น
- 1.3 ์ฒซ ๋ฒ์งธ Vue.js ์ ํ๋ฆฌ์ผ์ด์
-
CHAPTER 02 Vue.js ๊ธฐ์ด
- 2.1 hellovuejs ์์ ๋ถ์
- 2.2 ๊ธฐ๋ณธ ๋๋ ํฐ๋ธ
- 2.2.1 v-text, v-html ๋๋ ํฐ๋ธ
- 2.2.2 v-bind ๋๋ ํฐ๋ธ
- 2.2.3 v-model ๋๋ ํฐ๋ธ
- 2.2.4 v-show, v-if, v-else, v-else-if ๋๋ ํฐ๋ธ
- 2.3 ๋ฐ๋ณต ๋ ๋๋ง ๋๋ ํฐ๋ธ
- 2.4 ๊ธฐํ ๋๋ ํฐ๋ธ
- 2.5 ๊ณ์ฐํ ์์ฑ
-
CHAPTER 03 Vue ์ธ์คํด์ค
- 3.1 el, data, computed ์ต์
- 3.2 ๋ฉ์๋
- 3.3 ๊ด์ฐฐ ์์ฑ
- 3.4 v-cloak ๋๋ ํฐ๋ธ
- 3.5 Vue ์ธ์คํด์ค ๋ผ์ดํ ์ฌ์ดํด
-
CHAPTER 04 ์ด๋ฒคํธ ์ฒ๋ฆฌ
- 4.1 ์ธ๋ผ์ธ ์ด๋ฒคํธ ์ฒ๋ฆฌ
- 4.2 ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ฉ์
- 4.3 ์ด๋ฒคํธ ๊ฐ์ฒด
- 4.4 ๊ธฐ๋ณธ ์ด๋ฒคํธ
- 4.5 ์ด๋ฒคํธ ์ ํ์ ๋ฒ๋ธ๋ง
- 4.6 ์ด๋ฒคํธ ์์์ด
- 4.6.1 once ์์์ด
- 4.6.2 ํค์ฝ๋ ์์์ด
- 4.6.3 ๋ง์ฐ์ค ๋ฒํผ ์์์ด
-
CHAPTER 05 ์คํ์ผ
- 5.1 ์คํ์ผ ์ ์ฉ
- 5.2 ์ธ๋ผ์ธ ์คํ์ผ
- 5.3 CSS ํด๋์ค ๋ฐ์ธ๋ฉ
- 5.4 ๊ณ์ฐํ ์์ฑ, ๋ฉ์๋๋ฅผ ์ด์ฉํ ์คํ์ผ ์ ์ฉ
- 5.5 ์ปดํฌ๋ํธ์์์ ์คํ์ผ ์ ์ฉ
- 5.6 ์คํ์ผ ์์
-
CHAPTER 06 ์ปดํฌ๋ํธ ๊ธฐ์ด
- 6.1 ์ปดํฌ๋ํธ ์กฐํฉ
- 6.2 ์ปดํฌ๋ํธ์ ์์ฑ
- 6.3 DOM ํ ํ๋ฆฟ ๊ตฌ๋ฌธ ์์ฑ ์ ์ฃผ์ ์ฌํญ
- 6.4 ์ปดํฌ๋ํธ์์์ data ์ต์
- 6.5 props์ event
- 6.5.1 props๋ฅผ ์ด์ฉํ ์ ๋ณด ์ ๋ฌ
- 6.5.2 event๋ฅผ ์ด์ฉํ ์ ๋ณด ์ ๋ฌ
- 6.5.3 props์ event ์์
- 6.6 ์ด๋ฒคํธ ๋ฒ์ค ๊ฐ์ฒด๋ฅผ ์ด์ฉํ ํต์
-
CHAPTER 07 ECMAScript 2015
- 7.1 ES2015๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ํ๋ก์ ํธ ์ค์
- 7.2 let๊ณผ const
- 7.3 ๊ธฐ๋ณธ ํ๋ผ๋ฏธํฐ์ ๊ฐ๋ณ ํ๋ผ๋ฏธํฐ
- 7.4 ๊ตฌ์กฐ๋ถํด ํ ๋น(destructuring assignment)
- 7.5 ํ์ดํ ํจ์(Arrow function)
- 7.6 ์๋ก์ด ๊ฐ์ฒด ๋ฆฌํฐ๋ด
- 7.7 ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด
- 7.8 ์ปฌ๋ ์
- 7.9 ํด๋์ค
- 7.10 ๋ชจ๋
- 7.11 Promise
-
CHAPTER 08 Webpack
- 8.1 Webpack ๊ตฌ์ฑ
- 8.2 ๊ฐ๋จํ Webpack ๊ตฌ์ฑ ์์
- 8.3 Webpack ๊ฐ๋ฐ ์๋ฒ ์ค์
- 8.4 Vue-CLI ๋ณด์ผ๋ฌํ๋ ์ดํธ
-
CHAPTER 09 ์ปดํฌ๋ํธ ์ฌํ
- 9.1 ๋จ์ผ ํ์ผ ์ปดํฌ๋ํธ
- 9.2 ์ปดํฌ๋ํธ์์์ ์คํ์ผ
- 9.2.1 ๋ฒ์ CSS(Scoped CSS)
- 9.2.2 CSS ๋ชจ๋(CSS Module)
- 9.3 ์ฌ๋กฏ
- 9.3.1 ์ฌ๋กฏ์ ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
- 9.3.2 ๋ช ๋ช ๋ ์ฌ๋กฏ
- 9.3.3 ๋ฒ์ ์ฌ๋กฏ
- 9.4 ๋์ ์ปดํฌ๋ํธ
- 9.5 ์ฌ๊ท ์ปดํฌ๋ํธ
-
CHAPTER 10 axios๋ฅผ ์ด์ฉํ ์๋ฒํต์
- 10.1 ์๋น์ค API ์๊ฐ
- 10.2 axios ๊ธฐ๋ฅ ํ
์คํธ
- 10.2.1 http ํ๋ก์ ์ค์
- 10.2.2 axios ์ฌ์ฉ
- 10.2.3 axios ์์ฒญ ๋ฐฉ๋ฒ
- 10.2.4 axios ์๋ต ํ์
- 10.2.5 ๊ธฐํ ๋ฉ์๋
- 10.2.6 ํ์ผ ์ ๋ก๋ ์ฒ๋ฆฌ
- 10.2.7. axios ์์ฒญ๊ณผ config ์ต์
- 10.2.8 Vue ์ธ์คํด์ค์์ axios ์ด์ฉํ๊ธฐ
- 10.2.9 axios ์ฌ์ฉ ์ ์ฃผ์ ์ฌํญ
- 10.3. ์ฐ๋ฝ์ฒ ์ ํ๋ฆฌ์ผ์ด์
์์
- 10.3.1 ๊ธฐ์ด ์์
- 10.3.2 App.vue ์์ฑ
- 10.3.3 ContactList.vue ์์ฑ
- 10.3.4 ์ ๋ ฅํผ, ์์ ํผ ์์ฑ
- 10.3.5 ์ฌ์ง ๋ณ๊ฒฝํผ ์์ฑ
- 10.4 ์ ๋ฆฌ
-
CHAPTER 11 Vuex๋ฅผ ์ด์ฉํ ์ํ ๊ด๋ฆฌ
- 11.1 Vuex๋?
- 11.2 ์ํ์ ๋ณ์ด
- 11.3 ๊ฒํฐ
- 11.4 ์ก์
- 11.5 ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์
์ ์ ์ฅ์ ํ์ผ
- 11.5.1 ์ญํ ๋ณ ๋ถ๋ฆฌ
- 11.5.2 ๋ชจ๋ ์ด์ฉํ๊ธฐ
- 11.6 Vuex๋ฅผ ์ด์ฉํ๋๋ก ์ฐ๋ฝ์ฒ ์ ํ๋ฆฌ์ผ์ด์ ์์ฑ
-
CHAPTER 12 vue-router๋ฅผ ์ด์ฉํ ๋ผ์ฐํ
- 12.1 vue-router๋?
- 12.2 vue-router ๊ธฐ์ด
- 12.3 ๋์ ๋ผ์ฐํธ
- 12.4 ์ค์ฒฉ ๋ผ์ฐํธ
- 12.5 ๋ช ๋ช ๋ ๋ผ์ฐํธ
- 12.6 ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ ๋ผ์ฐํ
์ ์ด
- 12.6.1 ๋ผ์ฐํฐ ๊ฐ์ฒด์ push ๋ฉ์๋
- 12.6.2 ๋ด๋น๊ฒ์ด์ ๋ณดํธ
- 12.7 ๋ผ์ฐํ ๋ชจ๋
- 12.8 ๋ผ์ฐํธ ์ ๋ณด๋ฅผ ์์ฑ์ผ๋ก ์ฐ๊ฒฐํ๊ธฐ
- 12.9 ์ฐ๋ฝ์ฒ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ผ์ฐํ
๊ธฐ๋ฅ ์ ์ฉ
- 12.9.1 ์ด๊ธฐ ์ค์ ์์
- 12.9.2 vuex ์ํ ๊ด๋ฆฌ ๊ธฐ๋ฅ ๋ณ๊ฒฝ
- 12.9.3 main.js์ ๋ผ์ฐํ ๊ธฐ๋ฅ ์ถ๊ฐ
- 12.9.4 App.vue ํ์ผ ๋ณ๊ฒฝ
- 12.9.5 ContactList.vue ์ปดํฌ๋ํธ ๋ณ๊ฒฝ
- 12.9.6 ContactForm.vue, UpdatePhoto.vue ์ปดํฌ๋ํธ ์์
- 12.10 ์ง์ฐ ์๊ฐ์ ๋ํ ์ฒ๋ฆฌ
- 12.10.1 API ํธ์ถ ์ง์ฐ ์๊ฐ ๋ฐ์
- 12.10.2 ์คํผ๋ ์ปดํฌ๋ํธ ์์ฑ
- 12.10.3 ์ํ์ ๋ณ์ด, ์ก์ ๋ณ๊ฒฝ
-
CHAPTER 13 ํธ๋์ง์ ํจ๊ณผ
- 13.1 CSS ํธ๋์ง์ ๊ธฐ์ด
- 13.2 ํธ๋์ง์ ์ปดํฌ๋ํธ ๊ธฐ์ด
- 13.3 CSS ์ ๋๋ฉ์ด์ ์ฒ๋ฆฌ
- 13.4 ํธ๋์ง์ ์ด๋ฒคํธ ํ
- 13.5 ๋ฆฌ์คํธ์ ๋ํ ํธ๋์ง์
- 13.6 ์ฐ๋ฝ์ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ํธ๋์ง์ ์ ์ฉํ๊ธฐ
-
๋ถ๋ก A ๋จ์ ํ ์คํธ
- A.1 webpack ํ
ํ๋ฆฟ์ ์ด์ฉํ ํ
์คํธ
- A.1.1 ๊ธฐ๋ณธ ๊ธฐ๋ฅ ํ ์คํธ
- A.1.2 Vue ์ปดํฌ๋ํธ ํ ์คํธ
- A.1.3 ์ด๋ฒคํธ ์๋ฎฌ๋ ์ด์
- A.2 Jest๋ฅผ ์ด์ฉํ ํ
์คํธ
- A.2.1 Jest ์ค์
- A.2.2 ๊ฐ๋จํ ํ ์คํธ ์ฝ๋ ์์ฑ
- A.2.3 Vue ์ปดํฌ๋ํธ์ ๋ํ ํ ์คํธ
- A.1 webpack ํ
ํ๋ฆฟ์ ์ด์ฉํ ํ
์คํธ
-
๋ถ๋ก B ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง
- B.1 ํ๋ก์ ํธ ์์ฑ๊ณผ ์ด๊ธฐํ