배열만 되는 것이 아니라, 객체 역시 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>
마지막 커밋을 고치고 싶을 때 사용하는 명령은 바로 --amend
이다.
변경 후 git add를 한 뒤에 git commit —-amend
를 통해서, 가장 마지막 커밋을 고칠 수 있다. 만약 해당 커밋이 원격으로 push가 된 경우, push -f
를 통해서 해당 변경 사항을 강제로 원격으로 보내야 한다.
# 수정 후
# 스테이지에 올리고
git add 수정된 파일
# 마지막 커밋 변경
**git commit --amend**
# 커밋 메세지를 수정하고 싶으면 수정 가능
수정 후 :wq
# 만약 커밋이 원격 레퍼지토리에 올라갔다면
git push -f
git amend | Atlassian Git Tutorial
프로젝트 코드 작성 시,
객체에 해당 키에 대응하는 배열 아이템이 있는지 파악 > 있다면 해당 배열에 새 값 추가 > 없다면 새 값이 들어간 새 배열을 해당 키에 할당
이런 로직을 작성해야 하는 때가 있었다.
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을 사용하자.