๋น ๋ฅด๊ฒ & ์ ๋๋ก UI๋ฅผ ๊ทธ๋ฆฌ๊ณ ์ถ๋ค๋ฉด?
์ต์ Vue3์ ์ํ ํ์ด์ฌ ์์ ์ ๋ณต!
Vue.js ๊ธฐ๋ฐ UI ํ๋ ์์ํฌ
ํ์ด์ฌ(Quasar) ํ๋ฒ์ ๋๋ด๊ธฐ
Vue.js ๊ธฐ๋ฐ UI Framework, ํ์ด์ฌ(Quasar)๋ฅผ ์์๋์? ์ด๋ฒ ๊ฐ์๋ก ํ์ด์ฌ๋ฅผ ์๊ฒ ๋๋ค๋ฉด ๊ฐ์ธ ํ๋ก์ ํธ ๋ฟ๋ง ์๋๋ผ ํ์ฌ์์ ์ค๋ฌด ํ๋ก์ ํธ๋ฅผ ์งํํ ๋ UI๋ฅผ ๋งํ์์ด ๋ง๋๋ ๋ฐ ๊ผญ! ๋์์ด ๋์ค ๊ฒ๋๋ค.
์ฝ๊ฒ, ๋น ๋ฅด๊ฒ, ํธ๋ฆฌํ๊ฒ
์ํ๋ UI๋ฅผ ๊ฐ๋ฐํ๊ณ ์ถ๋ค๋ฉด!

์ฒ์์๋ Vue3 + Quasar + Firebase๋ฅผ ํ์ฉํด ์ง์ง ์ปค๋ฎค๋ํฐ ์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๊ฐ์๋ฅผ ์ค๋นํ๊ณ ์์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ ๊ฒ ๋ง๋ค์ด์ง ์ปค๋ฎค๋ํฐ๋ ์ ๊ฐ ์ค์ ๋ก๋ ์ด์ฉํ ๊ณํ์ด์์ต๋๋ค.
๊ทธ๋ฐ๋ฐ ํ์ด์ฌ๋ฅผ ์ด์ฉํด UI๋ฅผ ๋ง๋ค๋ ์ค ์๊ฐ์ ๋ถ๋ค์ด UI ๊ตฌ์ถ์ ๋ํ ์ฌ๋ฌ ์ง๋ฌธ์ ์ฃผ์
จ๊ณ , โ์ํ๋ UI๋ฅผ ๋งํ์์ด ๋ง๋ค๊ธฐ ์ํด์๋ ๋ณ๋์ ํ์ด์ฌ ๊ฐ์๊ฐ ํ์ํ๊ฒ ๋คโ๋ ์๊ฐ์ด ๋ค์์ต๋๋ค.
์๋ํ๋ฉด ์ด๊ธฐ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ ๋ ์ฌ์ฉํ๋ ํ๋ ์์ํฌ์ ์ฐธ์ฌ๋๊ฐ ๋์ผ๋ฉด ๋์ ์๋ก ํด๋น ํ๋ ์์ํฌ๋ฅผ โ์ ๋๋กโ ์๊ณ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ์ ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ์๋ ๊ฐ๋ฐ ์์ฐ์ฑ๋, ์ ์ง๊ด๋ฆฌ ์ธก๋ฉด์์๋ ํฌ๋ํฐ ์ฐจ์ด๊ฐ ์๊ธฐ ๋๋ฌธ์
๋๋ค.
๊ทธ๋์ ์ด์ ๊ฐ์๋ฅผ ์ค๋นํ๋ ๊ฑฐ,
- ๊ฐ์ธ ์น ์ฌ์ดํธ๋ฅผ ๋ง๋์๋ ๋ถ๋ค์ด ๋น ๋ฅด๊ฒ, ๋ฉ์ง UI๋ฅผ ๊ฐ๋ฐํ ์ ์๋๋ก
- ํ์
์ ๊ณ์ ๊ฐ๋ฐ์ ๋ถ๋ค์ด ์ด ๊ฐ์๋ฅผ ํตํด ์ฑ๊ณต์ ์ธ ํ๋ก ํธ ์น์ ๊ฐ๋ฐํ ์ ์๋๋ก
ํ์ด์ฌ ํ๋ ์์ํฌ๋ฅผ ํ ๋ฒ์ ๋๋ผ ์ ์๋ ๊ฐ์๋ฅผ ์ค๋นํ๊ฒ ๋์์ต๋๋ค.
์, ํ์ด์ฌ ํ๋ ์์ํฌ์ผ๊น์? ๐

