회원테이블이랑 커뮤니티 테이블이랑 조인해서 회원 닉네임 갖고 옴 커뮤니티 테이블에서 커뮤니티 데이터 + 유저 테이블에 유저 닉네임만 필요함커뮤니티 테이블에 이미 유저 아이디가 외래키로 되어있으니 커뮤니티 테이블에서 가져올 정보 + (유저 테이블에서 가져올 정보) 이러면 조인 완료 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처럼 다른 타입을 넣을 수 있다) // 제네릭 타입 확장은 값에만 영향을 주기 때문..
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 가수명(해당 가수가 부른 노래 리스트 출력), 커뮤니티 제목)플레이어 영역 전체 (드로그앤 드롭)순서를 정해 원하는 기능, 페이지를 선택했다새로운 기능을 경험해보고 싶어서 플레이어 영역을 선택했는데... 생각해 보니 이거 프로젝트의 핵심 기능이네?제대로 만들지 않으면 프로젝트 자체가 위험할 수 있겠구나 싶지만 이미 선택해 버린 걸 어째ㅠㅠ아무래도 플레이어 영역에 대해 정확히 어떤 기술스택을 사용해야 하는지 어떤 식으로 작업해야 하는지 모르다 보니 다른 하나는 비교적 간단한 커뮤니티 조회 페이지를 골랐다. 만들어진 데이터를 조회만 하면 되니까~근데 검..
기능 구체화 완료!문자로 소통하다 보니 기능별 이해도가 달라 간단하게 와이어 프레임을 작성하여 눈으로 보며 어디에 어떤 기능이 들어가는지 좀 더 구체적으로 정하게 됐다덕분에 계속 헷갈렸던 기능들도 모두 정리 완료! 소통에 오류가 좀 있었던 것 같지만 아직까진 완만하게 풀어가는 거 같다디자이너님이 제일 고생하시는 거 같아 맘이 안 좋기도 하고... 진행 속도가 너무 더딘 거 같아 걱정도 되지만 차근차근 하나씩 잘 풀어가면 좋은 결과가 나올 거라 생각하며, 내일 할 일에 집중하기로하자 내일 할 일API 명세 작성역할 분담프로젝트 셋업React-Quill사용자가 블로그처럼 글씨 크기를 조절하거나 이미지 업데이트 등 원하는 양식대로 자유롭게 게시글을 작성할 수 있는 에디터 라이브러리 설치명령어npm yarn n..
[최종프로젝트] 기획중_단언 연산자 !_타입좁히기_옵셔널파라미터 ?
데이터베이스 작성 완료테이블이 11개... 개발 시작할 생각 하니까 벌써 무서워...그래도 그만큼 결과물이 궁금하기도 하고 재밌어 보이는 기능들도 많아서 기대도 많이 된다아직 구체적인 기능이 제대로 자리 잡지 않아서 회의가 더 필요하지만 빨리 시작하기보다 꼼꼼하게 기획을 하는 게 더 중요하니까! 내일은 좀 더 구체적으로 기능을 잡고, 역할 분배할 것! Optional Parameters (옵셔널 파라미터)타입스크립트는 매개변수 뒤에 물음표 ? 를 붙여 값을 선택적으로 사용할 수 있다(옵셔널 파라미터)? 는 String | undefined으로 값이 있을 경우 타입을 지정해 주거나 값을 전달하고, 값이 없을 경우 undefined 나온다 export interface ProductType { produ..
[최종프로젝트] 시작
드디어 최종 프로젝트!! 능력 있고 개성 넘치는 팀원들을 만나서 좋은 프로젝트가 나올 거 같다시작 단계인 첫날인 만큼 가장 어려운 주제선정부터 막힘 없이 나와서 여러 선택지 중 각자 자기가 하고 싶은 주제에 대해 투표를 진행했다 투표 결과는 예지님의 아이디어인 키노라이츠를 모티브로 한 음악 서비스!하고 싶은 기능들은 엄청 많지만튜터님께 피드백을 받고 우리가 핵심이라 생각했던 메타버스, 챗봇 서비스 등을 빼게 됐다이거 하면 취뽀는 무조건이다!라고 생각했는데 프론트엔드 개발자라는 정체성을 잃지말라셨으니... 프론트엔드에 맞는, 그 안에서 최대한 많은 걸 보여줄 수 있는 결과물을 만들어내고자 과감하게 버리고 남은 기능들을 더 보강하기로했다. 길면서도 짧은? 5주간 다들 화이팅!
많이 어려워했던 react-Query를 결국 해냈다!물론 다른 팀원의 코드를 참고했지만 query에 대해 많이 배울 수 있었다.파일을 나눠 서버 데이터를 요청하는 api파일, 서버 데이터를 받아 가공하는 util파일로 나누어 작업했다 API 파일비동기 함수를 통해 서버로부터 데이터를 요청한다arg는 데이터 정렬을 위한 state와, useSearchParams로 받는 category를 받는다파이어베이스에서 받은 데이터를 return 해주면 완성!export async function getMainProducts() { const response = await getDocs(query(collection(db, 'product'), orderBy('createdAt', 'desc'))); const f..
어제 파이어베이스에서 받아온 데이터를 useEffect에 담아 파싱 해서 state에 담아줬다useQuery를 사용하면 useEffect과 state를 사용할 필요 없이 바로 가공해서 data를 사용하면 됐는데 잘못된 코드를 쓰고 있었던 것 useQuery로 데이터 통신하는 것에 대해 이해도가 많이 떨어지는 거 같다 하나씩 다시 코드를 살펴보자지난 글에서 사용한 React Query 사용 오류에 대한 수정 코드{isLoading, isError, data, refetch } - useQuery에 내장되어 있는 기능들 로딩, 에러 상태 관리 변수, 요청 데이터 저장 변수, 쿼리를 수동으로 불러오는 함수를 사용했다queryKey - data 변경 시 queryKey를 이용하면 된다(등록, 수정, 삭제 등)q..