[React] Timer 만들기 / 저장한 데이터 수정(Update), 삭제 기능(Delete)

결과

저장한 데이터를 수정하고 삭제할 수 있도록 만들었다.

Firebase DB에서 “실시간”으로 업데이트하기 때문에 바로 변경됨

CRUD의 기능이 완성되었다.

아이디에 고유 id 값과 DB의 id 값을 비교하여 자신의 데이터만 불러온다.

 

---

CSS 내용

우선은 배치와 아이콘만 적용해 주었다.

[Times.css]

.times--container {
  width: 500px;
  display: grid;
  grid-template-columns: 400px 100px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  padding: 10px 0px;
  font-size: 18px;
}
.times--container input {
  width: 300px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  padding: 5px;
  background-color: #dfe6e9;
  font-size: 18px;
}

.times--item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.times--btn {
  margin-left: 25px;
  cursor: pointer;
}

---

목표

기록한 시간과 제목을 Contents 페이지에서 다른 사람과 공유할 수 있도록 만들 예정이다.

---

느낀 점

내가 직접 만든 것은 맞지만, 사용된 기술을 모두 이해하고 있지는 않다.
이것에 대한 회의감이 항상 따라온다.

어찌 보면 스마트폰이 내부적으로 어떻게 작동하는지 또는 어떻게 만들어졌는지 모르고 사용하고 있는 것과 마찬가지로 모든 걸 아는 것은 불가능하다고 생각한다.
하지만 '난 스마트폰 사용자가 되고 싶은 게 아니라 스마트폰을 만드는 사람이 되고 싶은 것인데, 몰라도 되는 것일까?'

새로운 기술 하나를 배우면 모르는 세부 내용이 찾아온다. 그 세부 내용을 배우면 또 모르는 여러 개의 세부 내용이 찾아온다. 어디까지 알아야 하고 어디까지 남겨둬야 하는지 항상 벽 앞에 서있는 것만 같다.