- ํ์ฌ ์ต์ Vue3์ ์์ ์ ์ผ๋ก ์ง์ํ๋ ํ๋ ์์ํฌ์
๋๋ค.
- ๊ฐ ์ปดํฌ๋ํธ API ์คํ(Prop, Event, Slots)์ด ๋งค์ฐ ๋ฐ์ด๋ฉ๋๋ค.
- ์ปดํฌ๋ํธ๋ฟ๋ง ์๋๋ผ ์ ํธ, ํ๋ฌ๊ทธ์ธ, ๋น๋ ๋ฑ ํ๋ก ํธ ๊ฐ๋ฐ์ ์ ๋ฐ์ ์ผ๋ก ์ง์ํ๋ ์ฌ์ธ์ ํ๋ ์์ํฌ์
๋๋ค.
์ ์ญ์ ์ด๋ฒ์ ์ ๊ฐ ์ฌ์ฉํ ์ปค๋ฎค๋ํฐ๋ฅผ ํ์ด์ฌ๋ก ๊ฐ๋ฐํ ์์ ์ด์์~! ๐
ํ์ด์ฌ ์๋ฒฝ ๋ง์คํฐ
์ปค๋ฆฌํ๋ผ ์ดํด๋ณด๊ธฐ ๐
- โ
๊ณต์ ๋ฌธ์๋ฅผ ํจ๊ป ์ดํด๋ด์ผ๋ก์จ ์๊ฐ์ ๋ถ๋ค์ด ์ค์ค๋ก ๋์๊ฐ ์ ์๋ ํ์ ๊ธธ๋ฌ๋๋ฆฝ๋๋ค.
- โ
์ฌ์ ์ง์์ด ํ์ํ ๋ถ๋ถ์ ๋ณ๋์ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํจ์ผ๋ก์จ ์ ๋๋ก ์ดํดํ ์ ์๋๋ก ๋์ต๋๋ค.
- โ
์์
์ค๊ฐ์ ์ฌ๋ฐ๋ ๊ธฐ๋ฅ, ํด๋ก ์ฝ๋ฉ์ ํตํ์ฌ ์ฌ๋ฏธ์ ์ค์ ๊ฐ๊ฐ์ ์ตํ ์ ์๋๋ก ์ค๋นํ์ต๋๋ค.
ํ์ด์ฌ ์์ํ๊ธฐ
- ํ์ด์ฌ๋ ๋ฌด์์ธ๊ฐ! ํ์ด์ฌ๋ฅผ ์ฌ์ฉํ๋ ์ด์
- Quasar CLI๋ก ์์ํ๊ธฐ - 4๊ฐ์ง ๋ฐฉ๋ฒ
- ํ๋ก์ ํธ ๊ตฌ์กฐ - Scaffolding๋ ๊ตฌ์กฐ ์ดํด๋ณด๊ธฐ
ํ์ด์ฌ ๊ธฐ์ด
- Typography, Colors, Spacing - ๊ธ๊ผด, ์์, ๊ฐ๊ฒฉ ํ์ฉํ๊ธฐ
- Breakpoints - ๋ฐ์ํ ์น ์ฝ๊ฒ ๋ง๋ค๊ธฐ
- Dark Mode (๋คํฌ ๋ชจ๋) ๊ธฐ๋ฅ ๋ง๋ค๊ธฐ
Grid & Layout
- Flex Grid - ์ํ๋ UI๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์ฒซ ๋จ์ถ!
- Web Layout, Multiple Layout - ์น ๋ ์ด์์, ๋ค์ค ๋ ์ด์์
- ์ธ์คํ๊ทธ๋จ ํ๋กํ ํ์ด์ง ๋ง๋ค๊ธฐ
Login & Form, Utils & Plugins
- ๋ก๊ทธ์ธ, ํ์๊ฐ์
ํ์ด์ง ๋ง๋ค๊ธฐ
- QForm - ํผ ํธ๋ค๋ง, ์ ์ฐ์ฑ ์ฒดํฌ
- Quasar Utils & Plugins
๋ค๊ตญ์ด ์ฒ๋ฆฌ
- Quasar Language Packs - ํ์ด์ฌ ๋ด๋ถ ์ปดํฌ๋ํธ ๋ค๊ตญ์ด ์ ์ฉ
- i18n - ์ฌ์ฉ์ ์ ์ ์ปดํฌ๋ํธ ๋ค๊ตญ์ด ์ ์ฉ
์ ํ๋ธ ํ์ด์ง ํด๋ก ์ฝ๋ฉ
- ์ ํ๋ธ ํ์ด์ง ๋ง๋ค๊ธฐ
Deployment & SEO
- Deployment - SPA ๋ฐฐํฌํ๊ธฐ
- Meta Plugin์ ํ์ฉํ ๊ฐ๋จ SEO ์ต์ ํ
ํ์ด์ฌ๋ก ์์ฑํ๋ ์ฝ๊ณ ๋น ๋ฅธ UI ๊ตฌ์ถ ๐

