Skip to content

Latest commit

ย 

History

History

VueJS

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
ย 
ย 

Vue.js

์ปจ๋ฒค์…˜

  • javascript์™€ vue ์ฝ”๋“œ์˜ ์ž‘์„ฑ์€ airbnb์™€ vue/essential ๊ฐ€์ด๋“œ๋ฅผ ๋”ฐ๋ฅธ๋‹ค
  • style์˜์—ญ์€ scoped scss๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ํด๋ž˜์Šค์˜ ๋ช…๋ช…๊ทœ์น™์€ BEM์„ ์‚ฌ์šฉํ•œ๋‹ค

๊ตฌ์กฐ

  • ์ปดํผ๋„ŒํŠธ ๊ตฌ๋ถ„

    • components: ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํผ๋„ŒํŠธ
    • modules: ํŠน์ • ํŽ˜์ด์ง€๋‚ด์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํผ๋„ŒํŠธ
    • pages: ๋ผ์šฐํ„ฐ๋ฅผ ๊ฐ€์ง€๋Š” View ์ปดํผ๋„ŒํŠธ
    • layouts: ๋ผ์šฐํ„ฐ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์ •์˜ํ•˜๋Š” ์ปดํผ๋„ŒํŠธ
  • Vue ๊ธฐ๋Šฅ๊ด€๋ จ

    • store: vuex๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ๊ธฐ๋Šฅ๋‹จ์œ„๋กœ ์ƒํƒœ๋ฅผ ๊ตฌ๋ถ„
    • router: ํŽ˜์ด์ง€์˜ ์ง„์ž…๊ฒฝ๋กœ๋ฅผ ๊ด€๋ฆฌ
    • directives: ์ปค์Šคํ…€ directives
    • filters: ์ปค์Šคํ…€ filters
  • lib

    • ์™ธ๋ถ€ ์„œ๋น„์Šค์˜ SDK ๋˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‹ค๋ฃจ๋Š” ์˜์—ญ
  • assets

    • ํŽ˜์ด์ง€ ๋‚ด ๋ฆฌ์†Œ์Šค
  • styles

    • ํŽ˜์ด์ง€ ์ „์—ญ ์Šคํƒ€์ผ
  • constants

    • ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜

Module Import

  • ๋ชจ๋“ˆ์˜ Import๋Š” ๋™์ผํ•œ ๊ฒฝ๋กœ๋ฅผ ์ œ์™ธํ•˜๊ณ  ์ ˆ๋Œ€๊ฒฝ๋กœ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
@/components/foo

./foo
  • js ํŒŒ์ผ์ด ์•„๋‹Œ ๊ฒฝ์šฐ ํ™•์žฅ์ž๋ฅผ ํ‘œ๊ธฐํ•˜๊ณ  ํŒŒ์ผ๋ช…์„ ๋ณ€ํ˜•ํ•˜์ง€ ์•Š๋Š”๋‹ค.
  @/components/foo.vue;  (O)
  @/components/foo.vue; (X)

  @import '@/scss/base/_colors.scss';  (O)
  @import '@/scss/base/colors.scss';  (X)

template

  • ํƒœ๊ทธ์˜ ๋ช…๋ช…๊ณผ ํ”„๋กœํผํ‹ฐ๋ฐ”์ธ๋”ฉ์€ ์Šค๋„ค์ดํฌ์ผ€์ด์Šค๋กœ ํ‘œ๊ธฐํ•œ๋‹ค.
(O)  <eight-percent/>
(X)  <EightPercent/>
  • Slot์˜์—ญ์ด ํ•„์š”์—†๋Š” ๊ฒฝ์šฐ ์ถ•์–‘ํ˜•์œผ๋กœ ํ‘œ๊ธฐํ•œ๋‹ค.
(O)  <eight-percent/>
(X)  <eight-percent></eight-percent>
  • ํ”„๋กœํผํ‹ฐ์™€ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ์—ฌ๋Ÿฌ์ค„๋กœ ๋‚ด๋ ค์“ฐ๋Š” ๊ฒฝ์šฐ ์ค„๋ฐ”๊ฟˆ ์ดํ›„ ์ž‘์„ฑํ•œ๋‹ค.
