JSON을 사용한 이유외부 컴포넌트에 있는 데이터를 드래그로 데이터를 전달하기 위해 dataTransfer.setData를 사용함dataTransfer API객체를 사용하려면 문자열로 변환해야 하기 때문쥬스탄드 등으로 전역 상태를 만들어 관리하는 방법도 있으나 dataTransfer를 사용하는 게 훨씬 간결하기 때문(보일러플레이트)dataTransfer란?HTML5의 드래그 앤 드롭 API에 속하는 객체드래그 앤 드롭 작업 동안 드래그된 데이터를 저장하고 전달하는 데 사용된다dataTransfer 객체의 메서드와 속성1. setData(format, data): 드래그된 데이터 설정 첫 번째 매개변수는 데이터 형식 지정, 두 번째 매개변수에는 설정할 데이터 전달2. getData(format): 드롭 이..
문제 현재 재생 중인 노래를 삭제할 경우 다음 index의 노래가 재생되어야 한다현재 재생 중인 노래만 삭제할 경우 정상작동하나, 재생 중인 노래 + 다른 노래를 지우면 삭제한 노래가 재생되는 문제가 생겼다 해결 과정 체크박스로 선택 후 삭제 버튼을 누르면 필터로 현재 플리에 체크박스에 있는 데이터를 뺀 나머지를 수파베이스에 update 하는 방법으로 삭제를 만들었다체크리스트가 재생 중인 노래 아이디랑 값이 같으면 변수에 담아주고 변수에 값이 있으면 현재 재생 중인 state 상태를 변경시켜주려 했는데삭제 후 서버에 업데이트가 제대로 되지 않은 상태에서 다음 재생할 인덱스를 추적하려 해서 생긴 문제인 거 같다삭제되고 남은 반환값에서 재생할 인덱스를 추적해야 하니까 서버에 업데이트 완료 후 작업해야지!!!..
테일윈드 css는 공백을 허용하지 않는다임의값을 넣으려면 -[값단위]여러 값을 넣으려면 언더바로 구분해줘야 한다(_) className='h-[300px] w-[300px] rounded-full shadow-[0px_2px_10px_5px_rgba(255,255,255,0.534)]' // shadow-[0px_2px_10px_5px_rgba(210,137,176,0.5)]플레이어 삭제 체크박스삭제된 상태에 css를 넣으려면 checked를 활용할 것 const checkedStyle = 'checked:bg-[#685BFF] checked:border-[1.5px] checked:border-[#685BFF] checked:bg-check' const checkedShadow = 'ch..
문제플레이 리스트 index변경 시 상태유지가 되지 않는다3번 노래 재생 중에 음악을 추가할 경우, 제목순 정렬이라 재생 중인 노래의 인덱스가 5번으로 변경되면 3번 자리에 있는 노래가 재생된다 삭제할 경우 삭제된 노래가 계속 재생된다해결과정뮤직플레이어 컴포넌트에 현재 재생상태를 확인할 수 있는 state를 만들어 플레이어 컴포넌트에 props로 내려줬다플레이어 컴포넌트는 현재 재생상태를 확인하는 state를 받아 useEffect내부에서 현재 플레이 리스트가 있으면 첫 번째 음악을 현재 재생 중인 음악을 저장하는 state에 담아준다만약 현재 플리가 없거나 재생 중인 플리를 지우면 state를 비워줘야 하는데 조건문 설정을 잘못하는 바람에 한참 헤맸다조건을 현재 플리가 있고, 플리목록이 있고, 인덱스..
프론트엔드 개발자가 되려는 이유웹, 앱 서비스의 핵심인 정보 전달을 렌더링 속도 최적화 등을 고려하여 사용자가 보다 더 빠르게 접할 수 있도록 사용자 측면의 서비스를 만들고 싶기 때문입니다저는 반려인으로 로열캐닌이라는 사료 회사의 사이트를 접한 적이 있습니다견종과 몸무게에 맞춰 적합한 사료를 추천하고 있었지만, 렌더속도가 많이 늦다 보니 사용에 불편함을 느끼게 되었습니다이것을 계기로 좋은 서비스란 제공되는 정보의 품질뿐 아니라 사용자와의 상호작용 속도에 중요성을 알게 되었습니다. 이러한 경험을 토대로 사용자 친화적인 서비스를 제공하고자 프론트엔드 개발자를 꿈꾸게 되었습니다 부트캠프에서 공부하며 매일 무엇을 배웠는지 기록하는 습관이 생겼습니다. 프로젝트마다 무엇을 배웠고, 어떤 시행착오를 겪었는지 기록한..
문제마플리 테이블에 뮤직아이디배열이 있음 마플리로 추가한 뮤직 아이디가 들어가야 한다체크박스로 복수선택해서 등록 가능마플리에는 1번 아이디가 있음내가 1번 3번을 선택해서 등록하면 3번만 들어가야 함그래서 데이터베이스에 있는 배열과 내가 선택한 배열의 값을 비교해서 중복값을 제외한 나머지를 반환함그리고 디비에 있는 아이디 배열과 위에서 추출한 중복되지 않는 값을 풀어서 하나의 배열로 만들면 끝임 근데 여기서 문제 includes가 배열에 특정 요소가 포함되어 있는지를 확인시켜 주는 역할을 하는데 중복값이 같이 나와버린다해결과정 1. Set을 이용해 중복 없이 마플리 저장set은 객체 함수이기도 하고, 마플리에는 중복값이 없기 때문에 has를 위해 사용하는 건 가독성이 떨어질 수 있다는 단점이 있다cons..
문제 (뮤직플레이어 컴포넌트)회원 아이디가 최초 로딩 시 빈값으로 나오기 때문에 쿼리가 빈값인 상태로 아이디를 받아서 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"]; 음악 검색 시 수파베이스에서 받아온 음악 정보..