문제 (뮤직플레이어 컴포넌트)회원 아이디가 최초 로딩 시 빈값으로 나오기 때문에 쿼리가 빈값인 상태로 아이디를 받아서 api를 작동시키기기 때문에 데이터를 못불러왔다쿼리에 아이디값이 있는 경우 api를 작동시키는 방식 2가지를 배움 1. enabled에 회원 아이디가 빈값이 아닌 경우 api를 작동해라, 조건부로 쿼리를 작동시키는 방법 2. 쿼리키에 아이디를 넣어주면 쿼리함수가 이 아이디를 인자로 받아서 api에 넘겨준다쿼리함수에 인자는 왜 객체형식이냐. 객체 없애고 arg만 넣어서 쿼리에 아이디 진입확인 콘솔에 찍어보면 알 수 있다.객체형태에 쿼리키가 배열로 들어있기 때문임쿼리키로 받은 매개변수로 받을 때 구조분해할당으로 쿼리키 뽑은 다음, 쿼리키가 2개니까 함수명, 아이디 아이디 인덱스번호 넣어주면 ..
문제현재 플레이 리스트에 외래키로 있는 유저 아이디를 기준으로 플레이 리스트 아이디 배열에 뮤직 아이디가 들어있다플레이 리스트 아이디 배열에 있는 뮤직 데이터만 가져와야 함 첫 번째 시도수파베이스에 뮤직 아이디 배열을 외래키로 지정하려 했으나 타입이 맞지 않아 실패 두 번째 시도플레이 리스트와 뮤직 데이터를 따로 불러와서 배열을 합친 다음에 유저 아이디 값이 맞는 것만 추출하려 했음근데 생각해 보니 플레이 리스트 데이터를 가져올 때 로그인한 유저 아이디값 기준으로 가져오고플레이 리스트에 뮤직아이디 배열을 맵을 이용 해서 추출추출한 뮤직아이디를 기준으로 뮤직 데이터 가져와서 스테이트에 담으면 끝"use client";import { useStore } from "@/shared/store";import ..
스토어에 데이터 저장(디스패치와 같음) const { form: keywordInput, onChange } = useInput({ keyword: "", selectedTabs: "musicInfo", }); const { keyword, selectedTabs } = keywordInput; const searched = useSearchedStore((state) => state.searched); // 스토어에서 set 함수 가져오기 (유즈셀렉토와 같음) const router = useRouter(); const keywordRef = useRef(null); const onSubmitHandler = async (e: FormEvent) => { e.preventDe..
export const getMusicInfoData = async (keyword: string) => { const { data } = await supabase .from("musicInfo") .select("musicId, musicTitle, artist, thumbnail, release, musicSource") .or(`musicTitle.ilike.%${keyword}%,artist.ilike.%${keyword}%`) .order("musicTitle", { ascending: false }); return { data };};export type MusicInfoDataType = Awaited>["data"]; 음악 검색 시 수파베이스에서 받아온 음악 정보..
회원테이블이랑 커뮤니티 테이블이랑 조인해서 회원 닉네임 갖고 옴 커뮤니티 테이블에서 커뮤니티 데이터 + 유저 테이블에 유저 닉네임만 필요함커뮤니티 테이블에 이미 유저 아이디가 외래키로 되어있으니 커뮤니티 테이블에서 가져올 정보 + (유저 테이블에서 가져올 정보) 이러면 조인 완료 const { data, error } = await supabase .from("community") .select( "boardId, boardTitle, likeList, date, userId, userInfo(nickname, userImage)" ) 조인으로 가져온 회원 닉네임 사용 방법 {communityList.map((item) => { ..
hookuseInput.ts제네릭 타입으로 확장키에는 영향을 안 주고 값에만 확장이 가능함애초에 인터페이스 값이 언노운이면 의미 없음import { ChangeEvent, useCallback, useState } from "react";interface initialFormType { [key: string]: unknown;}// 하지만 이미 값이 unknown(모든 타입 허용)인 경우, 아래처럼 제네릭타입으로 확장해주지않아도된다.const useInput = (initialForm: T) => { // = initialFormType 타입을 제네릭 타입으로 확장한다 // (타입이 확정된게 아닌, unknown처럼 다른 타입을 넣을 수 있다) // 제네릭 타입 확장은 값에만 영향을 주기 때문..
기본적으로 app 폴더 하위의 모든 컴포넌트는 서버컴포넌트이다서버 컴포넌트 서버 환경(Node.js 등)에서 실행되는 컴포넌트.클라이언트(브라우저)의 요청을 서버에서 처리하고, 주로 HTML 등의 정적 리소스를 생성한다클라우드 컴포넌트 클라이언트(브라우저)에서 실행되는 컴포넌트자바스크립트와 같은 동적 리소스를 처리하며, 주로 사용자 인터랙션에 응답하고 UI를 업데이트한다 서버 컴포넌트 예시코드console.log는 node 환경에서 작동한다 // src>app>page.tsxexport default function Home() { console.log("여기는 어디일까요?"); return ( 안녕하세요! 내배캠 리액트.. 아니아니 넥스트입니다! );} 클라이언트 컴포..
Passing Props (Props, setTodos 함수의 타입 명시, setTodos 함수의 콜백함수 1,2 함수를 props로 전달)Children Props (React.FC, PropsWithChildren, Children을 타입으로)Generic, Utility Type 통해서 Props용 Type 만들기 (PropsWithChildren, Omit, Pick)Event Handler 사용하기Passing Props Props부모 컴포넌트에서 자식 컴포넌트에게 Props를 전달할 때 자식 컴포넌트에서 부모에게 받은 Props의 타입을 객체 타입 지정한 것과 동일하게 지정해 주면 된다Props가 많아질 경우, 타입 부분도 길어지므로 간결하게 표시하기 위해 type 또는 interface를 사..
역할 분담 완료 담당 기능, 페이지커뮤니티 조회 페이지 (게시글 정렬 최신순, 좋아요 순)검색기능, 검색 결과 조회 페이지 (select box로 노래 or 가수명(해당 가수가 부른 노래 리스트 출력), 커뮤니티 제목)플레이어 영역 전체 (드로그앤 드롭)순서를 정해 원하는 기능, 페이지를 선택했다새로운 기능을 경험해보고 싶어서 플레이어 영역을 선택했는데... 생각해 보니 이거 프로젝트의 핵심 기능이네?제대로 만들지 않으면 프로젝트 자체가 위험할 수 있겠구나 싶지만 이미 선택해 버린 걸 어째ㅠㅠ아무래도 플레이어 영역에 대해 정확히 어떤 기술스택을 사용해야 하는지 어떤 식으로 작업해야 하는지 모르다 보니 다른 하나는 비교적 간단한 커뮤니티 조회 페이지를 골랐다. 만들어진 데이터를 조회만 하면 되니까~근데 검..