(O)
<eight-percent
  v-if="loaded"
  :data-index="dealIndex"
/>

(X)
<eight-percent v-if="loaded"
  :data-index="dealIndex"
/>
  • ๋‹จ ์ˆœ์ˆ˜ํ•œ HTMLํƒœ๊ทธ์—๋Š” ๋งŽ์€ ์š”์†Œ๊ฐ€ ๋ฐ”์ธ๋”ฉ๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ํ•œ์ค„์„ ์–ธ์„ ํ—ˆ์šฉํ•œ๋‹ค.
(O)
<div id="foo" class="bar"></div>
(-)
<div
  class="x"
></div>
  • ํ”„๋กœํผํ‹ฐ์™€ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๋‚˜์—ด์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‹ค์Œ์˜ ์ˆœ์„œ๋กœ ์ง„ํ–‰ํ•œ๊ณ  ์ค‘์š”๋„์— ๋”ฐ๋ผ ์ˆœ์„œ๋Š” ์กฐ์ •๋  ์ˆ˜ ์žˆ๋‹ค.
<eight-percent
  // ์ •์ ํ”„๋กœํผํ‹ฐ
  class=""
  // ์กฐ๊ฑด๋ถ€ ๋ฐ”์ธ๋”ฉ
  v-if="loaded"
  // ๋ฆฌ์ŠคํŠธ๋žœ๋”๋ง
  v-for="(item, index) in items"
  // ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๋ฐ”์ธ๋”ฉ
  :class="{ active: isActive }"
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  // ์ด๋ฒคํŠธ ๋ฐ”์ธ๋”ฉ
  @click="event"
  // Props ๋ฐ”์ธ๋”ฉ (Props๋Š” Array ๋˜๋Š” primary type์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค)
  :data-index="dataIndex"
/>
  • v-if์™€ v-for๋Š” ๋™์‹œ์— ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , ์กฐ๊ฑด๋ถ€ ๋ฆฌ์ŠคํŠธ๋žœ๋”๋ง์˜ ๊ฒฝ์šฐ computed์†์„ฑ์—์„œ filterํ•œ๋‹ค.
  • style, class ๋ฐ”์ธ๋”ฉ์€ ๋ฌธ์ž์—ด๋ณด๋‹ค๋Š” ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด๋กœ ์ •์˜ํ•œ๋‹ค.
  • ๋‹จ ์ด๋ฒคํŠธ๋ฐ”์ธ๋”ฉ์€ ๋ฐ˜๋“œ์‹œ ์นด๋ฉœ์ผ€์ด์Šค๋กœ ์ž‘์„ฑํ•œ๋‹ค. (์ผ€๋ฐฅ์ผ€์ด์Šค ์ž‘์„ฑ ์‹œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Œ)

Style

  • ๋ ˆ์ด์•„์›ƒ, ๋ฏน์Šค์ธ, ๋ณ€์ˆ˜ ๋“ฑ ์ „์—ญ ์Šคํƒ€์ผ์„ ์ œ์™ธํ•œ ์˜์—ญ์—์„œ scoped scss๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. <style lang="scss" scoped>
  • ํด๋ž˜์Šค์˜ ๋ช…๋ช…์€ BEM์„ ๋”ฐ๋ฅธ๋‹ค.
  • ID์„ ํƒ์ž๋Š” ๋ฐ˜๋“œ์‹œ ํŽ˜์ด์ง€์—์„œ ์œ ์ผํ•จ์ด ๋ณด์žฅ๋˜์–ด์•ผ ํ•˜๋Š” ํ…Œ๊ทธ์—๋งŒ ์‚ฌ์šฉํ•œ๋‹ค.
  • Module์†์„ฑ์€ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค. (๊ธฐ์กด์ฝ”๋“œ์— ํฌํ•จ๋˜์–ด ์žˆ๊ณ  ์œ ์‚ฌํ•œ ํ˜•ํƒœ๋กœ ๊ฐœ๋ฐœ์ด ์ง„ํ–‰๋˜๋Š” ๊ฒฝ์šฐ์—๋Š” ์‚ฌ์šฉ)
