문제회원이 담은 플레이 리스트의 테이블 형식은 뮤직 아이디를 담은 배열로 되어있고, 음악정보 테이블과 조인으로 음악 데이터를 가져와 현재 플레이리스트를 만들고 있다.그래서 서버에 등록되어 있는 순서로 자동 정렬 되기 때문에 드래그로 인덱스 순서를 변경하더라도 새로고침 시 다시 서버 데이터를 가져오기 때문에 정렬이 유지되지 않는다는 문제가 있다.해결방법뮤직 아이디를 담은 배열 형태를 객체로 바꾸는 게 가장 좋은 방법이지만 전체 코드를 수정해야 하기 때문에 서버 데이터의 순서는 그대로 유지하되, 브라우저에서만 인덱스를 변경시키고 유지하도록 zustand와 Local Storage로 해결useEffect을 이용해 서버에서 받은 플레이 리스트와 Local Storage에 저장된 플레이리스트의 값이 변경될 때마..
인덱스 드래그 앤 드롭은 되는데 DB가 배열 형태라 변경된 순서를 저장할 수 없으니 임시로 쥬스탄드를 이용해 세션에 순서 변경된 플리를 저장하려고 한다개발자도구를 보면 세션에는 저장되나, 새로고침시 원래 순서로 바뀐다 대체 왜? const currentMusic = useCurrentMusicStore((state) => state.currentMusic) const [isDrag, setIsDrag] = useState(false) const [draggedItem, setDraggedItem] = useState(null) const [dragIndex, setDragIndex] = useState(-1) const [customList, setCustomList] = useState([]..
플리 순서 변경 드래그 앤 드롭 너무 어렵다!!!대체 난 왜 때문에 DB설계를 배열로 했을까... 이제 와서 뒤엎자니 나뿐 아니라 팀원들 코드까지 전부 수정해야 하니 다른 방법을 찾아봐야겠다아래는 드래그 앤 드롭을 라이브러리 없이 하려 했는데 굳이?라는 얘기를 듣고 추천받은 라이브러리 나중에 참고해 봐야겠다DnD Kit 드래그 앤 드롭 라이브러리 공식문서https://docs.dndkit.com/api-documentation/draggable Draggable | @dnd-kit – DocumentationFor performance reasons, we strongly recommend you use the transform CSS property to move your draggable item o..
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개니까 함수명, 아이디 아이디 인덱스번호 넣어주면 ..