스토어에 데이터 저장(디스패치와 같음) 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처럼 다른 타입을 넣을 수 있다) // 제네릭 타입 확장은 값에만 영향을 주기 때문..
기능 구체화 완료!문자로 소통하다 보니 기능별 이해도가 달라 간단하게 와이어 프레임을 작성하여 눈으로 보며 어디에 어떤 기능이 들어가는지 좀 더 구체적으로 정하게 됐다덕분에 계속 헷갈렸던 기능들도 모두 정리 완료! 소통에 오류가 좀 있었던 것 같지만 아직까진 완만하게 풀어가는 거 같다디자이너님이 제일 고생하시는 거 같아 맘이 안 좋기도 하고... 진행 속도가 너무 더딘 거 같아 걱정도 되지만 차근차근 하나씩 잘 풀어가면 좋은 결과가 나올 거라 생각하며, 내일 할 일에 집중하기로하자 내일 할 일API 명세 작성역할 분담프로젝트 셋업React-Quill사용자가 블로그처럼 글씨 크기를 조절하거나 이미지 업데이트 등 원하는 양식대로 자유롭게 게시글을 작성할 수 있는 에디터 라이브러리 설치명령어npm yarn n..
[최종프로젝트] 기획중_단언 연산자 !_타입좁히기_옵셔널파라미터 ?
데이터베이스 작성 완료테이블이 11개... 개발 시작할 생각 하니까 벌써 무서워...그래도 그만큼 결과물이 궁금하기도 하고 재밌어 보이는 기능들도 많아서 기대도 많이 된다아직 구체적인 기능이 제대로 자리 잡지 않아서 회의가 더 필요하지만 빨리 시작하기보다 꼼꼼하게 기획을 하는 게 더 중요하니까! 내일은 좀 더 구체적으로 기능을 잡고, 역할 분배할 것! Optional Parameters (옵셔널 파라미터)타입스크립트는 매개변수 뒤에 물음표 ? 를 붙여 값을 선택적으로 사용할 수 있다(옵셔널 파라미터)? 는 String | undefined으로 값이 있을 경우 타입을 지정해 주거나 값을 전달하고, 값이 없을 경우 undefined 나온다 export interface ProductType { produ..
[최종프로젝트] 시작
드디어 최종 프로젝트!! 능력 있고 개성 넘치는 팀원들을 만나서 좋은 프로젝트가 나올 거 같다시작 단계인 첫날인 만큼 가장 어려운 주제선정부터 막힘 없이 나와서 여러 선택지 중 각자 자기가 하고 싶은 주제에 대해 투표를 진행했다 투표 결과는 예지님의 아이디어인 키노라이츠를 모티브로 한 음악 서비스!하고 싶은 기능들은 엄청 많지만튜터님께 피드백을 받고 우리가 핵심이라 생각했던 메타버스, 챗봇 서비스 등을 빼게 됐다이거 하면 취뽀는 무조건이다!라고 생각했는데 프론트엔드 개발자라는 정체성을 잃지말라셨으니... 프론트엔드에 맞는, 그 안에서 최대한 많은 걸 보여줄 수 있는 결과물을 만들어내고자 과감하게 버리고 남은 기능들을 더 보강하기로했다. 길면서도 짧은? 5주간 다들 화이팅!