React Next.js + Supabase 프로젝트 실습
Next.js와 Supabase를 활용한 풀스택 토이 프로젝트를 시작하며, create-next-app으로 초기 세팅 후 TypeScript, Tailwind, App Router를 구성한다. 폴더 기반 라우팅과 동적 경로 구조를 설명하며, 클라이언트 라우팅을 위한 <Link> 사용법도 소개한다.
최근 React 의 중요성이 아주 커지면서, 주니어 프론트엔드 개발자들에게는 React에 대한 지식은 선택사항이 아닌 필수 교양이 된 느낌이기도 합니다ㅎㅎ
제가 진행할 이 프로젝트에서는 학생분들, 개발을 가볍게 시작해보려는 분들을 위해 무조건 지킬 조건들이 있습니다
프로젝트에 필요한 모든 기술은 무료만 사용할 것이다. (서버, 데이터베이스, 각종 라이브러리, 서드파티)
실제로 다른 사람도 접속을 해서 다른 사람한테 보여줄 수 있어야 한다 (무료 배포가 가능해야 한다)
AI (chat GPT 등)의 도움을 충분히 받는다. (무료 선에서)
최근 실무에서 요구되는 기술들을 사용한다 (포트폴리오용)
하지만 항상 명심해야 할 부분도 있습니다. 텍스트로 전하는 글인 이상, 완벽하고 상세한 내용을 전부 담을 수는 없습니다. 최대한 코드에 주석을 넣겠지만, 모든 부분은 추가적인 학습과 서칭을 해주세요.
검색시 노출이 되기 위해 SEO 를 또 포기를 할 수는 없죠.
이번 프로젝트에서 사용할 기술 스텍을 먼저 나열을 해보겠습니다
- React
- Recoil, React Query
- Next.js
- Supabase
- Vercel
Next.js는 React 기반의 웹 애플리케이션을 구축하기 위한 오픈 소스 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등 다양한 기능을 제공하며, 웹 개발을 위한 편리한 도구 세트를 제공합니다. React가 UI 라이브러리라면, Next.js는 그 위에 구축된 풀스택 프레임워크로, 웹 애플리케이션의 전체적인 구조와 기능을 담당합니다.
Next.js 자체가 Vercel 에서 만들어졌습니다. 그래서 그런지 배포시에 Vercel 에서 배포를 할 때에 아주 쉽게 할 수 있더라구요. 그채서 저는 Vercel 로 배포를 하되, CI/CD 가 가능하게 만들려고 합니다. Github 에 올리면 그걸 트리거로 배포를 진행하도록 설정까지 해보려고 합니다.
앞으로 이 프로젝트를 진행하면서 어떻게 설정을 하고, 어떤 방식의 코드를 사용해야 하는지 천천히 올려볼테니, 관심이 있으시다면 앞으로 이후에 올려질 포스팅을 기대해주세요
