🔥 이슈api 노래목록별로 추가버튼 생성 후 클릭시 supabase에 데이터가 올라가야하는데 에러supabase - playlist 테이블구성id / user_id(로그인유저 아이디) / is_main(메인노래) / created(시점) / track_name(노래이

1. 카테고리별 필터링된 리스트 목록화 🔎 문제점 필터링된 리스트를 목록화하는건 카테고리/지역/메인배너/추천리스트 등에 모두 같은 동작으로 중복코드가 다수 발생한다. ✅ 해결 전역함수로 인자만 전달하는 방식으로 전환했을때 중복코드를 개선할 수 있었다.

기존_앨범추가 코드 낙관적업데이트로 변경 기존_앨범삭제 코드 낙관적업데이트로 변경

갤러리에서 처음 사용자가 이미지를 올릴 때 용량제한을 두지않아 이미지가 용량이 크고 양이 많아질수록 페이지 로드되는 속도가 현저히 낮아지는 현상발생압축 또는 이미지 최적화 안함반복적인 상태 업데이트 setImgSrc((prev) => \[...prev, e.target

스탬프를 추가하는 작업 후 바로 스탬프목록으로 이동했을 때 추가한 스탬프까지 바로 반영된 화면이 보여야하는데 반영안된상태로 새로고침이 되야 반영이되는 문제가 있다. 이 전 코드는 단순 링크이동을 위해 Link를 사용하여 이동되도록 했다.수정된 코드는 Link -> bu

기능을 완성시키고 테스트하는중애 화면에 그려지는 속도가 너무 느려서 작동안되나..?싶을정도로 반영이 느린점을 개선해보려한다.CSR의 경우,서버로부터 빈 HTML과 JavaScript 파일을 넘겨 받은 다음에 Query가 실행된다.Markup > JS > QuerySSR

추천관광지에서 로그인한 유저의 북마크가 있으면 체크된상태로 되야하는데 북마크체크가 되어있지않은 상태로 보여진다. 우선 값이 제대로 들어오는지 체크투어리스트 데이터 잘가져와짐 유저아이디 훅안에서 아이디값 잘 가져와짐유저아이디값 처음엔 null이었다가 가져와짐..!Load

사용자의 위치권환상태에 따라 서비스를 제공하는데, 위치권한을 허용하지않았을경우 상태와 메세지를 추가하였다. BF 이 코드는 요청은 원활하지만 단순히 요청허용에 한정으로만 실행된다. 요청거부시 계속로딩되어 사용자에게 불편함을 줄 수 있다. AF 사용자가 거부했을시 거부했기때문에 서비스를 이용할 수 없다는 메세지를 전달하여 허용해야하는 이유를 설명해주었다....

//인풋과 라벨 연결값이 텍스트로 넣어놓음 -> 고정값으로 지칭하는 지역이름이 같아 계속 처음 지역에만 이미지가 넣어짐 //인풋과 라벨 연결값은 유니크한값으로 지역이름의 변수로 변경 -> 각 지역별로 이미지는 들어가지만 전체보기에서 파일자체가 열리지않음 //->

(BF) 2024. 7. 11. (AF) 2024년 7월 11일

리스트가 길 경우를 대비해 드롭다운 기능을 넣고 커스텀훅으로 만들어서 재사용가능하도록 했다.스르륵 애니메이션도 추가하겠다.

기존 컴포넌트에서 state로 이벤트를 다 만들었는데 링크로 이동하는 디테일페이지에서도 이 동작이 필요해서 재사용성에 용이한 커스텀훅으로 쪼개보기로했다! 이미지 팝업열기 이벤트 기존 커스텀 훅 적용

이 전 글에서 단일 이미지를 업로드하는건 가능했다.이제 다중이미지를 업로드하도록 수정해야한다.선택한 이미지 수만큼 데이터가 n개씩 추가되야한다.multiple 다중 이미지 선택files변수에 클릭한 대상의 파일을 저장한다. 불러온값이 n개로 Array.from()로 배

오류메세지)eact 컴포넌트가 렌더링 중에 다른 컴포넌트의 상태를 업데이트하려고 할 때 발생합니다. 이는 일반적으로 잘못된 상태 업데이트로 인해 발생합니다. 이 문제를 해결하려면 상태 업데이트가 렌더링 중에 발생TypeError: Cannot read propertie

앨범 전체 테이블패치 앨범목록 useQuery로 data담기 탭기능 구현 (전체보기 | 지역별) AddPhotoBtn.tsx > 트러블슈팅 React 컴포넌트가 렌더링 중에 다른 컴포넌트의 상태를 업데이트하려고 할 때 발생합니다. 이는 일반적으로 잘못된 상태 업

주로 나타나는 타입에러들을 정리해보니 대부분 기대한타입이 아닌 undefined일 경우의 에러다. 예외처리를 꼭 한 번 더 체크하자.tsconfig.json'StampList'은(는) JSX 구성 요소로 사용할 수 없습니다. 해당 '() => void | React.

useParams 로 가져온 값 기준으로 데아터를 더 좁혀서 추출해야한다.하지만 계속 빈값으로 추출된다. 원인은?: 난 당연히 useParams 로 가져왔을때 /서울 이라면 서울로 가져올 줄 알고 비교하는 코드를 짰는데 자꾸 빈값을 추출하길래 console을 찍어보니

날짜를 가지고있는 객체를 담은 배열에서 가장 오래된 날짜를 추출해야한다.stampDataTypeError: list.created_at.reduce is not a functionlist.created_at.reduce 이게 없다고 나옴 이유는 스트링이라 비교불가red

userId는 잘 전해졌는데 계속 null 또는 undefind로 뜨는 문제수정01\_queryFn: () => fetchStampActive(userId!) \-> null이 아님을 보장하는 ! 사용수정02enabled: !!userId \-> enabled: use

로그인 유저정보를 가져오는 방법으로 한 파일에 모두 불러오거나 파일분리로 하는법 두 가지를 모두 써보았는데 보기에는 파일분리가 더 깔끔해보인다. 텐스텍쿼리로 값을 연결지어서 쓰는법까지 같이 익혔다.상황에 따라 맞는 방법을 쓰겠지만 난 이번에 2번째방법을 쓸거같다.use