파피루스

워낙에 쓰기 간편하게!에 중점을 뒀던건지, 역시 커스텀하려고 하니 직접 짜는 쿼리만큼의 자유도는 없다. table join 필수 조건: 조인하려는 테이블 간에 FK가 걸려있을 것 Query (in Next/React/ts)구문const { data } = await supabase    .from("테이블이름")    .select("컬럼명나열 or 와일드카드, 조인하려는테이블명(조인테이블의컬럼))  사용 예시const { data } = await supabase    .from("posts")    .select(`*, comments (content)`)const { data } = await supabase    .from("posts")    .select("*, users: author_id(..

client components  const searchParams = useSearchParams();  const search = searchParams.get("search");https://nextjs.org/docs/app/api-reference/functions/use-search-params  server componentsexport default function Page({  params,  searchParams,}: {   params: { slug: string }   searchParams: { [key: string]: string | string[] | undefined } }) {   return My Page }

문제 상황 캡쳐   해결useRouter는 next/router가 아닌 next/navigation모듈을 사용해야한다. 문제 해결 전"use client";import { useRouter } from "next/router"; 문제 해결 후"use client";import { useRouter } from "next/navigation";

팀플 주제 : 밴드음악 관련 커뮤니티 (ㅇㅇ 사이트는 밴드 음악을 좋아하는 사람들끼리 모여 서로 음악을 추천해주고, 페스티벌에 관한 정보를 등록하고 공유하는 사이트입니다.)로그인 / 회원가입 - 이선호 아티스트 등록메인 페이지 제작 - 재음악 추천 게시판 (api x)(무한 스크롤) - 현공지글조회수좋아요 (선택 사항)게시글 상세 페이지 댓글기능 crud - 지마이페이지 (프로필 변경 기능 / 내 게시물 보기) - 병공연 정보 공유 페이지 (crud)(무한 스크롤) - 솔공연 정보를 누구나 등록하고 잘못된 정보 버튼 클릭 n번 이상 시 숨김처리 ----- 게시글 CRUD 기능인 줄알았는데, 게시판도 포함이네게시글 CURD사진 : 1장만 등록가능해시태그 기능input 에서 엔터치면 해시태그 하나 등록되어서..

서론next든, vite든 뭐든 쓰다보면 로컬 개발환경에서는 localhost:port 로 주소를 고정시킨 채 개발하게 된다.일단 동작하는 것 보고 수정해야지~ 하고 까먹고 있다가 배포하게 되면, 어머나 세상에 production에서 localhost 를 찾는 괴상한 현상을 보게된다. 아 나는 둘다 쓰고 싶은데 도메인 인식 어떻게 하지? 원하는 것은 이거!1. npm run dev로 로컬을 띄우고 기존 url(http://localhost:port) 그대로 사용하고 싶어요2. vercel 배포했는데, vercel domain 인식하게 할 수 있는 방법은 없나요?   해결책환경변수로(.env 파일을 이용해) domain을 각기 설정하자. 1. vercel에 환경변수 추가하기: vercel의 프로젝트 셋팅 ..

서론vercel 배포했더니 왜 vercel domain 3개 중에 2개가 cors가 날까요?왜??? 자기끼리 CORS가 나는 건 무슨? (사실 자기들끼리라는 말은 잘못되었다 엄연히 다른 URL인걸?) 해결책모두에게 문을 열어주자!  case 1. Next.js 사용하는 경우, 설정 파일(next.config.js)에 아래 내용을 추가한다. const nextConfig = {  headers: () => {    return [      {        source: "/api/:path*",        headers: [          { key: "Access-Control-Allow-Credentials", value: "true" },          { key: "Access-Control-..

문제 상황아래처럼 supabase의 url과 api key를 복사해서 넣었는데, 위처럼 invalid API key 오류가 떴다.  해결

에러 메세지Error: Invalid src prop (이미지 URL) on `next/image`, hostname "도메인" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host 해석하자면, 이미지 띄우려고 하니 next.config.js 파일에 이미지 파일의 도메인 등록이 안되어 있다. 자세한 사항은 문서를 봐라.  해결책메세지 내용 그대로 next.config 파일에 domain을 등록해주면 된다.