Programming/Next.js11 [Next.js]supabase Realtime을 이용한 채팅 기능 supabase Realtime이 프로젝트 진행 중 필요해졌다. 아무도 아는 이가 없어, 한번 파보고 시도해보고자 포스팅을 작성하게 되었다. -- 포스팅 작성 진행 중 2024. 10. 24. [Next.js]Supabase CLI로 각 테이블에 맞는 타입 생성 feat. More simple 저번 시간에는 Supabase에서 TypeScript에 적용할 수 있는 타입을 추출할 수 있도록 cli로 supabase cli를 설치 및 로그인 후 데이터베이스와 관련된 타입을 파일로 얻어오는 것을 확인했다.해당 사항 진행 중에 더 다른 쉬운 방법도 알게되어, 공유하고자 포스팅을 작성합니다. 1. Supabase Dashboard로 들어와서 위와 같은 경로를 따라, Generate and download types를 눌러준다.2. 해당 Action은 cli환경에서 굳이 설정하지 않아도, supabase web에서 데이터베이스의 type을 typescript에서 만들 수 있도록 도와준다. 3. 전 글과 같이 Import하여 사용하면 된다. 2024. 10. 23. [Next.js]Supabase CLI로 각 테이블에 맞는 타입 생성 프로젝트를 진행하는 도중 supabase의 type을 쉽게 꺼내는 방법이 있다고 팀원분께서 말씀해주셔서 해당 사항을 토대로 포스팅을 작성해보도록 한다. 해당 사항은 Supabase Docs에서도 확인이 가능한 사항이다. [Generating TypeScript Types]https://supabase.com/docs/guides/api/rest/generating-types1. yarn add supabase --dev-supabase cli를 프로젝트에 설치2. yarn supabase login-supabase cli를 통해 supabase 계정에 로그인하는 과정 3. project의 아이디가 필요하다. project 아이디는 supabase 프로젝트를 생성했을 때 대쉬보드에 접근하면 url에서 얻을.. 2024. 10. 23. [Next.js]Next.js의 Caching next.js는 상당히 복잡한 캐싱 전략을 가지고 있다. next.js에서는 대부분의 영역에서 fetch 함수를 기반으로 캐싱을 한다.-> next.js에서의 fetch는 우리가 흔히 아는 브라우저의 fetch와는 비슷하면서도 다르다.-> 브라우저의 fetch api를 기반으로 nxt.js에서 확장하여 만든 새로운 next.js만의 fetch api이기 때문 1. Full Route Cache 빌드 시점에 페이지를 렌더링하고 그 결과를 캐싱(저장)이를 통해 서버는 매 요청마다 페이지를 다시 렌더링 할 필요없이, 미리 생성된 html과데이터에 빠르게 접근할 수 있기에 -> 페이지 로딩 속도 향상 이 과정에서 next.js는 react api를 활용하여 렌더링 작업을 수행.1-1 React Server Co.. 2024. 10. 7. [Next.js]Next.js의 Deep Dive priority, placeholder, blurDataURL을 활용 가능하다. 2024. 10. 2. [Next.js] Next.js의 Image 동작원리 딥 다이브 Next.js의 Image태그 이미지 최적화는 정말 편하고, 편하면서도 복잡하기도 하지만 우리가 명심해야할 것은Next.js의 이미지 최적화는 마법이 아니다. 추가적인 리소스를 사용하여 빠르게 보이게 하는 것이다. Next.js의 이미지 최적화를 이용하게 되면, 이미지를 다운 받을 때 변환도 하고, 저장도 해놓는다.유저가 웹 사이트에 접속 시 저장한 해당 이미지를 보여주도록 하는 것https://github.com/vercel/next.js/blob/canary/packages/next/src/server/image-optimizer.ts next.js/packages/next/src/server/image-optimizer.ts at canary · vercel/next.jsThe React Frame.. 2024. 10. 2. 이전 1 2 다음
