🌞 2/8 내배캠 React 72일차[ Next.js Typescript Firebase UD ]

[ Next.js Typescript Firebase CRUD ]

 

 

 

Update 기능 구현

 

일단 firestore에서 데이터를 가져오는 함수를 만든다.

//* 스토어에서 텍스트 가져오기
  const getTestData = () => {
    const q = query(collection(dbService, 'test'));

    onSnapshot(q, (snapshot) => {
      const newArr: any = [];
      snapshot.docs.map((doc) => {
        const newObj = {
          id: doc.id,
          ...doc.data(), // doc.data() : { text, createdAt, ...  }
        };
        newArr.push(newObj);
        setArr(newArr);
      });
      console.log('newArr: ', newArr);
    });
  };

여기서 query를 이용하여 firestore의 'test'라는 collection의 데이터를 먼저 가져온다.

 

const [arr, setArr] = useState([]);
  const [editTitle, setEditTitle] = useState('');



return (
<>
    {arr.map((item: any) => (
        <div key={item.test}>
          <h3>{item.test}</h3>
          <input
            onChange={(e) => {
              setEditTitle(e.target.value);
            }}
          />
          <button onClick={() => editData(item.id)}>수정</button>
          <button onClick={() => deleteData(item.id)}>삭제</button>
        </div>
      ))}
  </>

return 값에  map을 돌려 {item.test}라는 값을 나타낸다. 그리고 그 값은 input창에 있는 새로운 수정 값이 입력이 되면 수정을 할 수 있게 기능 구현했다.

조금 더 깔끔한 ui/ux를 위한다면 input창에 수정 버튼을 눌렀을 때 나타날 수 있게 토글로 설정할 수 있다.

 

수정버튼을 클릭하면 editData가 작동되게 구현했다.

  //* 스토어 텍스트 수정하기
  const editData = (docId: any) => {
    console.log('수정버튼을 클릭했습니다.');
    updateDoc(doc(dbService, 'test', docId), {
      test: editTitle,
    });
  };

updateDoc 메서드를 이용하여, "test"라는 collection에 새로운 input의 target.value값인 editTitle을 업데이트 한다.

Delete 기능 구현

update 기능과 로직은 비슷하다.

  //* 스토어 텍스트 삭제하기
  const deleteData = (docId: any) => {
    console.log('삭제버튼을 클릭했습니다.');
    deleteDoc(doc(dbService, 'test', docId));
  };

삭제 버튼을 클릭했을 때 deleteDoc 메서드를 활용하여 docId를 삭제하는 함수를 만든다.

 

 

기획의 중요성 !!!

기능구현이 들어간 지금 과정을 진행할 수록 조금씩 문제들이 발생하기 시작했다.

첫 기획단계에서 어느정도 틀은 잡았지만, 디테일한 부분을 잡지못하다보니 기능 구현 또는 모니터 흐름도를 생각하면서 변경되어야 할 부분이 많겠다는 걸 깨달았다.

그렇게 과감하게 팀원들과 회의한 결과 기획을 다시 다듬자는 결론을 내렸다.

지금까지 진행한 내용들을 바탕으로 프로젝트 주제에 약간의 변동이 생겼고, UI도 조금씩 변동이 되었다.

기획단계에서 짜야할 부분들을 직접 빌드하면서 겪다보니 오히려 많은 문제들을 먼저 경험해보는 기회가 되기도 했다. 하지만, 역시 기획단계를 철저히 지키고, 다듬어야 이후 작업을 진행하는데에 전혀 무리가 없을 것이고, 완성도 높은 제품을 만들수 있을 것이다.

- IA(정보구조도)를 다시 작성

- 화면흐름도 작성

- 와이어프레임 재작성

 

을 통해 우리의 제품이 어떤식으로 흘러갈 지에 대한 디테일한 기획을 세우고 있고, 우리의 타겟 고객,인물(파라소나)을 디테일하게 임시로 만들어 어떤 기능을 구현하면 좋을지 머릿속에 그려가며 작업을 진행하기로 결정했다.

 

이렇게 개발자와 디자이너가 기획단계에서 함께 진행하다보니 디자이너의 관점과 개발자의 관점을 바로바로 반영하여 프로젝트를 구성할 수 있는 장점이 있었다.

디자이너와 개발자는 입장차이가 분명하기 때문에 그 간극을 좁히는데 나의 대학 전공 및 사업 경험이 도움이 되었다고 생각한다.

디자이너는 작업을 진행할 때 미적인 면도 당연히 중시하지만 소비자의 입장에서 어떤 것들이 더 편하고 예쁠지에 대해 생각하는 성향이 강하고, 개발자도 동일하게 소비자들이 이용하기에 편안한 기술이 무엇인지 생각을 하지만 그 기술에 너무 매료되어 사용자 중심이 아닌 기술중심의 기능 구현을 하는 성향이 존재한다고 생각한다. 이런 점들을 디자이너와의 소통을 통해 풀어나간다면 조금 더 효과적인 소통과 완성도 높은 제품을 구현할 수 있지 않을까 싶다.