shaking blog

[CSS] z-index 에 대해서

shaking — Wed, 24 Jan 2024 11:33:53 +0900

z-index 의 특징

z-index 값이 클 수록 위로 올라온다.
ex) A 의 z-index 는 0, B 의 z-index는 1 일 경우

z-index 값이 같을 경우 나중에 배치된 레이어가 위로 올라온다.
ex) A 와 B 의 z-index 모두 0 인데, html B 가 더 나중에 배치된 경우

태그 깊이가 같은 것 끼리만 비교가 된다.
ex) A 는 z-index가 2, B 는 z-index 1, C 는 z-index 3 일 때 A > C > B 순으로 나타난다.

<div class="A">A</div>
<div class="B">
  B
  <div class="C">C</div>
</div>

→ A 와 B 중 A z-index 값이 더 크므로 A가 B 보다 위로 위치한다.
→ B 와 C 중 C z-index 값이 더 크므로 C 가 B 보다 위로 위치한다.
즉, 부모 영향을 받으니 아무리 z-index 값이 크더라도 다른 요소들 보다 아래에 위치할 수 있음을 유의할 것

z-index 값의 기본 값 (선언하지 않은 값) 은 0 이 아니라 auto 이다. 이말은 즉,
- 현재 쌓임 맥락에서의 자신의 위치 : 3번 예시로 설명 됨
- 자신만의 쌓임 맥락 생성 여부
  - 이 말은 z-index: auto로 지정하거나 z-index를 설정하지 않은 경우에는 쌓임에 대한 정의가 아예 아무것도 없다는 의미. (z-index: 0 은 쌓임 맥락은 있지만 값이 0 일뿐)
    ex) 3 예시에서 B 의 z-index 을 아예 없앴을 경우 C > A > B 순으로 나타난다.

→ B 에 z-index 가 있었을 때는, A와 B를 비교했지만 (형제끼리 비교)
B 의 z-index 가 auto 이면, B의 자식인 C 가 비교할 대상으로 선정된다.
따라서, C(z-index: 3) 가 A(z-index: 2) 보다 더 위에 위치하게 된다.

즉!
- z-index 는 기본적으로 형제 끼리 비교가 우선이다.
- 하지만 형제의 z-index 값이 auto 이면 형제의 자식도 확인하여 비교한다.

다른 디자인 시스템 Use Case 정리

vuetify
- dialog: 202
- snackbar: 1000
- tooltip: 8
meterial - zindex
ant - zindex 를 props 로 받음
- popover: 1030
- tooltip: 1070
- popconfirm: 1060
- modal: 1000
- notification: 1050
- drawer: 1000
bootstrap - zindex
- modal: 1055
- popover: 1070
- toast: 1090
- tooltip: 1080
chakra - zindex
forma - zindex
salesforce - zindex
nord - zindex
stackoverflow - zindex
shoelace - zindex

vuetify					202	202	1000	8
merterial	1000			1050	1200	1300	1400	1500
ant					1000	1000	1050	1070
bootstrap		1000	1020	1030		1070	1090	1080
charkra		1000	1100			1400	1700	1800
shoelace		900			700	800		1000
nord	400		300			900	800	700
stackoverflow		1000				9000		3000
forma		1000				100		1000

지원 브라우저 확인 하는 사이트

shaking — Wed, 17 Jan 2024 16:50:35 +0900

https://caniuse.com/

맥북에서 Apple 기기 테스트 하는 방법

shaking — Wed, 17 Jan 2024 16:49:49 +0900

spotlight 검색 열기 (command + space bar)
simulator 검색
docker 위의 simulator 아이콘 에서 마우스 오른쪽 → device 선택

Storybook Button Example (feat. vue)

shaking — Wed, 17 Jan 2024 16:46:21 +0900

Start

package.json 에 다음과 같이 명령어를 넣는다.

  "scripts": {
    "dev": "vite",
    ...
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006"
  },

다음 명령어를 통해 Storybook 을 실행할 수 있다.

npm run dev:storybook

http://localhost:3003 로 Storybook 이 자동 실행 된다.

Button Example

