오늘의 목표
-
detail 페이지 UI완성하기 (O)
-
Edit 페이지 UI 완성하기 (O)
-
같은 id값에 url로 이동하기 (O)
오늘 배운것
- 오늘 메인페이지에 카드를 세부페이지에서 같은 내용을 보여주는걸 하고있었는데
오류가 발생한 부분이 생겼다.
firebase에서 data등록된걸 가져와서
const productInfo = data[id];
그데이타에 id에 맞는 값을 화면에 뿌려줄려고 했는데
data는 잘 들어오지만 data[id]를 하게 되면 값이 읽혀 오지 않았다.
여기서 나는 getDoc으로 데이터를 가져온게 아니라
getDocs로 데이터를 한번에 담아서 return을 한걸 data에 담아서 가져왔기떄문에
data[id]를 한것은 맞지 않는 문법 이였다. 저렇게 하는건 {}일때 하는거이기 떄문이다.
그래서 find로 가져온데이터를
const productInfo = data.find((item) => item.id == id);
찾아내서 필요한 부분에 값을 넘겨 주어서 완성을 하였다.
원래 알고있던 부분이였는데 다시한번 각인을 해야겠다고 생각을 했다.
느낀점
- 오늘 기본적인 UI를 완성을 하였고 메인에서 카드를 눌렀을때 세부사항으로 들어가면서
그 메인페이지에 누른 카드섹션과 동일 한 내용을 디테일 페이지 Edit페이지 에서도 나타나게 구현을 하였는데 팀프로젝트에서 처음으로 수정과 삭제 부분을 맞아서 그런지 세부페이지에서 앞에 팀원들이 아직 구현을 못하였을때 내가 미리 어떻게 해야되는지 생각을 많이 했던거 같다.
사실 크게 차이는 없었는데 내가 너무 복잡하게 생각을 해서 어렵게 느껴졌던부분이었던거 같다.
내일을 삭제하기 구현을 완료하고 수정하기 까지 완료 를 하고 싶다는 생각을 하였습니다.
