seopport.log

구현 사항 사용자가 클래스를 예약하면 class 테이블에 있는 reserved_user_id 배열에 예약한 유저의 아이디를 추가해야함 배열에 값을 추가하기 위해서는 기존의 값을 불러와서 추가로 정보를 넣어서 업데이트 해야한다. 1. 클래스 테이블에서 현재 클래스 레코드의 reserved_user_id 값 조회하기 // class 테이블의 reserved_user_id 배열 조회 const { data: reservedUserList, error: fetchError } = await supabase .from('class') .select('reserved_user_id') .eq('class_id', classId) .single(); if (fetchError) { console.log('예약한 유저..

react-Daypicker에서는 비활성화할 날짜 배열을 넘겨주면 알아서 비활성화 시켜주는데, 문제는 DB에는 예약 가능한 날짜가 등록되어있기 때문에 이걸 반전(?)시켜야 했다. 알고리즘 지식이 부족해서 많이 헤맸다.. 만약 현재 달 말고 다른 달의 날짜도 검사 해서 disable시켜야 한다면....... 어떻게 해야할까...... // 1~31일 배열 생성 const dayList: number[] = Array.from({ length: 31 }, (_, index) => index + 1); // DB에 있는 날짜에서 일자만 따로 생성한 배열 [1, 3, 6].. const availableDays = classDateList.map((item) => new Date(item).getDate());..

예약 페이지에서의 예약 완료와 동시에 예약완료 페이지로 넘어가서 방금 예약한 정보를 띄워주어야 했다. 문제는 테이블에서 예약 정보의 아이디는 데이터베이스에서 자동으로 생성되는데, 방금 예약 정보의 아이디를 어떻게 알아낼 수 있는지에 대한 고민이 있었다. 해결 방법은 간단했다. 해결책은 Supabase가 insert 연산 후 생성된 row의 데이터를 응답으로 반환한다는 점을 활용하는 것이었다. API 호출 결과에서 예약 ID를 추출하여 URL에 포함시킨 후, 예약 완료 페이지에서는 이 ID를 사용해 DB에서 예약 정보를 가져와 출력하는 방식으로 문제를 해결했다. // result: supabase의 응답으로 받아온 제출한 예약 정보 const result = await submitReservation(re..

상태 관리 리팩토링: 효율적인 리듀서 구현 DB에 정보를 넣기 위해서는 각각의 컴포넌트에서 store로 값을 받아와야 했는데, 기존에는 setClassId, setDateAndTime, setPriceAndQuantity와 같이 각각의 컴포넌트에서 값을 따로 받아와야 했기 때문에 상태 업데이트를 위한 리듀서를 각각 만들었다. setClassId: (classId) => { set((state) => ({ reserveInfo: { ...state.reserveInfo, classId: classId } })); }, setDateAndTime: (date, time) => { set((state) => ({ reserveInfo: { ...state.reserveInfo, reserveDate: date..

문제 상황 웹 페이지를 클라이언트 컴포넌트로 구성하고, useSearchParams 훅을 사용해 쿼리스트링 값을 받아 서버 컴포넌트에 props로 내려주려 함. 서버 컴포넌트에서 이 props를 사용해 데이터를 fetch하려 했으나, 클라이언트 컴포넌트에 서버 컴포넌트를 임포트하면 서버 컴포넌트도 클라이언트 컴포넌트가 되버려서 서버 컴포넌트의 로직이 정상적으로 실행되지 않음. 페이지를 서버 컴포넌트로 설정하는 것이 맞다고 판단됨. 그럼 어떻게 서버 컴포넌트에서 쿼리스트링 값을 어떻게 가져오지? 해결 방법 useSearchParams 훅 등을 사용하지 않고, 페이지에서 쿼리스트링 값을 직접 함수의 props로 받는 방식으로 문제를 해결할 수 있었다. export default async function R..

기술적 의사결정 - DB 설계 만약에 지원이라는 유저가 댓글을 달았는데, 지원이라는 유저가 탈퇴했을때 그 댓글을 어떻게 할 것인가에 대해 의논이 필요했다. 원래 나왔던 의견은 1. 유저 정보 삭제시 댓글도 삭제하자. 2. 유저 정보 삭제시 댓글은 남겨두고 (알 수 없음) 이런식으로 표시하자 이건 정답은 없고 우리 팀이 설정을 하는 부분인것 같은데, 어떻게 하는게 UX적으로 맞을지 의견을 나누고 있었다. 튜터님이 조언을 주셨는데, 실무적인 상황에서는 회원이 만약 탈퇴를 했을 때 기록 보관을 3개월 정도하고, 그 기간 후에는 삭제가 되도록 한다고 한다. 그래서 회원정보가 삭제됐을 때 댓글 등 유저키가 참조되고 있는 행이 지워지진 않고, 유저 테이블에 isDeleted 컬럼을 추가해서 유저가 삭제됐을 때는 댓..

오늘은 최종프로젝트 시작일이다 처음부터 여러일이 있었지만 결과적으로 좋은 방향으로 나아가게 됐으니 다행이다 오늘은 주제 선정부터 와이어프레임까지 거의 다 그렸다. 앞으로 한달동안 화이팅하자!!

자꾸 react Query로 레시피 불러오는데 data return값이 false가 떠서 뭐지??????????????????????? 뭐가 문젠지 콘솔로그 백만번 찍어보고 타입수정해보고 별 난리 다쳤는데 안돼서 대체 뭐지?? 하고 있었는데 쿼리키를 생뚱맞은 쿼리키로 할당하고 있었다 ㅋㅋㅋㅋㅋㅋㅋㅋ 진짜...레전드

위 사진을 보면 화질이 뭔가 묘하게 안좋은 느낌이있다. img태그를 사용했을때는 원본 화질이 잘 나왔는데, 넥스트의 이미지태그로 수정하니 화질이 떨어졌다. 해결 방법은 Image태그에 quality 속성을 지정하는것 기본값이 75이고, 100으로 지정해주면 원본과 같은 화질로 출력된다. 위 사진보다 확실히 화질이 좋아진 것을 확인할 수 있다.

'Promise' 형식은 '(searchTerm: string) => void' 형식에 할당할 수 없습니다. 'Promise' 형식에서 '(searchTerm: string): void' 시그니처에 대한 일치하는 항목을 제공하지 않습니다.ts(2322) SearchBox 컴포넌트를 import하여 사용하려고 했는데 타입에러가 떴다. SearchBox에 들어가는 프롭스 타입은 return void 타입으로 아무것도 반환하지 않아야 한다. interface SearchBoxProps { onSearch: (searchTerm: string) => void; } 내가 searchBox에 넣으려는 함수인 filterDatta는 을 return하고 있다. export con..