// module css ์˜ˆ์ œ
<script>
data() {
  return {
    color: this.$colors.black,
    redColor: this.$style.red,
  };
}
</script>

<style lang="scss" module="$colors">
@import '@/scss/base/_colors.scss';

:export {
  black: $color-gr-700;
}
</style>

<style module>
.red {
  color: red;
}
</style>

Component

  • ์ปดํผ๋„ŒํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ํŒŒ์ผ๋ช…๊ณผ ์ผ์น˜ํ•˜๋Š” ๊ฒƒ์„ ์›์น™์œผ๋กœ ํ•˜๊ณ  ๊ตฌ๋ถ„์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ prefix๋ฅผ ๋ถ™์—ฌ์ค€๋‹ค.
components: {
  'el-title': Table,
},
  • ์ปดํผ๋„ŒํŠธ์˜ ๊ตฌ์„ฑ์€ ๋‹ค์Œ์˜ ์ˆœ์„œ๋ฅผ ๋”ฐ๋ฅด๊ณ  ์‚ฌ์šฉ๋˜๋Š” ํ•ญ๋ชฉ์ด ์—†๋Š”๊ฒฝ์šฐ ์ž‘์„ฑํ•˜์ง€ ์•Š๋Š”๋‹ค
import Foo from 'path';

export default {
  name: '',
  mixins: [],
  props: {},
  component: {},
  data() {
    return {

    }
  },
  computed: {},
  watch: {},
  methods: {},
  
  // LifeCycle Hooks
  created() {},
}
  • Props๋Š” ๋‹จ์ˆœ๋‚˜์—ด์ด ์•„๋‹Œ ๊ตฌ์ฒด์ ์œผ๋กœ ์ •์˜ํ•˜๊ณ  Optional๊ฐ’์€ default๊ฐ’์„ ๋ช…์‹œํ•œ๋‹ค.
  • validator๋Š” ํ•„์š”์— ๋”ฐ๋ผ ์„ ํƒ ์ ์šฉํ•œ๋‹ค.
  • required: true๋Š” ์—†์„๋•Œ ๋ฌธ์ œ๊ฐ€ ๋˜์•ผํ•˜๋Š” ๊ฒฝ์šฐ์—๋งŒ ์‚ฌ์šฉํ•œ๋‹ค.
