React Next.js + Supabase 프로젝트 실습
최근 React 의 중요성이 아주 커지면서, 주니어 프론트엔드 개발자들에게는 React에 대한 지식은 선택사항이 아닌 필수 교양이 된 느낌이기도 합니다ㅎㅎ 제가 진행할 이 프로젝트에서는 학생분들, 개발을 가볍게 시작해보려는 분들을 위해 무조건 지킬 조건들이 있습니다프로젝트에 필요한 모든 기술은 무료만 사용할 것이다. (서버, 데이터베이스, 각종 라이브러리, 서드파티)실제로 다른 사람도 접속을 해서 다른 사람한테 보여줄 수 있어야 한다 (무료 배포가 가능해야 한다)AI (chat GPT 등)의 도움을 충분히 받는다. (무료 선에서)최근 실무에서 요구되는 기술들을 사용한다 (포트폴리오용) 하지만 항상 명심해야 할 부분도 있습니다. 텍스트로 전하는 글인 이상, 완벽하고 상세한 내용을 전부 담을 수는 없습니다...
최근 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 에 올리면 그걸 트리거로 배포를 진행하도록 설정까지 해보려고 합니다.
앞으로 이 프로젝트를 진행하면서 어떻게 설정을 하고, 어떤 방식의 코드를 사여ㅛㅇ해야 하는지 천천히 올려볼테니, 관심이 있으시다면 앞으로 이후에 올려질 포스팅을 기대해주세요!