ํ์ด์ฌ ํ๋ ์์ํฌ๋ฅผ ํตํด ์ค์ค๋ก ์ฝ๊ณ , ๋น ๋ฅด๊ฒ UI๋ฅผ ๊ตฌ์ถํ ์ ์๋๋ก ํ๋๋ฐ ์ค์ ์ ๋ ๊ฐ์์
๋๋ค. ์๊ฐ ํ ์ค์ค๋ก ๊ณต์๋ฌธ์๋ฅผ ๋ณด๊ณ ์ํ๋ UI๋ฅผ ๊ฐ๋ฐํ ์ ์๋ ํ์ ๊ธธ๋ฌ๋๋ฆฝ๋๋ค!
์ง์ฝ๋ฉ ์ ํ๋ธ์์ ๊ฐ์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ (EP 01~07)
์ง์ฝ๋ฉ๊ณผ ํจ๊ปํ๋
์ค์ฉ์ ์ธ ์ฝ๋ฉ ํ์ต ๐ช

์๋
ํ์ธ์, ์ง์ฝ๋ฉ์
๋๋ค. ์ ๋ ํ์ฌ ์ค์ฉ์ ์ธ ์ฝ๋ฉ ์ฑ๋์ธ "์ง์ฝ๋ฉ GYM CODING" ์ ํ๋ธ ์ฑ๋์ ์ด์ํ๊ณ ์์ต๋๋ค. ์ฌํด Vue.js3 ๊ธฐ๋ณธํธ๊ณผ ์ค์ ํธ์ ๋ก ์นญํ์๋๋ฐ์. ๋ง์ ๋ถ๋ค์ด ์ข์ ํผ๋๋ฐฑ์ ์ฃผ์
จ์ต๋๋ค.
"Vue.js 3 ์ง์ง ์ปค๋ฎค๋ํฐ ์ฌ์ดํธ ๋ง๋ค๊ธฐ ๊ฐ์" ๋ก ์นญ ์ ์๊ฐ์ ๋ถ๋ค์ด ์ค์ค๋ก ์ํ๋ UI๋ฅผ ์์ ๋กญ๊ฒ ๋ง๋ค ์ ์๋๋ก Quasar Framework ๊ฐ์๋ฅผ ๋ก ์นญํ๊ฒ ๋์์ต๋๋ค.
์ ํ๋ธ | ๊นํ | Gym์คํ๊ทธ๋จ | Coding์คํ๊ทธ๋จ
Q&A ๐ฌ
Q. Vue.js ์ง์์ด ์๋ ์ํ์์ ์๊ฐํด๋ ๋ ๊น์?
ํด๋น ๊ฐ์๋ Vue3๋ฅผ ์๊ณ ์๋ ์ํ์์ ์๊ฐํ๊ธฐ์ ์ ํฉํฉ๋๋ค. ์ ์ ์ง์์ผ๋ก๋ ๋ค์ ๊ฐ์๋ฅผ ์ถ์ฒํฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ ์ ํ๋ธ ์ง์ฝ๋ฉ ์ฑ๋์์ ๋ค์ํ ๊ฐ๋ฐ ๊ด๋ จ ์ง์์ ์ป์ผ์ค ์ ์์ด์ ๐
Q. ๊ฐ์์ ์ฌ์ฉ๋ ์์ค์ฝ๋๊ฐ ์ ๊ณต๋๋์?
๋งค ์์
ํ์ฐจ๋ณ๋ก ํด๋น ์ฝ๋๋ฅผ ๋ค์ด๋ก๋ํ ์ ์๋๋ก ์ ๊ณตํ๊ณ ์์ต๋๋ค.
Q. ์๋ฒ ์ฐ๋์ ๊ดํ ๋ด์ฉ๋ ๋ค๋ฃจ๋์?
์๋๋๋ค. ๋ณธ ๊ฐ์๋ ์๋ฒ ์ฐ๋์ ํ์ง ์๊ณ ํ์ด์ฌ์ ์ง์คํ์ฌ ์ค๋ฌด์์ UI๋ฅผ ์ ๋๋ก ๊ทธ๋ฆฌ๊ณ ๋น ๋ฅด๊ฒ ๋ง๋ค ์ ์๋๋ก ์ค๋นํ ๊ฐ์์
๋๋ค. ์๋ฒ ์ฐ๋ ๊ด๋ จ ์์
์ Vue.js 3 ์๋ฒฝ ๋ง์คํฐ: ๊ธฐ์ด๋ถํฐ ์ค์ ๊น์ง - "์ค์ ํธ" ๊ฐ์์์ ๋ค๋ฃจ๊ณ ์์ผ๋ ์ฐธ๊ณ ๋ถํ๋๋ฆฝ๋๋ค.
ํ๋ก๊ทธ๋๋ฐ ์ด๋ณด ๊ฐ์ด๋ ๐ข
ํ๋ก๊ทธ๋๋ฐ์ ์ด์ ๋ง ์์ํ์๋ ๋ถ๋ค์ด ๋ณธ ๊ฐ์๋ฅผ ์ํํ ์๊ฐํ ์ ์๋๋ก ํ๋ก ํธ์๋ ๊ฐ๋ฐ ๊ฐ์ด๋๋ฅผ ์๋ดํด ๋๋ฆฝ๋๋ค. ๋ค์ 6๊ฐ ๊ฐ์๋ฅผ ์์๋๋ก ํ์ตํ์๋ฉด ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ฝ๊ณ ์ฌ๋ฏธ์๊ฒ ๋ฐฐ์ธ ์ ์์ต๋๋ค ๐
์ด์ธ์๋ ์ ํ๋ธ ์ง์ฝ๋ฉ GYM CODING ์ฑ๋์์ ๋ค์ํ ๊ฐ๋ฐ ์ง์์ ์ ํ ์ ์์ผ๋, ๊ด์ฌ ์์ผ์ ๋ถ๋ค๊ป์๋ ๊ตฌ๋
ํด์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค.