[개인프로젝트] Ps-Market 트러블슈팅 (수정중)

Ps-Market trouble Shooting

프로젝트 기간
1차 2024.01 - 2024.02 (4주)
2차 2024.03 - 진행 중

1인 기획, 제작, 개발, 배포 e-commerce 서비스

trouble Shooting

문제점: 로그인 스테이트 값이 유지가 안됨

해결 =>
로컬스토리지에 상태 값을 저장시켜 로그인이 계속 풀려버리는 상황을 해결.

문제점: firebase에 글을 작성할 시 해당 글에 대한 id값이 firebase database로 안 넘어감

해결 =>
해당 작성 글에 id값이 넘어오지 않아 디테일 페이지작성 및 진도에 큰 지장 초래.
id값은 addDoc함수를 거치고 나서 자동으로 생성되기 때문에 id값을 updateDoc를 활용하여 추가로 넣어주는 과정이 필요.
기존에 변수를 만들어서 addDoc에 넣었던 타입값을 addDoc값에 직접 넣어주고 그 값을 다시 updateDoc를 활용하여 id값만 따로 넣어서 업데이트해줌으로써 온전히 데이터베이스에 id값을 넣어줌.

문제점: 이미지 업로드를 했는데 이미지 url을 firebase 데이터베이스에 못 넘겨줌. 그래서 이미지가 안 뜸.

해결 =>
이미지 url값을 firebase 이미지 url값을 불러오는 함수 getDownloadURL을 활용하여 setState에 저장시켜 줬으나 데이터베이스에 값이 안 넘어감. 비동기적으로 함수실행이 되기전에 끝나서 url값이 안넘어감.
결국 함수를 따로 만들어서 비동기적으로 연결시켜 해결하던지 혹은 바로 값을 직접적으로 넣던지.
임시방편으로 바로 값을 집어넣어 보니 데이터베이스에 순조롭게 넘어감.

문제점: 마이페이지에 내가 쓴 글을 못 가져옴

해결 =>
내가 쓴 글에 해당 유저 id값이 안 들어갔기 때문에 상품끼리의 구분이 불가했음. firebase가 가지고 있는 user의 uid값을 활용하여 해당 글을 작성할 때 uid값도 추가함. 이제 각 유저마다 고유의 uid값을 가지고 있고 해당 상품글이 uid값을 가지고 있기 때문에 내가 쓴 글을 firebase database에 무사히 가져올 수가 있다.

문제점: 상품 디테일 페이지와 마이페이지의 내 가 쓴 글 목록의 삭제버튼의 함수를 공유하여 사용하다 보니 원치 않는 상품이 삭제되는 문제 발생.

해결 =>
해당 함수가 특정배열만 가리킴으로 인해 생기는 문제로 디테일 페이지를 먼저 구현하면서 범용성을 생각하지 못해 문제 발생. 기존에 상품값을 전부 담아 넘기던 방식에서 삭제함수에 해당 상품 id값만을 넘겨줘서 특정 상품을 지정하여 삭제하도록 수정.

문제점: 모달 바깥 부분을 클릭해도 창이 안 꺼짐

해결 =>
감싸주는 최상위 div와 모달창을 띄웠을 때 배경화면을 어둡게 하는 dimmer부분이 둘 다 width를 100%를 먹고 있어서 서로 겹쳐지는 문제로 인해 바깥쪽을 클릭해도 인식을 못함. relative로 잡아줬던 영역을 전부 flex로 재배치하고 z-index조절을 통해 해결.

문제점: 타입에러 103개 발생

해결=>
기능구현에 치우쳐 타입에러를 등한시하였더니 매우 큰 일 발생.
하나하나 찾아가며 바꿈. 밑에는 그중에서 고민이 많았던 애들.

문제점: 이미지 업로드 핸들러 함수의 타입에러

해결=>
이미지핸들러의 target.files가 타입에러를 뱉음. 인자값의 타입을 event: ChangeEvent<HTMLInputElement> 체인지 이벤트로 잡아주고
이를 업데이트하는 setState값이 FileList | undefined로 undefined를 가지고 있었기 때문에 if문으로 해당값이 없을 경우 retrun을 해줌으로써 타입값을 확실시시키고 잡아줌.

문제점: 글 작성 시 textarea onchage부분 타입에러

해결=>
const onChange = (event: ChangeEvent<HTMLInputElement>) 정도로만 잡아줬더니 여전히 textarea 부분에서 빨간 선을 뱉음.
<HTMLTextAreaElement> 이 부분이 추가로 필요하였음.
const onChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>>)로 수정하여 타입에러 잡아줌.
타입스크립트에 좀 더 익숙해질 필요성을 느낌.

문제점: 갑자기 firebase database에 연결이 안 됨

useGetProduct.ts?t=1709166328921:21 Uncaught (in promise) FirebaseError: Missing or insufficient permissions.

해결 =>
에러를 검색해 보니 Cloud Firebase 데이터베이스에 보안규칙에 위반되어 요청이 거부된 것이었다.
자세한 사항은 링크를 보고 각 조건에 맞게끔 규칙을 작성해 주면 된다.
https://firebase.google.com/docs/firestore/security/get-started?hl=ko

규칙에 들어가 allow read, write: if true로 바꾸는 것이 가장 간편하다.
다만 이 방법은 모든 사람이 권한 없이 데이터베이스를 읽고 쓸 수 있기 때문에 모든 환경에서 사용가능한 해결방법은 아니다.

 

문제점 : 기존의 입력폼을 shadcn/ui + react-hook-form + zod로 교체하는 과정에서 게시글 업로드 폼 이미지 업로드 스테이트가 업데이트가 안되는 상황 발생

생각해본 방법 
1. zod의 원시 밸류값에는 파일이 없다. 그렇기 때문에 custum 혹은 any로 파일을 받고 거기에 따른 refine을 달아준다.
-> 값이 안넘어가고 여전히 state값이 업데이트가 안됨

2. 파일 값을 받는 input만 전에 사용하던 그대로 사용한다.
-> 보내주는 폼양식이 달라졌기 때문에 값 최신화가 안되며 역시 소용이 없다.

3. 1번과 2번방법을 섞어서 시도해본다.
-> ....

4. 다시 1번으로 회귀해서 시도 중.

아직 시도 중이니까 고치면 다시 디테일하게 작성하러 와야겠다. 

몹시 허무하게 해결 => https://chasool.tistory.com/134