์ ํ๋ธ ๊น์ฌ์์ธ๋ผ ๋ง์ง ์ง๋ ์น
kim-3-meals
Vue3 + Firebase + Bootstrap + Netlify(Deploy)
๊ฐ์ข ํฌํธ์์
ใฑใ ใ ใ ใฒ
์ด์ฑ ๊ฒ์์ผ๋ก๋ ์ ๊ทผ ๊ฐ๋ฅ
$ npm install -g @vue/cli
(Vue CLI v4.5.13 ๋ฒ์ ์ผ๋ก ์งํ)
$ vue create kim-3-meals
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
(์ค์น ์๋ฃ ํ)
$ cd kim-3-meals
$ yarn serve
vue-cli
๋ก ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก@
์ดsrc
ํด๋๋ฅผ ๊ฐ๋ฆฌํค๋ ๊ฒฝ๋ก ๋ณ์นญ์ด ์ค์ ๋์ด ์์
root/vue.config.js
const path = require('path');
module.exports = {
configureWebpack: {
resolve: {
alias: {
'~': path.join(__dirname, 'src/'),
}
}
}
}
์์ ๊ฐ์ด ์ค์ ํ๋ฉด
import HelloWorld from '~/components/HelloWorld'
์ ๊ฐ์ดsrc
๊ฒฝ๋ก๋ฅผ~
๋ก ์ฐพ์๊ฐ ์ ์์
src
๋ฟ๋ง ์๋๋ผ ์์ฃผ ์ฌ์ฉํ๋ ๊ฒฝ๋ก๋ฅผ ๋ฑ๋กํ์ฌ ํ์ฉํ ์ ์์
๐จ
vue.config.js
ํ์ผ ์์ ์, ํ๋ก์ ํธ๋ฅผ ๋ค์ ์์ํด์ผ ์ ์ฉ
SASS, SASS๋ก๋ ์ค์น
$ yarn add sass sass-loader@^10
error
Syntax Error: TypeError: this.getOptions is not a function
resolve
sass-loader
์ค์น ์, @^10
์ต์
์ ์ฌ์ฉํ์ง ์์ ๊ฒฝ์ฐ ์ต์ ๋ฒ์ ์ผ๋ก ์ค์น ๋จ
sass-loader
11 ์ด์์ ๋ฒ์ ผ์ ์ฌ์ฉํ ๊ฒฝ์ฐ์ ํธํ์ด ์ด๋ ค์ ๋ฐ์ํ ์ ์๋ ์๋ฌ
sass-loader
๋ฅผ ๋ค์ด๊ทธ๋ ์ด๋ํ์ฌ ํด๊ฒฐ(10 ๋ฒ์ ์ผ๋ก ์ฌ์ค์น)
# ๊ธฐ์กด ๋ชจ๋ ์ญ์
$ yarn remove sass-loader
# 10๋ฒ๋ ๋ฒ์ ผ ์ค์น
$ yarn add --save sass-loader@^10
Note on webpack
When using webpack version 4, the default in Vue CLI 4, you need to make sure your loaders are compatible with it. Otherwise you will get errors about confliciting peer dependencies. In this case you can use an older version of the loader that is still compatible with webpack 4.
Ref Link : Document / sass-loader version issue
Bootstrap ์ค์น
$ yarn add bootstrap
src/App.vue
<style lang="scss">
@import "~/scss/main.scss";
</style>
$primary: #3859B4;
$secondary: #A1FBB3;
$success: #ECAAB5;
$info: #EAEAEE;
$warning: #F1FB52;
$danger: #BF3631;
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/bootstrap"
๋ค์ ํํฉ์ฐฌ๋ํ ์์์ผ๋ก ์ค์ ๋์ด ์๋๋ฐ, ๋ณดํต 2~3๊ฐ์ง ๋ฉ์ธ ์ปฌ๋ฌ๋ฅผ ๋๋ ํธ์ด ์ ๋นํจ. ๋ณธ ํ๋ก์ ํธ๋ ๊น์ฌ์์ธ๋ผ
์์ ์์ฃผ ์ฌ์ฉ๋๋ ์๋ง ์์์ ์ต๋ํ ํ์ฉํ์์ผ๋ฉฐ ์ปฌ๋ฌ ์ฝ๋ ์ถ์ถ ๋ฐฉ๋ฒ์ ํ๋จ์ ์ฐธ๊ณ ํญ์ ๋งํฌ ์ฐธ์กฐ
Bootstrap
์์ ์ง์ ํด๋์$primary
๋$blue
๊ฐ์ ๋ณ์๋variables
์!default
๋ก ์ค์ ๋์ด์์
์ฆ, ๊ฐ๋ฐ์๊ฐoverride
ํ๋ ์ค์ ์ด ์์ผ๋ฉดdefault
๊ฐ์ด ์ ์ฉ๋จ
main.scss
์Bootstrap
์import
ํ๊ณ
App.vue
์์src/scss/main.scss
๋ฅผimport
ํจ๐ง ๋ค๋ฅธ
vue
ํ์ผ์์๋Bootstrap
์ ๋งค๋ฒimport
ํด์ผํ๋ ๋ถํธํจ์ด ์์
SPA ํ๋ก์ ํธ์ ๊ฒฝ์ฐ,
App.vue
์<style>
ํ๊ทธ์์scoped
attribute ์์ด ์ฌ์ฉํ๋ฉด
Bootstrap
์ ์ ์ญ์ ์ผ๋ก ์ฌ์ฉ ๊ฐ๋ฅํจ
๋ชจ๋components
๋ฅผApp.vue
์import
ํด์ ์ฌ์ฉํ๋ฉฐscoped
attribute๊ฐ ์์ผ๋ฉด ๊ทธ ํ์components
์ ๋ชจ๋style
์ด ์ ์ฉ๋๊ธฐ ๋๋ฌธ
SPA ํ๋ก์ ํธ๊ฐ ์๋ ๊ฒฝ์ฐ,
๐๐ป ์๋์Global SCSS ์ค์
์ ์ฐธ๊ณ ํ์ฌ ์ ์ญ ์ค์ ์ ์งํ
root/vue.config.js
const path = require('path');
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `
@import "@/scss/main.scss";
`
}
}
}
}
Bootstrap
์ ์ ์๋ ํ
์คํธ์ฉ)<div class="btn btn-primary">Home</div>
...
<style lang="scss">
...
</style>
vue-cli
๋ก ํ๋ก์ ํธ ์งํ ์ =>vue.config.js
ํ์ผ์loaderOptions
๋ฅผ ์ค์ ํ๋ฉฐ
webpack
์ผ๋ก ์งํ ์ =>webpack.config.js
ํ์ผ์ ์์ ํด์ผํจ
sass-loader
์ ๋ฒ์ ์ ๋ฐ๋ผ ์ค์ ์ต์ ์ด ๋ค๋ฆ์ ์ฃผ์
ํ ํ๋ก์ ํธ๋ 10๋ฒ์ ์ ์ฌ์ฉํ๊ณ ์๊ธฐ ๋๋ฌธ์additionalData
ํค์๋๋ฅผ ์ฌ์ฉํจon "sass-loader": "^7.*.*" try to use data on "sass-loader": "^8.0.2" try to use prependData on "sass-loader": "^9.0.0" try to use additionalData
๐จ
vue.config.js
ํ์ผ ์์ ์, ํ๋ก์ ํธ๋ฅผ ๋ค์ ์์ํด์ผ ์ ์ฉ
๐ค
Global import
๊ฐ ํญ์ ์ผ์ด๋์ง ์๋๋ค?<style lang="scss" scoped> h1 {} </style>
์์ ๊ฐ์ด
scss
์ธ์ด๋ก ์ด๋ค ์ค์ ์ด๋ ๋ค์ด์์ด์ผ global import๊ฐ ์ผ์ด๋จ
lang="scss"
์ธํ ์ด ์๊ฑฐ๋style
ํ๊ทธ ๋ด๋ถ์ ๋ด์ฉ์ด ์์ผ๋ฉด import๊ฐ ์ผ์ด๋์ง ์์
Ref Link : Vue CLI Document
Ref Link : sass-loader ์ต์
์ฐธ๊ณ
@font-face {
font-family: 'TmonMonsori';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Ref Link : ํฐ๋ชฌ๋ชฌ์๋ฆฌ์ฒด
vue2 => prototype
vue3 => config.globalProperties
app.config.globalProperties.$firebase = firebase
https://v3.vuejs.org/guide/migration/global-api.html#provide-inject
Ref Link : eslint-plugin-vue
Ref Link : https://ssimplay.tistory.com/350
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>
icons: https://fontawesome.com/v4.7/icons/
kakao map
์ฐธ๊ณ : https://jyoel.tistory.com/57
app key => JavaScript ํค ์ฌ์ฉ(index.html, map.vue ๋ ๊ณณ์์ ์ฌ์ฉ)
์ฌ์ฉ ์ ํ์ ์๊ฑด
kakao developer>๋ด ์ ํ๋ฆฌ์ผ์ด์
>์ฑ ์ค์ >ํ๋ซํผ>Web>์์
์ฌ์ดํธ ๋๋ฉ์ธ์ ์ถ๊ฐ >> https://localhost:8080
๋ง์ปค, ์ค๋ฒ๋ ์ด, ์ปค์คํ
์ค๋ฒ๋ ์ด
mouseup(hover) ์์ ์์ง์ผ ์, ๊น๋นก์ด๋ ์ฆ์(๊น๋นก์)
Ref Link: https://devtalk.kakao.com/t/customoverlay/60232/3
Firebase > Authentication > Sign-in method > Authorized domains(์น์ธ๋ ๋๋ฉ์ธ) > ADD DOMAIN(๋๋ฉ์ธ ์ถ๊ฐ)
Ref : firebase auth/unauthorized-domain
store.state = null ์๋ฌ
https://stackoverflow.com/questions/42579601/how-to-access-async-store-data-in-vue-router-for-usage-in-beforeenter-hook
ํด๊ฒฐ?? >> store.watch
https://serversideup.net/vue-router-navigation-guards-vuex/ใฑ
Ref : Netlify ์ฝ์ง๊ธฐ
Ref : Page Not Found on Reload Vuejs โ Netlify
vue-cli ์ค์น ์ฐธ๊ณ : Vue.js 3 ์ ๋ฆฌํ๊ธฐ
alias ์ฌ์ฉํ๊ธฐ : vue-cli 3, 4์์ import ๊ฒฝ๋ก alias @ ์ฌ์ฉํ๊ธฐ
๊น์ฌ์์ธ๋ผ ์ ํ๋ธ : [QnA] ์ธ์์ธ์ 10๋
์ฐจ ๊น์ฌ์์ด ๋ฝ์ ...
์ปฌ๋ฌ ์ฝ๋ ์ถ์ถ : ๋งฅ๋ถ ์ปฌ๋ฌ์ฝ๋ ์คํฌ์ด๋
AI ์ด๋ฏธ์ง๊ธฐ๋ฐ ํฐํธ๊ฒ์ ๋ฐ ์ถ์ฒ : font box
์ ํ๋ธ ์ธ๋ค์ผ ์ด๋ฏธ์ง URL : youtube Thumbnail
README.md tree: Github README.md์์ ๋๋ ํ ๋ฆฌ ํธ๋ฆฌ๋ฅผ ๋ํ๋ด๋ ๋ฐฉ๋ฒ์ด ์์ต๋๊น?
์ ํ๋ธ ๋ง์ง ์ง๋ : moob
์์ธ ๋
ธํฌ ๋ง์ง ๊ตฌ๊ธ ๋ด์ง๋ ๊ณต์ - ๊น์ฌ์์ธ๋ผ ์ ํฌ๋ธ์ฑ๋
fontawsome search
Heropy vue3 movie app
kakao developers
Kakao ์ง๋ Web API ๊ฐ์ด๋
firebase console
Netlify console
Github