1. Button Story 를 추가해봤다.

2. 전체적인 코드를 먼저 대략적으로 말하자면, Button Component 에서 label, primary 여부, size, backgroundColor 를 props 으로 받고 click 이벤트를 세팅했다.

스토리 포맷의 세부 내용은 다음과 같다. 기본적으로 스토리를 만들기 위해서는 title, component, template 이 있어야한다. 다음은 primary 스토리를 만든 예시이다.

import CommonButton from './CommonButton.vue';

export default {
  title: 'Example/Button',
  component: CommonButton,
};

export const Primary = () => ({
  components: { CommonButton },
  template: '<CommonButton primary label="Button" />',
});

title 은 Storybook 의 tree 구조 및 라이브러리와 스토리 이름을 정할 때 사용한다.

component 는 미리 보려하는 구성 요소를 뜻한다.
template 은 말 그대로 사용할 컴포넌트 템플릿을 만들 때 사용한다. 자유롭게 인자를 지정하여 여러개의 스토리를 만들 수도 있다.

3. 자유롭게 인자를 지정하기 위해서는 args 와 argTypes 를 이용하면 된다.

import CommonButton from './CommonButton.vue';

export default {
  title: 'Example/Button',
  component: CommonButton,
  args: {
    backgroundColor: '#000'
  },
  argTypes: {
    backgroundColor: { control: 'color' },
  }
};
...

args 는 모든 스토리에 공통으로 전달될 props 를 말한다. 예를 들어 위와 같이 설정 했을 경우 모든 스토리에 공통으로 backgroundColor 가 검정색으로 전달이 된다.
argTypes 는 각 스토리 args 의 행동(behaviour) 방식을 설정한다. 예를 들어 위와 같이 설정 했을 경우 Controls 에서 선택한 색상을 bacgroundColor 에 적용할 수 있도록 props 를 전달하겠다는 의미이다.

4. 그 외 decorators, parameters, excludeStories 등 이 있다.

decorators : 스토리를 래핑하는 추가 랜더링 기능
parameters : 스토리에 대한 정적 메타 데이터 정의
excludeStories : 랜더링 제외 설정

5. 다음은 args 와 argTypes 를 이용해 여러개의 스토리 template 을 만든 코드이다.

...
const Template: any = (args: any, { argTypes }: any) => ({
  props: Object.keys(argTypes),
  components: { CommonButton },
  template: '<CommonButton v-bind="$props" />'
});

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

6. 위에서 만든 CommonButton Component 의 스토리를 만들어봤다.

import CommonButton from './CommonButton.vue';

export default {
  title: 'Example/Button',
  component: CommonButton,
  argTypes: {
    backgroundColor: { control: 'color' },
    size: {
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
    },
  }
};

const Template: any = (args: any, { argTypes }: any) => ({
  props: Object.keys(argTypes),
  components: { CommonButton },
  template: '<CommonButton @click="onClick" v-bind="$props" />'
});

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

Storybook 시작하기 (feat. vue)

shaking — Wed, 17 Jan 2024 16:28:24 +0900

Install

1. Storybook CLI 사용해 설치한다.

npx sb init

루트 안에 .storybook 과 storybook-static 추가된다.
package.json 에 명령어 추가된다.

...
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
...

2. .gitignore 에 다음과 같이 추가한다.

.storybook
storybook-static

3. Stroybook 을 다음 명령어로 실행한다.

npm run storybook

http://localhost:6006 로 Storybook 자동 실행 된다.

Setting

.storybook/main.js 에서 스토리 위치 외 Storybook 에 관련된 다양한 옵션들을 세팅할 수 있다.

1. 스토리 위치 세팅

.storybook/main.js 를 보면 Stroybook 설치 시 기본 세팅이 다음과 같이 stories 폴더 하위에 스토리가 위치하도록 되어있다.

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  ...

components 내부에 Component.vue 와 동일한 이름으로 같이 있는게 대세 같아 다음과 같이 수정했다.

