Programming32 [Tailwind]Tailwind %, vh, svh, lvh,dvh 뭐가 다른 것인가?. Tailwind를 쓰다보니 몇가지 비슷한 느낌인데, 그럼에도 헷갈릴 수 있는 단위가 몇 가지 있다. 정리를 해보고자 포스팅을 작성하게 되었다.1. dvh(Dynamic Viewport Height)주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되건 상관없이, 현재 보여지는 뷰 포트의 높이를 동적으로 가져온다. -> 100dvh는 주소표시줄의 유무에 따라 동적으로 값이 달라진다. 2. svh (Short Viewport Height)사용자 화면을 기준으로 가장 짧은 뷰 포트 값을 가져온다.주소 표시줄이 없어져도 기존 주소표시줄의 높이값을 뺀 나머지 값을 가져온다. 3. lvh(Large Viewport Height) svh의 반대개념으로 사용자 화면 기준으로 가장 긴 뷰 포트의 값을 가져온다. 주소 표시.. 2024. 10. 24. [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. 이전 1 2 3 4 ··· 6 다음
