2024.01.22 TIL

CSS - transform

css로 마우스를 hover하면 크기가 바뀌는 것을 구현할 때

width, height값을 주니까 좌상단을 기준점으로 커져서 어색해보이는 문제가 발생했다.

이 부분은 transform의 scale로 바꿔서 작성하니 원하는 대로 중심점을 기준으로 요소가 확대되었다.

.add-btn:hover {
  transform: scale(1.1); /* 1.2배 확대 */
  transition: transform 0.1s ease-in-out; /* 변화를 부드럽게 만들기 위한 트랜지션 추가 */
}

 

CSS - 메인컬러 변수로 사용하기

/* 변수 선언 및 색 할당 */
--main-color-green: #738a6f;
--main-color-beige: #fef9ed;

/* 변수로 접근하여 사용 */
color: var(--main-color-beige);

 

트러블 슈팅: React map의 key 설정값

개인 과제를 하면서 task를 썼다가 지웠다가 하면 간혹 task들이 두개가 겹쳐서 넘어가는 버그가 발생했다.

이 부분을 회의때 말씀드렸더니 팀원분께서 해결방법을 조언 해주셔서 고칠 수 있었다.

key를 배열의 length + 1로 하면 겹치는 id키가 발생하기 때문에 그런것이라고 한다.

해결법은 배열 마지막 요소의 id에 +1을 하는 것이다.

 

일단 id가 겹치는 상황이 왜 발생하는지 알기 위해 추가된 task title 옆에 아이템의 id를 추가해보았다.

그런다음 콘솔에도 같이 찍어봤는데, 

우선 length가 2부터 시작인 이유는 초기값이 들어있기 때문이고

1. 할 일을 3번 추가했을 때, 각각의 할 일은 id(length)가 2, 3, 4인 요소로 추가된다.
2. 두 번째 할 일을 삭제하면 length는 3이 된다.
3. 그 후에 추가된 할 일의 id를 length+1로 설정하여 추가하면 id가 4가 된다.
4. 하지만 이미 id가 4인 요소가 존재하기 때문에 id가 겹치게 된다.

따라서 id값을 배열의 길이 + 1 아닌 배열의 마지막 요소의 id 값에 +1으로 설정하여서 해결할 수 있었다.

 

/* 수정 전 */
const newTask = {
      id: tasks.length + 1,
      title: title,
      memo: memo,
      isDone: false,
    };
    
    
/* 수정 후 */
const lastIndexOfId = tasks.slice(-1)[0].id;
console.log(lastIndexOfId);

const newTask = {
      id: lastIndexOfId + 1, //마지막 요소의 아이디에 + 1
      title: title,
      memo: memo,
      isDone: false,
    };

 

+ 요소의 id값은 uuid나 crypto.randomUUID 등을 사용하여 고유하게 관리할 수 있다.