module.exports = {
  "stories": [
    "../components/*.stories.@(js|jsx|ts|tsx)"
  ],
  ...

2. scss 세팅 #

다음 명령어 실행한다.

npm install @storybook/preset-scss css-loader sass sass-loader style-loader --save-dev

.storybook/main.js 의 addon 에 설치한 preset-scss 추가한다.

module.exports = {
  ...
  "addons": [
    ...
    '@storybook/preset-scss'
  ],
  ...
}

Example

Storybook 에선 Component 를 Library, 예시를 Story 라고 부른다.

Button Story 를 추가해봤다.

CommonButton.vue

<template>
  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'nuxt-property-decorator'

@Component
export default class Button extends Vue {
  @Prop({ type: String, required: true })
  label: string

  @Prop({ type: Boolean, default: false })
  primary: boolean

  @Prop({ type: String, default: 'medium', validator: (value) => { return ['small', 'medium', 'large'].indexOf(value) !== -1; } })
  size: string

  @Prop({ type: String })
  backgroundColor!: String

  get classes() {
    return {
      'CommonButton': true,
      'CommonButton--primary': this.primary,
      'CommonButton--secondary': !this.primary,
      [`CommonButton--${this.size}`]: true,
    };
  }

  get style() {
    return {
      backgroundColor: this.backgroundColor,
    };
  }

  onClick() {
    this.$emit('onClick');
  }
}
</script>

<style lang="scss">
.CommonButton {
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;

  &--primary {
    color: white;
    background-color: #1ea7fd;
  }

  &--secondary {
    color: #333;
    background-color: transparent;
    box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
  }

  &--small {
    font-size: 12px;
    padding: 10px 16px;
  }

  &--medium {
    font-size: 14px;
    padding: 11px 20px;
  }

  &--large {
    font-size: 16px;
    padding: 12px 24px;
  }
}
</style>

CommonButton.stoires.ts

import CommonButton from './CommonButton.vue';

export default {
  title: 'Example/Button',
  component: CommonButton,
  decorators: [withDesign],
  argTypes: {
    backgroundColor: { control: 'color' },
    size: {
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
    },
  }
} as CompomentMeta<typeof CommonButton>;

const CommonButtonStory: ComponentStory<typeof CommonButtonStory> = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { CommonButton: CommonButton },
  template: '<CommonButton @click="onClick" v-bind="$props" />'
});

export const Primary = CommonButtonStory.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = CommonButtonStory.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = CommonButtonStory.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = CommonButtonStory.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

Responsive Test

1. Canvas > Change the size of the preview 버튼 클릭

2. 원하는 화면 선택

3. 직접 Viewport 추가하는 방법

// .stroybook/preview.js

export const parameters = {
  viewport: {
    iphone5: {
      name: 'iPhone 5',
      styles: {
        height: '667px',
        width: '375px',
      },
      type: 'mobile',
    },
    iphoneXr: {
      name: 'iPhone XR',
      styles: {
        height: '896px',
        width: '414px',
      },
      type: 'mobile',
    },
    ...
  }
}

4. 기본적으로 Storybook 에서 제공하는 Viewport 세팅 하는 방법 #

// .storybook/preview.js

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
};

5. 특정 예시에 기본 Viewport 지정하는 방법

CommonButton 스토리에 Viewport 를 Storybook 에서 제공하는 Viewport 세팅하고, 기본적으로 보여질 화면을 아이폰 6로 지정한 예시이다. Component parameters 를 사용해 설정할 수 있다.

export default {
  title: 'Example/Button',
  component: CommonButton,
  parameters: {
    viewport: {
       viewports: INITIAL_VIEWPORTS,
       defaultViewport: 'iphone6'
    }
  },
 ...
} as CompomentMeta<typeof CommonButton>;

CommonButton 스토리 중 primary 버튼에 Viewport 를 지정 후 기본적으로 보여질 화면을 아이폰 X 로 지정한 예시이다. 스토리 parameters 에 Viewport 를 추가하면 된다.

Primary.parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS,
    defaultViewport: 'iphonex'
  }
};

Addon Figma

1. storybook-addon-designs 설치한다. #

npm install --save-dev storybook-addon-designs

2. .storybook/main.js 의 addon 에 storybook-addon-designs 추가한다.

module.exports = {
  ...
  "addons": [
    ...
    'storybook-addon-designs'
  ],
  ...
}

3. CommonButton.storires.ts 에 다음 코드를 추가한다.

export default {
  ...
  decorators: [withDesign],
  parameters: {
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
    },
  },
  ...
};

4. Design 탭에서 연동된 Figma 를 확인할 수 있다.

5. Story 별로 Figma 연동하고 싶을 경우는 다음과 같이 작성하면 된다.

export default {
  ...
  decorators: [withDesign],
  ...
};
...
Primary.args = {
  primary: true,
  label: 'Button',
};
Primary.parameters = { //Primary Story 에만 figma 연동
  design: {
    type: 'figma',
      url:
    'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',
  },
}

[Vue] Vue2 에 Composition API 적용하기

shaking — Wed, 17 Jan 2024 14:04:21 +0900

Composition API 설치

install

npm install @nuxtjs/composition-api --save

plugin 추가
https://bitbucket.org/backpackr/web.idus.com/src/f71db99f7dbd/plugins/composition-api.plugin.ts
nuxt.config.ts > buildModules 추가

buildModules: [
    ...
    '@nuxtjs/composition-api/module'
  ],

Composition API 사용 하기

Composition API import

import {reactive, ref} from "@nuxtjs/composition-api";

setup()에 전달된 인자에 대한 타입을 추론하려면, defineComponent 를 사용해야한다. #

<script lang="ts">
export default defineComponent({
  name: 'HomePage',
  components: {
    Logo,
  },
  setup() {
    const count: number = ref(0)
    return { count }
  }
})
</script>

Ref

setup 안에서 ref 를 출력할 땐 .value 를 붙여줘야한다.

let count = ref(0)
console.log(count.value)

위 처럼 타입을 정의하지 않아도 알아서 타입을 체크하지만, ref 에 타입을 정의하고 싶다면 다음과 같이 두가지 방법이 있다
첫번째 방법은 여러 타입을 정의할 때 사용하고, 두번째 방법은 기존에 지정 했던 타입을 재정의 할 때 사용하길 권장한다. #

const count: Ref<number | string> = ref('0') // 또는
const count = ref<number | string>(0)

Reactive

ref 와 달리 reactive 는 중첩된 타입을 가지 않는것을 권장한다. #
그래서 그런지 위와 같이 여러 타입 정의할 수 있도록 도와주는 interface 가 존재하지 않는다.
출력은 ref 와 다르게 .value 없이 사용한다.

const header = reactive<IHeader>({ title: 'hello idus', useLogo: false }) // 또는
const header: IHeader = reactive({ title: 'hello idus', useLogo: false })
console.log(header.title)

Computed

get 만 할 경우

const handleClickInclude = () => count.value++
const handleClickExclude = () => count.value--

get, set 모두 사용할 경우

const computedText = computed({
    get: (): string => text.value,
    set: (newText): string => text.value = newText
})

타입을 지정하고 싶으면 다음과 같이 사용하면 된다.

const computedText = computed<string>({
    get: (): string => text.value,
    set: (newText): number => text.value = newText
})

// 여러 타입 정의 시 ComputedRef 사용한다.
const style: ComputedRef<IBgStyle | undefined> = computed(() => {
  if (props.backgroundColor) {
    return {
      backgroundColor: props.backgroundColor,
    }
  }
})

타입 지정할 때 볼 수 있듯이 computed 를 setup 안에서 사용할 땐 ref 처럼 .value 를 붙여줘야한다.

console.log(computedText.value)

Function

모두가 아는 그것. 설명을 생략하겠다.
아! ref, reactive, computed, function 등 모두 template 에서 사용하려면 return 을 해줘야한다.

setup() {
  const count = ref(0)

  const handleClickInclude = () => count.value++
  const handleClickExclude = () => count.value--

  return {
    count,
    handleClickInclude,
    handleClickExclude
  }
}

위 코드는 간단하지만 코드가 길어지면 Composition API 사용하는데 의미가 없다. #

Watch

한개의 소스만 Watch 할 경우, ref 일 경우와 아닐 경우 사용 방법이 다르다. #

