seopport.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 컬럼을 추가해서 유저가 삭제됐을 때는 댓..

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

COOKHUB👩‍🍳 이번에도 일주일의 기간동안 팀프로젝트를 하게 되었다. 처음에는 스포츠 관련 사이트로 축구, 야구팀의 소식이나 스케줄을 API나 크롤링을 이용해서 만들려고했는데 API가 석연치 않아서 주제를 레시피 공유 사이트로 바꿨다. 레시피 공유 사이트는 꼭 해보고 싶었던 프로젝트 주제였는데 이번 기회를 통해 구현해볼 수 있어서 좋았다. 나는 카테고리별 페이지와 스크랩 기능을 맡았다. 카테고리별 페이지는 크게 어려웠던 점이 없었지만 중첩 필터링이 까다로웠던 것 같다. 스크랩 기능도 json-server나 NoSQL인 파이어베이스를 쓸 때는 생각할게 많고 데이터 구조를 이해하는게 어려워서 코드를 짜는 것도 어려웠던 것 같은데 RDB인 Supabase를 쓰니 생각보다 쉽게 구현할 수 있었다. 정말 파이..

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