vue.js + firebase + tailwindcss ๋ฅผ ํตํด ์ค์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด๋ณด์ธ์. ์ด ๊ฐ์๋ฅผ ์๊ฐํ์ ๋ค๋ฉด ์ด๋ค ์ฌ์ดํธ๋ ๋ง๋ค ์ ์์ต๋๋ค.
vue3
tailwind css
firebase authentication
firebase firestore
firebase storage
firebase hosting
vue 3 + tailwind css + firebase๋ฅผ ์ด์ฉํ์ฌ
ํธ์ํฐ๋ฅผ ์ง์ ๋ฐ๋ผ๋ง๋ค์ด ๋ณด์ธ์! ๐ช
์ธ์ ๊น์ง ์ ๋ฌธ์๋ง ์ฝ๊ณ , TODO list ๋ง๋ค๊ธฐ ๊ฐ์๋ง ๋ค์ผ์ค ๊ฑด๊ฐ์? ๊ธฐ๋ณธ์ด ์ค์ํ์ง ์๋ค๋ ๋ง์ด ์๋๋๋ค. ๊ฐ๋ฐ๋ถ์ผ๋ ๋์์ด ์๋ก์ด ๊ธฐ์ ์ด ๋์ค๊ณ ๋งค๋ฒ ์๋ก์ด ๊ธฐ์ ์ ์ตํ๋๋ฐ ๋ง์ ์๊ฐ๊ณผ ๋ ธ๋ ฅ์ ๋ค์ฌ์ผ ๋ฉ๋๋ค. ๊ฑฐ๊ธฐ์ ๋ฐ๋ฅธ ๊ฐ์ฅ ํจ์จ์ ์ธ ํ์ต ๋ฐฉ๋ฒ์ ์ฐพ์์ผ ๋ค์ณ์ง์ง ์์ ์ ์์ต๋๋ค. ๊ทธ๋ฐ ์ ์์ ๊ฐ์ฅ ํจ์จ์ ์ธ ํ์ต๋ฒ์ ํด๋ก ์ฝ๋ฉ์ ๋๋ค. ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ์ดํดํ๊ณ , ๋ฐ์ดํฐ ๋ฒ ์ด์ค์ ์ฐ๊ฒฐํ๊ณ , ํ๋ฉด์ ๋ฟ๋ฆฌ๋ ๊ฒ์ ๋๊ตฌ๋ ๊ฐ์๋ฅผ ๋ฃ๊ณ ์ฑ ์ ์ฝ์ผ๋ฉด ์ด๋ ต์ง ์๊ฒ ํ์ค ์ ์์ต๋๋ค. ํ์ง๋ง, ์ค์ ํ๋ก๊ทธ๋๋ฐ์์๋ ๊ฐ์์์ ๋ณด์ง ๋ชปํ๋ ์๋ง์ ์์ง๊ตฌ๋ ํ ๋ฌธ์ ๋ค์ ๋ง์ฃผ์น๊ฒ ๋ฉ๋๋ค. ์ ๋ ๊ฐ์ด ํ๋ ํด๋ก ์ฝ๋ฉ์์ "์ ๋ด๊ฐ ์ํ๋๋๋ก ์๋ํ์ง ์๋์ง?" ๊ณ ๋ฏผํ๊ณ ํด๊ฒฐํด๋๊ฐ๋ ์๋ฐฑ ์์ฒ๋ฒ์ ๊ฒฝํ์ ํตํด์ ๊ฐ๋ฐ์ ํฅ๋ฏธ๋ฅผ ์กฐ๊ธ ๋ ๋๋ผ์ จ์ผ๋ฉด ํฉ๋๋ค.
https://twitter-clone-inflearn-76b0d.web.app/
https://github.com/jinsyu/twitter-clone-inflearn
Q-1. vue.js 3๋ฒ์ ์ค์ ํ๋ก์ ํธ์ ๋ฐ๋ก ํฌ์
๊ฐ๋ฅ ํ๊ฐ์?
A-1. ๋ฒ์ 2์ ํฌ๊ฒ ๋ฌ๋ผ์ง ์ ์ ์์ต๋๋ค. ๋ชจ๋ ๋ฉด์์ ๋ฒ์ 3๋ก ๋์ด๊ฐ์ง ์์ ์ด์ ๊ฐ ์์ต๋๋ค. ๊ตณ์ด ๊ตฌ๋ฒ์ ๊ฐ์๋ฅผ ๋ค์ผ์ค ํ์๋ ์๊ฒ ์ฃ ? ์ด ๊ฐ์๋ฅผ ๋ค์ผ์ ๋ค๋ฉด vue.js 3 ์๋ฒฝํ ์ตํ์ค ์ ์์ต๋๋ค.
Q-2. ๊ฐ์ ๋์ด๋๋ ์ด๋์ ๋ ์ธ๊ฐ์?
A-2. vue.js ์ javascript ๊ธฐ๋ณธ ๋ฌธ๋ฒ(๋น๋๊ธฐ ํจ์), css(flex)์ ๋ํด ์๊ณ ๊ณ์ ๋ค๋ฉด ๋ฌด๋ฆฌ ์์ด ์๊ฐ ๊ฐ๋ฅํ์ญ๋๋ค.
Q-3. ์ ํํ ํด๋ก ํ๋ก์ ํธ ๋ง๋ค๊ธฐ ์ธ๊ฐ์?
A-3. ๋น์ ๊ณต์๋ก์ ์๋
๊ฐ์ ๊ณต๋ถํ ๊ฒฝํ์ ๋น์ถ์ด๋ณด๋ฉด, ํด๋ก ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด ๋ณด์์ ๋ ๊ฐ์ฅ ํฐ ์ค๋ ฅ ํฅ์์ ์ป์์ต๋๋ค. ์ ํด์ง ํ๋ก์ ํธ๋ฅผ ์ฒ์๋ถํฐ ๋๊น์ง ๋ง๋ค์ด ๋ณด๋ฉด์, ์ฌ๋ฌ ๋ฌธ์ ์ํฉ๋ค์ ์ข์ ํ๊ธฐ๋ ํ์ง๋ง ์ง์ ๋ด ์์ผ๋ก ํด๊ฒฐํด๋ด๊ณ ๋ง์นจ๋ด ์์ฑ์์ผฐ์ ๋์ ์ฑ์ทจ๊ฐ์ ์์ฒญ ๋ฉ๋๋ค. ๊ธฐ๋ณธ ๋ฌธ๋ฒ์๋ฅผ ๋ณด์ ๋ค๋ฉด ์ต๋ํ ์์ ๊ฑธ๋ก, ๊ธฐ๋ณธ ๋ฌธ๋ฒ ๊ฐ์๋ฅผ ๋ค์ผ์ ๋ค๋ฉด ์ต๋ํ ์งง์ ๊ฐ์๋ฅผ ๋ค์ผ์๊ณ ์ค์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด ๋ณด์๋๊ฑธ ์ ๊ทน ์ถ์ฒ๋๋ฆฝ๋๋ค.
Q-4. ํ๋ก๊ทธ๋๋ฐ ์
๋ฌธ์ ์
๋๋ค. ์ฌ๋ฌ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด, ํ๋ ์ ์ํฌ๋ค ์ค์์ vue.js, firebase, tailwind css๋ฅผ ์ด์ฉํ์ ์ด์ ๊ฐ ์๋์?
A-4. ์ 3๊ฐ์ง ํ๋ ์ ์ํฌ๋ฅผ ์ด์ฉํ์ ๋ค๋ฉด ๋ง๋ค์ง ๋ชปํ ๊ฒ์ด ์์ต๋๋ค. ๊ฐ๋ ฅํ๋ฉด์๋ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์
๋๋ค. ์ ๋ชจ๋ฅด์๊ฒ ๋ค๋ฉด ์ ๋ง ๋ฏฟ๊ณ ๋ฐ๋ผ์ค์๋ฉด ๋ฉ๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
๊ธฐ๋ณธ ํ์ต์ ๋ง์น๊ณ ์ค์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด๋ณด๊ณ ์ถ์ผ์ ๋ถ
vue.js 3 ๋ฐฐ์ฐ๊ณ ์ถ์ผ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
javascript ๊ธฐ์ด ๋ฌธ๋ฒ
vue.js ๊ธฐ๋ณธ
๋น๋๊ธฐ ๋ฌธ๋ฒ ์ดํด(async-await)
์ค์ฉ์ฃผ์ ํ๋ก๊ทธ๋๋ฐ์ ์งํฅํ๋ ํ๋ฆฌ๋์ ๊ฐ๋ฐ์ ์ ๋๋ค.
python, js, golang, c#, django framework, djangorestframework, flask, telegram bot, aws, vue.js, firebase, tailwind css... ๋ฅ์น๋๋๋ก ๊ฐ๋ฐํ๊ณ ์์ต๋๋ค.
ํน๋ณํ ๋ฐฐ์ฐ๊ณ ์ถ๊ฑฐ๋ ๋ง๋ค๊ณ ์ถ์ ํ๋ก์ ํธ๊ฐ ์์ผ์๋ฉด jinsyu.com@gmail.com์ผ๋ก ์ฐ๋ฝ์ฃผ์ธ์.
์ ์ฒด
54๊ฐ โ (9์๊ฐ 44๋ถ)
vue router ๋ง๋ค๊ธฐ
06:59
๋ก๊ทธ์ธ ํ์ด์ง
02:56
input validation
04:21
vuex
16:32
navigation guard
16:48
tweet ์ ๋ ฅ
12:46
firestore onsnapshot
14:36
์๋ฆผ ํ์ด์ง
09:39
์ชฝ์ง ํ์ด์ง
25:51
ํธ์ ์ญ์
07:03
๊ณต๊ฐํ์ง ์๋ ๊ฐ์๋ก ์๊ฐ์ด ์ ํ๋ฉ๋๋ค.