// ref watch 할 경우
const count = ref(0)
watch(count, (count, prevCount) => {
  ...
})

// reactive, props (getter) 등을 watch 할 경우
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
  ...
  }
)

여러 소스를 Watch 할 경우는 다음과 같이 사용한다.

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  ...
})

Props

자식 Component 에서 Props 을 선언할 땐 다음과 같이 defineComponent 안에 setup 보다 위에 선언한다.
기존과 다른점이라면 Array 나 Object 에 as PropType<YourInterface> 를 사용해 타입을 지정할 수 있다는 것이다.

export default defineComponent({
  name: 'ProductList',
  props: {
    products: {
      type: Array as PropType<IProduct[]>, // Array 에 타입 정의
      required: true
    },
    order: {
      type: String,
      required: true
    }
  },
  setup() {
    ...
  }
})

setup 은 2가지의 인자를 전달하는데 props 와 context 이다. 따라서 자식 Component 에서 Props 로 받은 데이터를 setup 안에서 사용하고 싶다면 다음과 같이 사용하면 된다.

export default defineComponent({
  name: 'ProductList',
  ...
  setup(props) {
    return {
      ...useOrderedProduct(props),
      ...useOrderClasses(props)
    }
  }
})

Props 의 타입은 defineComponent 가 알아서 찾아주니 선언할 필요는 없다고 한다 #

Emit

setup 전달인자 중 context 안에 있는 emit 을 활용한다.

setup(props: ICommonButtonProps, { emit }: SetupContext) {
  ...

  const handleClickButton = () => {
    emit('click')
  }

  return {
    classes,
    style,
    handleClickButton
  }
}

Lifecycle Hooks

이전 스터디때 설명 드렸던 바와 같이 beaforCreate, created hook을 setup 훅으로 대체하여 사용되고, 그 외 기존과 다르게 다음과 같이 Lifecycle이 달라지고 사용할 땐 앞에 on을 붙여서 사용 한다.

setup() {
  onMounted(() => {
    console.log('mounted!')
  })
  onUpdated(() => {
    console.log('updated!')
  })
  onUnmounted(() => {
    console.log('unmounted!')
  })
}

Template reference

Composition API를 사용하면, reactive refs API와 template 의 refs의 개념이 통합됩니다. template 내 ref 를 사용하고 싶다면 기존과 같이 ref를 선언하고 setup에서 반환하면 된다.

<template>
  <div class="ProductList" ref="root">
    ...
  </div>
</template>

