본문 바로가기

전체 글149

[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.
Test Code에 관하여. 1. Frontend 관점에서의 Test의 목적과 이점1-1 안정성과 신뢰성 확보 : 정기적인 테스트를 통해 개발된 애플리케이션이 안정적으로 작동하며,예상치 못한 사용자의 액션에도 견딜 수 있고 정상적으로 동작하는지를 확인 1-2 코드 동작의 테스트 : 코드가 로직대로 정상적으로 제대로 동작하는지에 대한 검증1-3 상호 작용 테스트 : 사용자와의 상호작용, 클릭, 스크롤, 입력 등이 정상적으로 동작하는지를 검증 1-4 성능 평가 : 애플리케이션의 로딩시간, 반응속도 등 성능 지표를 평가, 더 좋은 사용자 경험을 위하여 개선점을 식별할 수 있는 것1-5 크로스 브라우징 호환성 : 다양한 웹 브라우저와 디바이스에서 애플리케이션이 일관된 방식으로 작동하는지를 테스트 1-6 인터페이스 검증 : 프론트엔드 테스트.. 2024. 10. 11.
[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.
[Server Problem Solve]서버가 아주 맛탱이가 가버렸다. 최근들어 혼자 운영중인 개인서버의 오류가 급증한다. 어떤 오류인지 로그도 확인하고, 디스크 용량도 확인하고 , mapper가 잘못되었는지, 아니면 서비스 내부 로그도 다 확인했는데 문제는 각 problem들이 각각 다른 원인을 가리키고 있다. 원인이 다양할 수도 있고, 몇가지 원인이 추측이 될 뿐.. 2024. 10. 3.
[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.

티스토리툴바