til45 [react/nextjs] 데이터가 있는지 판단 후 insert 또는 update 음악 추천 리스트에서 + 추가 버튼을 누르면 현재 유저의 재생 목록 테이블에 데이터가 추가되어야 하는데 고려해야 할 부분이 있다. 데이터가 있는지 판단하는 이유는 재생 목록에 추가하는 노래 id를 배열에 담기 때문에 한 번이라도 노래를 추가하여 재생한 적이 없다면 재생목록 테이블에 유저의 현재 재생 목록은 없다. (재생 목록 데이터가 있어야 그 데이터의 노래 컬럼에 배열로 재생할 노래를 담을 수 있다) 그렇기 때문에 먼저 이 유저가 현재 재생 목록을 가졌는지 판단 후 insert 또는 update를 해야 한다. 사실 회원가입 할 때 유저의 현재 재생 목록을 가지도록 재생 목록 테이블에 빈 값으로 insert를 하는 건 어떨지 고민도 했다. 만약 이 방법으로 한다면 추가할 때마다 재생 목록이 있는지 판단하.. 2024. 4. 5. 리액트로 슬라이드 만들기 2 + typescript 슬라이드의 늪에 빠진 나... 하하 즐겁다. 더 제대로 만들었다면 더 즐거웠을 텐데...? 어쨌든 리액트로 슬라이드 만들기 시작~ 생각한 로직 슬라이더 안의 요소의 사이즈에 기반하여 이동한다. 다음/이전 버튼을 누르면 슬라이드 요소를 감싸는 박스를 이동시킨다. 위치가 0이면 이전 버튼 미노출 슬라이드 요소를 감싸는 박스의 사이즈가 위치 값이랑 같으면 미노출(하지만 이 부분은 개선이 필요..) 작업 설명 현재 슬라이드의 위치를 담을 state를 만든다. const [position, setPosition] = useState(0); 슬라이드로 이동할 값을 정한다. 354 부분은 슬라이드 요소 1개의 가로 사이즈이고, 16은 오른쪽 마진의 값이다. 값을 합해서 370이라고 해도 되지만 각 값의 구분을 위해 .. 2024. 4. 4. 리액트로 슬라이드 만들기 + typescript 이번 팀플에서 맡은 페이지에 슬라이드 파티가 시작됐다. 전부 라이브러리 없이 구현하려니 신나네?(정말... 신나..)어쨌든.. 그렇게 시작된 리액트로 슬라이드 만들기시작합니도~ 슬라이드 만들기지만 정말 별 기능이 없는 간단한 슬라이드이다. 근데 이건 뭔가 슬라이드 느낌이 나지 않아서 곧 옆으로 넘어가는 슬라이드로 다시 작업할 예정이지만, 첫 슬라이드 작업이라서 기록에 남겨본다. fade 되는 슬라이드를 구현하려 했지만, 지금은 display block/none으로 동작하는 슬라이드이다.곧.. fade도 도전! 생각한 로직useState를 만들어서 현재 슬라이드의 index 관리다음 버튼을 누르면 state + 1, 이전 버튼을 누르면 state - 1을 해서 배너의 index와 state 값이 같으면 배.. 2024. 4. 3. nextjs 외부 이미지를 사용할 때 / Invalid src prop (이미지주소~) on `next/image`, hostname "호스트명~" is not configured under images in your `next.config.js` 문제 상황 유저의 썸네일이 supabase stoage에 저장되어 있는데, 불러오려니 에러가 발생했다. Error: Invalid src prop (https://lukvbpxaabobwpzkacow.supabase.co/storage/v1/object/public/userThumbnail/screen.png?t=2024-04-02T10%3A26%3A52.780Z) on `next/image`, hostname "lukvbpxaabobwpzkacow.supabase.co" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-hos.. 2024. 4. 3. 최종 프로젝트 Day6 아아 4/2일 일지인데, 시간이 지나가버렸다....ㅜ 오늘부터는 본격 개발에 들어갔다. 이번 팀플에서는 깃의 이슈, 프로젝트, 마일스톤을 적극 활용하기로 해서 열심히 배우면서 사용 중이다. 이슈는 그래도 프로젝트와 마일스톤에 비해서는 많이 써봤는데, 프로젝트와 마일스톤은 많이 사용해보지 않아서 개발만큼 걱정되는 부분이었다. ㅋㅋㅋ (몇 시간 해봤다고 좀 익숙해진 것 같기도?) 지금은 나름 팀원분들께 물어도 보고 검색도 하면서 사용하고 있다. 우리 팀은 크게 맡은 페이지? 또는 컴포넌트 별로 프로젝트를 만들어서 관리하고 있다. 하나의 프로젝트를 파서 모두가 사용할 수도 있지만, 이렇게 관리하면 더 개발하는 영역에 대해서 쉽게 볼 수 있어서 관리가 좋다고 한다. 일단은 한 개의 기능에 집중하고 있어서 이슈는.. 2024. 4. 3. [typescript] 교차 타입 Intersection Type 교차 타입 교차 타입(Intersction Type)은 & 기호를 사용하여 여러 타입을 조합하여 하나의 타입으로 만들 수 있다. 객체의 경우 조합한 모든 타입을 가져야하고 하나라도 없을 경우 에러가 발생한다. type Color = { code : string; } type Animal = { name: string; } type Cow = Color & Animal; const brownCor : Cow = { name:'ddd', code:'#693f00' } Color 의 code 타입과 Animal의 name 타입을 조합하여 Cow 타입을 만들었다. 객체가 아닌 경우 객체가 아닌 경우에도 사용할 수 있는데, 공통된 타입으로 판단한다. type T1 = string | number; type T2 .. 2024. 4. 1. react/typescript input checkbox 전체 선택 구현 그동안 프로젝트 진행하면서 구현한 적이 없어서 이번에 연습 삼아 구현하게 되었다. 기능 1. 전체 선택 클릭 시 다른 체크박스 전체 선택/해제 2. 전체 선택 상태에서 다른 체크박스 해제 시 전체 선택 부분도 선택 해제 3. 체크박스 재사용 가능하도록 컴포넌트로 분리 Checkbox 컴포넌트 / Checkbox.tsx 재사용 가능하도록 props를 내려줬다. import React from "react"; const Checkbox = ({ title, name, checked, onChange }: { title: string; name: string; checked: boolean; onChange: React.ChangeEventHandler }) => { return ( {title} ); }; .. 2024. 3. 29. 최종 팀 프로젝트 Day4 오늘은 기능 분배를 하는 아주 중요한 날이였다. 사다리타기를 해서 순서대로 하고싶은 기능을 선점하도록 했다. 나는 마이페이지, 유저 상세 페이지, 메인페이지를 담당하게 됐다. 사실 다 재밌어보여서 어떤걸 할지 정말 고민스러웠다. 일단은 마이페이지에 다양한 컨텐츠가 많아서 여기서 최대한 기술적인 부분을 담아서 개발을 하면 될 것 같다. 얼마전 소통의 부재를 겪고 지금은 매끄럽게 진행되고 있다. 디자이너분도 아주 적극적으로 기획에 참여해주시기도 하고, 이제 개발만 잘 하면 될 것 같다. 떨리는 기능 분배 이후에는 api 설계, db 설계 수정을 했다. 최종적으로 db는 11개 정도가 되었다. 주말에는 팀원들이랑 프로젝트 셋팅하고 다음주부터는 개발을 시작하면 될 것 같다. 진짜 시작인 느낌. 화이팅. 2024. 3. 29. 이전 1 2 3 4 ··· 6 다음
