본문 바로가기

Next.js4

[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] 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.
[Next.js] Loading UI 간단히  Loading UI에 대하여 학습한 내용을 간결하게 정리하고자 한다. 2. Loading UINext.js 14의 App Router에서 비동기 컴포넌트가 로드되는 동안 사용자에게 로딩 상태를 표시하는 기능 사용자가 웹 애플리케이션을 사용할 때 비동기 작업이 완료될 때까지 기다려야 하는 상황에서 유용2-1 Loading UI는 왜 중요한가? 1. 사용자 경험 개선 : 로딩 중인 상태를 명확히 표시하지 않으면 ,사용자 입장에서는 현재 어떤 상황이 일어나는지 알 겨를이 없기 때문에, 이는 웹사이트를 이용하는 클라이언트의 입장에서는 불안감과 , 사용자 경험을 하락시킨다.이러한 요인은 불필요한 클릭, 페이지 이탈 가능성을 높인다. 이러한 상황에 Loading UI 를 적절히 활용하게 될 경우 사용자 유.. 2024. 10. 1.
[Next.js]Next.js 1. Next.jsHigh-Quality 웹 어플리케이션을 만들 수 있는 웹을 위한 React Framework 2. Next.js의 장점1. SSR, SSG, ISG -> 사용자 입장에서 초기 로드 시간 단축 , 코드 스플리팅, 이미지 최적화까지 다 해줌2. Search Engine Optimization -> 서버 사이드 렌더링을 통해 웹 페이지가 초기 로드 시 완전히 렌더링 되므로,위와 일맥상통 하는 것이지만, 검색 엔진이 쉽게 콘텐츠를 인덱싱 할 수 있다. 정적 사이트 생성으로 미리 생성된 html파일을 제공하고, seo 성능 극대화3.개발자 경험 - 자동 코드 분할, 핫 리로딩, 타입스크립트 지원, API 라우트 지원 -> 백엔드와의 통합을 쉽게-> 환경 설정이 적다 4. 확장성과 유연성서버리스.. 2024. 9. 28.

티스토리툴바