요즘 supabase가 자주 보여서 궁금증에 인프런 강의를 들어보았다.FirebaseBaaS: 서버 없이도 빠르게 앱을 출시할 수 있도록 나온 백엔드 플랫폼가입인증, 클라우드 호스팅, 실시간 데이터베이스, 파일 업로드 클라우드 저장소 등 제공앱기능 향상, 앱 성장을 위한 다양한 기능 제공장점다양한 서비스와 폭넓은 연동지원적용이 쉽고 문서화가 잘 되어있다.커뮤니티가 매우 성숙한 프로덕트앱, 웹에서 단순하게 사용할 수 있는 NoSQL 기반단점오픈소스가 아니다. (Vendor Lock-In)복잡한 쿼리 불가(NoSQL 기반)유저가 많아졌을 때 비용이 많이 든다.앱 개발에는 월등히 좋으나 웹 개발에 최적은 XSupabase오픈소스핵심 기능 4가지Database : PostgreSQL 기반 실시간 데이터베이스 제..

이전에 Git 블로그를 Netlify로 배포한 경험이 있다. Netlify는 Git 계정과 레포지토리를 간단하게 연결하면 자동으로 배포가 진행되는 방식이어서 매우 쉽게 설정할 수 있었다. 이번에는 Next.js 프로젝트를 진행하니 Vercel을 사용해 배포해 보고자 한다.Vercel은 Next.js의 공식 호스팅 플랫폼으로, Next.js 배포에 최적화된 성능을 제공한다. 또한 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)를 원활하게 지원한다. Vercel 배포 순서🌿 Import Git Repository회원가입 및 로그인 후 GitHub 계정과 연동하면 배포할 레파지토리를 선택할 수 있다.🌿 Confiture ProjectBuild Command를 설정할 수 있는데 기본값으로 그대로 사..

지금까지 리액트 프로젝트는 2번 정도 진행 했었는데 상태 관리 라이브러리를 적용해 본 경험이 없어서이번 프로젝트에서는 zustand를 활용하여 상태관리를 해보고자 한다. Zustand란?React 상태 관리 라이브러리hook를 기반으로 한 간결하고 직관적인 API를 제공하며, 전역 상태 관리를 간단하게 구현할 수 있게 해준다.Persist와 같이 사용하기Zustand의 미들웨어 중 하나로, 상태를 브라우저의 저장소에 저장할 수 있게 해준다. 이를 통해 페이지를 새로고침하거나 브라우저를 닫고 다시 열어도 상태가 유지되도록 할 수 있다. Zustand 설치npm install zustand src/store/authStore.ts 파일 생성zustand import인터페이스 정의 : 스토어의 상태와 액션 타..

사이드 프로젝트를 시작해 보려고 우선 Git에 레포지토리 및 프로젝트를 생성했습니다.이 프로젝트의 목적은 Next.js와 TypeScript를 공부하는 것입니다. React도 아직 기초에 불과하지만, 개발을 하면서 하나씩 알아가려 합니다.사이드 프로젝트 GitNext.js 프로젝트 생성npx create-next-app@latest [프로젝트명]cd [프로젝트명]npm run dev 우선 프로젝트가 실행되는 것을 확인했습니다.Next.js의 특징서버 사이드 렌더링(SSR) : 페이지 요청 시 서버에서 렌더링하여 사용자에게HTML 전달. SEO에 유리하고, 초기 로딩 속도가 빨라진다는 장점이 있다.파일 기반 라우팅 : pages 디렉토리 안에 파일을 생성함으로써 자동으로 라우팅을 설정할 수 있다. 각 파일..