<script>
  import {defineComponent, onMounted, ref} from "@nuxtjs/composition-api";

  export default {
    setup() {
      const root = ref(null)

    onMounted(() => {
      console.log(root.value) // <div class="ProductList">...
    })

    return {
      root
    }
  }
</script>

[GIT] 방금한 commit 취소 (하고 다시 stage 로 복구)

shaking — Wed, 17 Jan 2024 12:11:31 +0900

이전에 작성했던 git 에서 commit 취소 하는 방법은 :

https://88240.tistory.com/523

reset 명령어를 통해 commit 한 내용을 모두 지우는 것인데,
commit 을 하지 않아야할 상황에 잘못 commit 해서 commit 실행취소처럼 다시 stage 에 복구시키는 명령어에 대해 메모한다.
명령어는 다음과 같다.

git reset HEAD^

[GIT] git 에서 pull 받으려 할 때 다음과 같이 error 날 경우

shaking — Wed, 17 Jan 2024 12:05:38 +0900

hint: You have divergent branches and need to specify how to reconcile them. 
hint: You can do so by running one of the following commands sometime before

hint: git config pull.rebase false # merge 
hint: git config pull.rebase true # rebase 
hint: hint: You can replace "git config" with "git config --global" to set a default hint: preference for all repositories. You can also pass --rebase, --no-rebase, 
hint: or --ff-only on the command line to override the configured default per hint: invocation. Need to specify how to reconcile divergent branches.

위와 같은 에러가 날 경우

1. git pull --ff-only

2. git config --global pull.ff only

위의 두 명령어 실행하면 해결 된다.

intellij 에서 treeview 안보일 때

shaking — Tue, 16 May 2023 17:31:56 +0900

https://apeltop.blogspot.com/2018/06/intellij.html

[Vue] Composition API

shaking — Mon, 21 Mar 2022 14:57:06 +0900

Vue3 에서 달라진 점

https://v3.ko.vuejs.org/guide/migration/introduction.html#주목할-만한-새로운-기능들

시작하기 | Vue.js

시작하기 INFO Vue.js의 새로운 기능에 대한 정보가 필요하신가요? 그렇다면 필수가이드를 확인하세요. 이번 가이드는 Vue 2 경험이 있으면서, Vue 3 변경사항 및 새로운 기능을 배우고 싶은 사용자를

v3.ko.vuejs.org

https://composition-api.nuxtjs.org/

Nuxt Composition API

Vue 3 Composition API in Nuxt

composition-api.nuxtjs.org

Composition API 탄생 배경

1. Options API

data, methods, computed 에 각각 로직이 분산되어 추적이 어렵다.
하나의 데이터가 어떻게 변화하고 사용되는지 그룹핑하기 어렵다.
- mixin 을 사용하면 되지만 다중 mixin 을 상속하게 되면 오버라이딩 문제나 component 관리가 어려워진다.
- 즉, 유지보수가 어렵다 어려워 :(

2. Composition API 의 setup 함수에 데이터가 그룹핑 되어 보다 용이하게 데이터의 흐름을 파악하고 로직의 재사용성과 가독성을 높여준다.

Composition API 예시

기존 방식

<template>
    <div>
        <h1>Count: {{ count }}</h1>
        <h1>Double: {{ double }}</h1>
        <button @click="increase">increase</button>
        <button @click="decrease">decrease</button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            count: 0,
        }
    },
    computed: {
        double () {
            return this.count * 2;
        }
    },
    methods: {
        increase () {
            ++this.count;
        },
        decrease () {
            --this.count;
        }
    }
}
</script>

딱히 별 기능 없이 간단한 카운트 기능을 하는 Component 에 비슷한 기능을 가진 로직들이 data, methods, computed 로 각각 분리되어 있다.

Component API 방식

<template>
    <div>
        <h1>Count: {{ count }}</h1>
        <h1>Double: {{ double }}</h1>
        <button @click="increase">increase</button>
        <button @click="decrease">decrease</button>
    </div>
</template>

<script>
import { reactive, computed } from '@vue/composition-api';

const useCount = () => {
    const count = ref(0);
    const double = computed(() => count.value * 2);

    const increase = () => ++count.value;
    const decrease = () => --count.value;

    return { count, double, increase, decrease }
}

export default {
    setup () {
        const { count, double, increase, decrease } = useCount();

        return {
            count,
            double,
            increase,
            decrease
        }
    }
}
</script>

관련된 것들을 한 부분에서 해결하고 있기 때문에 추후 Component 를 나눌 때도 편해지고 가독성도 좋아진다.

Setup

새로 추가된 라이프 사이클 훅으로써 Composition API 를 사용하기 위한 초기화 지점이다.
기존의 beforCreate 훅 이전에 setup이 호출되며, Composition API 를 사용하는 경우 beaforCreate, created hook을 setup 훅으로 대체하여 사용된다.
따라서 다음과 같이 기존 라이프 사이클에도 변화가 생긴다. (기존의 라이프 사이클을 사용할 땐 앞에 on을 붙여서 사용해야 된다.)

import { onMounted, onUpdated, onUnmounted } from  '@vue/composition-api'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

Data 선언

ref : 원시값(ex. 1, 'abc', false), 객체 선언 시 사용하며 모두 반응형을 가진다.
reactive : 원시값에 대해서는 반응형을 가지지 않고 객체나 배열에서만 깊은 감지를 수행한다.

<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const object = reactive({ foo: 'bar' });
    console.log(count.value); // 0

    return {
      count,
      object
    }
  }
}
</script>

예제에서 보다 시피 ref 로 선언한 값은 반드시 .value 를 통해 접근해야 실제 값을 받아올 수 있다. 그러나 template 에서는 접근하려 할 경우는 생략 가능하다.

