파피루스

서론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을 등록해주면 된다.

페이지(page) 몇 장 쓰세요?1) MPA (Multi Page application) : 새로운 페이지를 요청할 때마다 정적 리소스를 다운받아 렌더링하는 방식 2) SPA (Single Page application): 필요한 데이터가 있을 때마다 비동기로 받아와, 동적으로 현재 화면에 재렌더링 하는 방식      TTV ? TTI? TTV (Time To View) : 첫 페이지 로딩 시간TTI  (Time To Interact) : 인터렉션 (버튼 클릭, 슬라이드 이동 등) 가능한 상태로의  로딩 시간    페이지(page) 어디에서 만드나요?1) CSR (Client Side Rendering) : 클라이언트(브라우저)에서 페이지를 동적 생성하는 방식장단점+👍최초 한번이 느리고, 그 이후의 상..

Next Js의 6가지 원칙 (특징, 장점)1. out-of-the-box functionality requiring no setup : 어려운 셋팅 이제 그만2. js everywhere + all functions are wrriten in JavaScript : 자바스크립트 어디서든3. automatic code-splitting and server-rendering4. configurable data-fetching : 데이터 패칭 설정을 제공하겠다5. anticipating requests : 사용자 요청을 예측가능하게 한다6. simplifying deployment : 배포 쉽게 Next Js 기능들HMR : 애플리케이션 실행 중일 때 특정 모듈의 변경사항을 실시간으로 교체지원하는 렌더링 방..