props: {
  props1: {
    type: String,
    required: true,
  },
  props2: {
    type: String,
    default: '',
  },
  props3: {
    type: Array,
    default: () => [],
  },
  props4: {
    type: Object,
    default: () => ({
      foo: '',
      bar: 1
    }),
  },
  props5: {
    type: String,
    validator: function (value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  },
}
  • ๊ฐ€๊ธ‰์  ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ์œ ์ง€ํ•œ๋‹ค.

Store

  • Store์˜ Vuex ๊ธฐ๋ณธ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜๊ณ  ์Šคํ† ์–ด์˜ ์˜์กด์„ฑ์ด ํฐ ๊ฒฝ์šฐ Helperํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
// Action
this.$store.dispatch('Action Name', value)

// Mutation
this.$store.commit('Mutation Name', value);

// Getter
this.$store.state['State Name']

// helperํ•จ์ˆ˜ ์ด์šฉ
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('[๋ชจ๋“ˆ๋„ค์ž„]');

...mapActions([
  '[ActionName]',
]),

import { mapState, mapActions } from 'vuex'
...mapActions([
  '[๋ชจ๋“ˆ๋„ค์ž„]/[ActionName]',
]),


// ๋ชจ๋“ˆ๋ณ„ ๊ตฌ๋ถ„ (ํ•˜๋‚˜์˜ ์ปดํผ๋„ŒํŠธ์—์„œ ๋‹ค์–‘ํ•œ ๋ชจ๋“ˆ Store๋ฅผ ์ฐธ์กฐํ•  ๋•Œ)
import { mapState, mapActions } from 'vuex'
...mapActions('๋ชจ๋“ˆ๋„ค์ž„', [
  'ActionName1',
  'ActionName2',
]),
  • ์Šคํ† ์–ด๋Š” ๊ธฐ๋Šฅ๋ณ„ ๋ชจ๋“ˆํ™”ํ•˜์—ฌ ์‚ฌ์šฉ ํ•œ๋‹ค.
  • ๊ธฐ๋ณธ๊ตฌ์„ฑ์€ ์•„๋ž˜์™€ ๊ฐ™์œผ๋ฉฐ mutation-type์€ ์„ ํƒ์  ์‚ฌ์šฉํ•œ๋‹ค.
import request from 'superagent';

export default {
  namespaced: true,

  state: {
    state1: '',
  },
  getters: {
    // get + ์ƒํƒœ๋ช…์„ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์˜๋ฏธ์žˆ๋Š” ๋ช…์‚ฌ๋‚˜ ์ƒํƒœ๊ฐ’๊ณผ ๋™์ผํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•œ๋‹ค.
    getState1: '',
  },
  mutations: {
    // set + ์ƒํƒœ๋ช…์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์ƒํƒœ๋ฅผ ๋ณ€์ด์‹œํ‚ค๋Š” ์ฝ”๋“œ๊ฐ€ ์•„๋‹Œ ํฌํ•จํ•˜์ง€ ์•Š๋Š”๋‹ค.
    setState(state, value) {
      state.dealNotice = value;
    },
  },

  actions: {
    // ๋น„๋™๊ธฐ์ฒ˜๋ฆฌ๋‚˜ ํ–‰์œ„๋ฅผ ๊ธฐ์ˆ ํ•˜๊ณ  ๋„ค์ด๋ฐ์˜ ์ œ์•ฝ์€ ์—†๋‹ค.
    fetchData(context, id) {
      return new Promise((resolve, reject) => {})
    },
  },
};
  • Actions
    • Action์€ ๋น„๋™๊ธฐ๊ณผ์ •์ด๋‚˜ ์œ ์ €์˜ ํ–‰์œ„๋ฅผ ์ •์˜ํ•˜์—ฌ ์‚ฌ์šฉํ•œ๋‹ค.
    • ์ปดํผ๋„ŒํŠธ์—์„œ ์ƒํƒœ๋ณ€ํ™”๋ฅผ ์ผ์œผํ‚ฌ๋•Œ๋Š” mutation๋ช…์œผ๋กœ ์˜๋ฏธ๊ฐ€ ์ „๋‹ฌ๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด action์„ ํ†ตํ•ด์„œ ์ ‘๊ทผํ•˜๋„๋ก ํ•œ๋‹ค.

Router

  1. ๋ผ์šฐํ„ฐ ๋์—๋Š” '/'๋Š” ๋ถ™์ด์ง€ ์•Š๋Š”๋‹ค.
  2. ๋ผ์šฐํ„ฐ๋Š” ๊ฐ€๊ธ‰์  ์ด๋ฆ„์„ ๊ฐ€์ง€๋„๋ก ํ•˜๊ณ  name์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
  this.$router.push({ 
    name: '',
    params: {},
    query: {},
  });

Watch ํŒจํ„ด

  1. Watch๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜๋˜์–ด ์‚ฌ์šฉํ•œ๋‹ค.
watch: {
  watchDataName() {
  },
},
  1. ๋ณต์žก๋„๊ฐ€ ๋†’๊ฑฐ๋‚˜ watch option์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ๋‹ค์Œ์˜ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
methods: {
  todo1() { },
  todo2() { },
},
watch: {
  watchDataName: {
    deep: true, // option: object ๋˜๋Š” array๋ฅผ ๊ฐ์‹œํ• ๋•Œ (default: false)
    immediate: true, // option: ํŽ˜์ด์ง€ ๋กœ๋“œ ์ฆ‰์‹œ ์‹คํ–‰ (default: false)
    handler: [
      'todo1',
      'todo2',
      // oldValue๊ฐ’์„ ์ฐธ์กฐํ•˜๊ฑฐ๋‚˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ
      function foo (value, oldValue) {

      },
    ],
  }
}
  1. computed์†์„ฑ์œผ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๊ฐ€๊ธ‰์  ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.