ref 와 reactive 둘다 객체 선언이 가능하면 ref 만 사용하면 되는게 아닐까?
- ref 는 원본 값을 value 라는 속성에 담아두고 변경을 감시하는 객체이고, reactive 는 원본 객체 자체에 변경을 감지하는 옵저버를 추가하여 그대로 반환하기 때문에 각 특성에 따라 사용하면 된다.
ref 로만 구성했을 때 예시

setup(props, context) {
  const inputText = ref('');
  const isFocused = ref(false);

  const onChange = (): void => {
    context.emit('on-change', inputText.value);
  }
  const onFocus = (): void => {
    isFocused.value = true; // value에 할당
  }

  const onBlur = (): void => {
    isFocused.value = false; // value에 할당
  }

  onBeforeMount(() => {
    inputText.value = props.value; // value에 할당
  })

  return {
    inputText,
    isFocused,
    onChange,
    onFocus,
    onBlur
  }
}

reactive 로 구성했을 때 예시 ( + toRefs)

setup(props, context) {
  const state = reactive({
    inputText: '',
    isFocused: false
  });

  const onChange = (): void => {
    context.emit('on-change', state.inputText);
  }
  const onFocus = (): void => {
    state.isFocused = true; // state의 property를 통해 값을 할당한다.
  }

  const onBlur = (): void => {
    state.isFocused = false; // state의 property에 값을 할당한다.
  }

  onBeforeMount(() => {
    state.inputText = props.value; // state의 property에 값을 할당한다.
  })

  return {
    ...toRefs(state), // toRefs를 사용하여 ref로 변환한다.
    onChange,
    onFocus,
    onBlur
  }
}

이처럼 위와 같이 reactive 로 객체 값을 생성한 뒤 각 속성을 분해해서 재할당 할 경우 반응형으로 동작하지 않기 때문에 반환 시 toRefs 를 사용해 문제를 해결할 수 있다.

ifRef

...
const printValue = obj => {
  console.log(isRef(obj) ? obj.vlaue : obj); //ref 이면 .value 붙여서 출력, 아닐 경우 obj만으로 출력
}
...

Component 선언

computed(fn) 처럼 감싸서 값 선언을 해준다.

<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const plusOne = computed(() => count.value + 1);

    console.log(plusOne.value); // 1

    return {
      count,
      object
    }
  }
}
</script>

get, set 또는 추가 설정 가능하다.

<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const plusOne = computed({
      get: () => count.value + 1,
      set: val => { count.value = val - 1 }
    });

    console.log(plusOne.value); // 1

    return {
      count,
      object
    }
  }
}
</script>

Props

상위에서 어떤 props 를 받을 것인지 알려준 후, setup 에서 props.xxx 로 접근한다.

// Parent Component
<template>
  <dlv class="home">
    <PostList :posts="posts" />
  </div>
</template>
<script>
  import PostList from '../components/PostList.vue'
  import { ref } from 'vue';

  export default {
    name: 'Home',
    components: { PostList },

    setup() {
      const posts = ref([
        { title: '1번 타이틀', body: '1번 제목', id: 1 },
        { title: '2번 타이틀', body: '2번 제목', id: 2 },
      ]);

      return { posts }
    }
  }
</script>

// Child Component
<template>
  <div>
    {{ post.title }}
    {{ post.body }}
  </div>
</template>
<script>
export default {
  props: ["posts"], // 사용할 props를 배열내에 정의합니다.
  setup(props) {
    console.log(props.posts); // 받은 prop 사용가능
  }
};
</script>

이로써 죄다 this 에 때려박는 바인딩에서 탈피할 수 있다 (props 는 props! this 는 this!)

그 외

TemplateRef
- 내에서
  와 같이 TemplateRef를 사용할 때는 항상 ref로 정의한 state를 사용해야 한다. reactive로 정의한 state는 정상적으로 참조되지 않는다.
Composition API 에서 fetch 관련 라이프 사이클이 없다.
- 따라서 middleware 로 사용할 것을 권장한다.
…etc