vue에서의 객체 v-for

배열만 되는 것이 아니라, 객체 역시 v-for로 loop를 만들어줄 수 있다. 이 때 매개변수를 크게 세 개 받을 수 있는데, (item, key, index) 순이다.

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')

const obj = {
  title: 'asd',
  name: 'john',
  age: 1
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
  <div v-for="**(item, key, index)** in obj">
    {{index + 1}}. {{ key }}: {{ item }}
  </div>
</template>

이미 push 된 커밋 딱 한 줄만 고치고 싶을 때

마지막 커밋을 고치고 싶을 때 사용하는 명령은 바로 --amend이다.

변경 후 git add를 한 뒤에 git commit —-amend를 통해서, 가장 마지막 커밋을 고칠 수 있다. 만약 해당 커밋이 원격으로 push가 된 경우, push -f를 통해서 해당 변경 사항을 강제로 원격으로 보내야 한다.

# 수정 후
# 스테이지에 올리고
git add 수정된 파일

# 마지막 커밋 변경
**git commit --amend**

# 커밋 메세지를 수정하고 싶으면 수정 가능
수정 후 :wq

# 만약 커밋이 원격 레퍼지토리에 올라갔다면
git push -f

git amend | Atlassian Git Tutorial

nullish coalescing

프로젝트 코드 작성 시,

객체에 해당 키에 대응하는 배열 아이템이 있는지 파악 > 있다면 해당 배열에 새 값 추가 > 없다면 새 값이 들어간 새 배열을 해당 키에 할당

이런 로직을 작성해야 하는 때가 있었다.

const notiPerDays = {}
const dayExpression = { today: '오늘', yesterday: '어제' }
const today = new Date()

notiDataArr.forEach((noti) => {
  const day = noti.created_at.split(' ')[0]
  const relativeDay = formatRelative(new Date(day), today).split(' at')[0]
  **const dayKey = dayExpression[relativeDay]
    ? dayExpression[relativeDay]
    : day**

  const value = notiPerDays[dayKey]
  notiPerDays[dayKey] = value ? [...value, noti] : [noti]
})

해당 코드를 nullish coalescing을 사용하면 더욱 깔끔하게 작성할 수 있다.

const notiPerDays = {}
const dayExpression = { today: '오늘', yesterday: '어제' }
const today = new Date()

notiDataArr.forEach((noti) => {
  const day = noti.created_at.split(' ')[0]
  const relativeDay = formatRelative(new Date(day), today).split(' at')[0]
  **const dayKey = dayExpression[relativeDay] ?? day**

  const value = notiPerDays[dayKey]
  notiPerDays[dayKey] = value ? [...value, noti] : [noti]
})

nullish coalescing이란

왼쪽 피연산자가 null이나 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 연산자이다.

let foo;  // undefined

let someDummyText = foo ?? 'Hello!';  // Hello!

기본적으로 변수에 값을 할당할 때 OR 연산자를 활용해서 작업할 수도 있다.

let foo;  // undefined

let someDummyText = foo || 'Hello!';  // Hello!

왜 OR 연산자를 사용하지 않는 것이 좋으냐면, OR는 왼쪽 피연산자가 falsy한 값이면 모두 다 오른쪽 값을 반환해주기 때문이다. 따라서 만약 ''이나 0, NaN을 유효한 값으로 생각하고 작업했을 때 이를 무시해버리는 문제가 발생할 수 있다.

let count;
let text;

...무슨무슨 작업...

count = 0;
text = "";

...무슨무슨 작업...

let qty = count || 42;
let message = text || "hi!";
console.log(qty);     // 42? 엥 0이 반환됐으면 좋겠는데
console.log(message); // "hi!" 엥 ""이 반환됐으면 좋겠는데

따라서 null과 undefined일 때만 적용할 수 있는 nullish coalescing을 사용하자.

Nullish coalescing operator - JavaScript | MDN