๐ŸŸ kim3meals | ์œ ํŠœ๋ธŒ ๊น€์‚ฌ์›์„ธ๋ผ ๋ง›์ง‘ ์ง€๋„ ์›น : Development Log

์œ ํŠœ๋ธŒ ๊น€์‚ฌ์›์„ธ๋ผ ๋ง›์ง‘ ์ง€๋„ ์›น kim-3-meals

๐Ÿงฉ Specs

Vue3 + Firebase + Bootstrap + Netlify(Deploy)

๐ŸŒณ Github

Github: kim-3-meals

๐ŸŒ Deploy Link

Deploy Link: kim3meals ์ถœ๊ทผํ•˜๊ธฐ

๊ฐ์ข… ํฌํ„ธ์—์„œ ใ„ฑใ……ใ…‡ใ……ใ„ฒ ์ดˆ์„ฑ ๊ฒ€์ƒ‰์œผ๋กœ๋„ ์ ‘๊ทผ ๊ฐ€๋Šฅ



ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ

  • Terminal

$ 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(SCSS) ์„ค์ •

  • 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 | ๋ถ€ํŠธ์ŠคํŠธ๋žฉ

  • Bootstrap ์„ค์น˜
    $ yarn add bootstrap

  • src/App.vue

<style lang="scss">
  @import "~/scss/main.scss";
</style>
  • src/scss/main.scss
$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 ์„ค์ •์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ „์—ญ ์„ค์ •์„ ์ง„ํ–‰

Global SCSS ์„ค์ •

  • root/vue.config.js
const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/scss/main.scss"; 
        `
      }
    }
  }
}
  • src/components/HelloWorld.vue (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 ์˜ต์…˜ ์ฐธ๊ณ 

ํฐํŠธ ์„ค์ •(Web Font)

@font-face {
    font-family: 'TmonMonsori';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/TmonMonsori.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Ref Link : ํ‹ฐ๋ชฌ๋ชฌ์†Œ๋ฆฌ์ฒด

Firebase ์„ค์ •

vue2 => prototype
vue3 => config.globalProperties
app.config.globalProperties.$firebase = firebase
https://v3.vuejs.org/guide/migration/global-api.html#provide-inject

Eslint ์„ค์ •

Ref Link : eslint-plugin-vue

icons ์„ค์ •

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

Fireabse Auth

  • Netlify ๋ฐฐํฌ ํ›„ ๋„๋ฉ”์ธ ์ถ”๊ฐ€
    Firebase > Authentication > Sign-in method > Authorized domains(์Šน์ธ๋œ ๋„๋ฉ”์ธ) > ADD DOMAIN(๋„๋ฉ”์ธ ์ถ”๊ฐ€)

Ref : firebase auth/unauthorized-domain

Vue router ์—์„œ vuex(store) ์‚ฌ์šฉ

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/ใ„ฑ

Netlify reload(refresh) 404 error

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

Netlify ๋ฐฐํฌ

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