๐งฉ Vue 2๋ก ๋ฐฐ์ฐ๋ ํ๋ก ํธ์๋ ๊ธฐ์ด
Vue 2์ ํต์ฌ ๊ฐ๋ ๊ณผ Axios๋ฅผ ํ์ฉํ API ํต์ ๊ตฌ์กฐ๊น์ง ์ตํ, ์ค์ ์ฑ์ ๊ธฐ๋ฐ์ ๋ง๋ค ์ ์๋๋ก ํฉ๋๋ค.
- Vue.js
- Express
- Axios
- jwt
- Vuex
๐ ๊ฐ์ ๋ชฉ๋ก
1๋จ๊ณ. Vue 2 + Express + Axios ์ธ์ฆ ๊ธฐ๋ฐ ํฌ๋์ฑ ๋ง๋ค๊ธฐ
- 1-1. 1๊ฐ: Vue 2 ๊ฐ๋ฐ ํ๊ฒฝ ์ธํ + Vue 2์ ์ญ์ฌ
- 1-2. Vue ์ธ์คํด์ค์ ํ ํ๋ฆฟ ๋ฌธ๋ฒ ์ดํดํ๊ธฐ
- 1-3. ์ปดํฌ๋ํธ ๋ถ๋ฆฌ โ props์ $emit ์ดํดํ๊ธฐ
- 1-4. Axios๋ก ์ธ๋ถ API์์ ํ ์ผ ๋ชฉ๋ก ๋ถ๋ฌ์ค๊ธฐ
- 1-5. Axios๋ก ํ ์ผ ์ถ๊ฐํ๊ธฐ (POST ์์ฒญ) + ๋๋ง์ ๋ฐฑ์๋ ์๋ฒ ์ฐ๋
- 1-6. ํ ์ผ ์์ ๊ธฐ๋ฅ + PUT ์์ฒญ์ผ๋ก ์๋ฒ์ ๋ฐ์ํ๊ธฐ
- 1-7. ๋ฐฑ์๋ ๋ฐ์ดํฐ ํ์ผ ์ ์ฅ โ JSON ๊ธฐ๋ฐ DB ์ฐ๋
- 1-8. RESTful ๊ตฌ์กฐ ์ดํด + ์๋ฒ ๋ผ์ฐํฐ ๋ถ๋ฆฌ
- 1-9. ํ๋ก ํธ-๋ฐฑ ์์ ๋ถ๋ฆฌ ๊ตฌ์กฐ + ๋ฐฐํฌ ๋์ (CORS & Proxy)
- 1-10. ์ธ์ฆ/๋ณด์ ๊ธฐ์ด โ ์ฌ์ฉ์ ๊ตฌ๋ถ ๋ฐ API ๋ณดํธ ์ค๊ณ
- 1-11. ๋ก๊ทธ์ธ ์์ด ์ฌ์ฉ์ ๊ตฌ๋ถ ์ ์งํ๊ธฐ
- 1-12. ํ ์ผ ์๋ฃ/๋ฏธ์๋ฃ ํ ๊ธ ๊ธฐ๋ฅ ๊ตฌํ, nodemon ์ค์น ๋ฐ ์ ์ฉ
- 1-13. ๋คํฌ๋ชจ๋ ์ ์ฉ ๋ฐ ๋ก์ปฌ ์คํ ๋ฆฌ์ง๋ก UI ์ํ ๊ธฐ์ตํ๊ธฐ
- 1-14. ์ปค์คํ ๋ก๊ทธ์ธ ๊ตฌํ โ JWT ๊ธฐ๋ฐ ์ธ์ฆ
- 1-15. Vue ์ฑ์์ ๋ก๊ทธ์ธ UI ๊ตฌ์ฑ ๋ฐ JWT ์ธ์ฆ ์ ์ฉ
- 1-16. JWT ๊ธฐ๋ฐ ์ฌ์ฉ์๋ณ Todo ๊ด๋ฆฌ ์์ฑํ๊ธฐ
- 1-17. ๋คํฌ๋ชจ๋ ์ํ๋ฅผ ์ ์ญ ๊ด๋ฆฌ(Vuex ๋๋ Store ๋ชจ๋)๋ก ๋ฆฌํฉํ ๋งํ๊ธฐ
- 1-18. Vuex๋ก ๋คํฌ๋ชจ๋์ ์ธ์ฆ ์ํ ์ ์ญ ๊ด๋ฆฌํ๊ธฐ
- 1-19. JWT ํ ํฐ ๋ง๋ฃ ์ ์๋ ๋ก๊ทธ์์ ์ฒ๋ฆฌํ๊ธฐ
- 1-20. ๋ก๊ทธ์ธํ ์ฌ์ฉ์ ์ด๋ฆ์ Vuex ์ํ๋ก ์ ์ญ ๊ด๋ฆฌํ๊ธฐ
- 1-21. Vuex ๋ชจ๋ํ ๊ตฌ์กฐ๋ก ๋ฆฌํฉํ ๋งํ๊ธฐ
- 1-22. Vuex์ ๋ก๊ทธ์ธ API ํธ์ถ ๋ก์ง(action)์ผ๋ก ๋ฆฌํฉํ ๋งํ๊ธฐ
- 1-23. Vuex์ ํ์๊ฐ์ API ํธ์ถ ๋ก์ง(action)์ผ๋ก ๋ฆฌํฉํ ๋งํ๊ธฐ
- 1-24. Todo ์ํ๋ฅผ Vuex๋ก ์ด๊ดํ๊ธฐ
2๋จ๊ณ. ๋ฅ์คํธ๊ณต๋ฌด์ ๋ฉ์ธ Vue + Express๋ก ๋ก ํด๋ก ํ๊ธฐ
- 2-1. ์ค์ ํ๋ก์ ํธ ๊ตฌ์กฐ ์ค๊ณ & ์ด๊ธฐ ์ธํ
- 2-2. ๋ฉ์ธ ๋ ์ด์์ ์ก๊ธฐ - Header, Footer, MainSlide ๊ตฌํ
- 2-2-๊ณผ์ . MainSlide.vue ๊ตฌํ (Swiper)
- 2-3. ๋ฉ์ธ ํญ + ์ฌ๋ผ์ด๋ ์ฐ๋ UI ๊ตฌํ
- 2-3-๊ณผ์ . ๋ฉ์ธ ํญ + ์ฌ๋ผ์ด๋ ์ฐ๋ UI ๊ตฌํ
- 2-4. ์ง๊ธ ์ฃผ๋ชฉํ ์ ์๋ ๊ธฐํ์ UI ๊ตฌ์ฑ
- 2-4-๊ณผ์ . ์ ์๋ ๊ธฐํ์ ์ค๋ด๋ฆผ ์ฒ๋ฆฌ ๋ฐ ์ ์ญ ํฐํธ ๋ณ๊ฒฝ
- 2-5. ์ปจํ ์ธ ์ฐ์ธก ์์ญ UI ๊ตฌํ
- 2-5-๊ณผ์ . ์ปจํ ์ธ ์ฐ์ธก ์์ญ UI ์ฌ๋ผ์ด๋ ๊ตฌํ
- 2-6. ํต๋ฉ๋ด ์ฐ์ธก ์์ญ ๊ตฌํ
- 2-6-๊ณผ์ . on ์๋์ ํ
- 2-7. ํต๋ฉ๋ด ์ข์ธก ์์ญ ๊ตฌํ
- 2-8. Express API ๊ตฌ์ถ๊ณผ ๋ฉ์ธ ํ์ด์ง Axios ์์ฒญ
- 2-8-๊ณผ์ . โ๋ฅ์คํธ๊ณต๋ฌด์ 1์ ๊ฐ์ฌ์งโ, โ์ง๊ธ ์ฃผ๋ชฉํ ์ ์๋ ๊ธฐํ์ โ ์์ญ๋ APIํ
- 2-9. ๋ฉ์ธ ๋ฐ์ดํฐ Vuex ์ํ๊ด๋ฆฌ๋ก ์ด๊ด
- 2-9-๊ณผ์ . StickyPanel.vue - Express API + Axios + Vuex ๊ตฌ์กฐ ๋ฆฌํฉํ ๋ง