강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

풀스택

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

풀스택 개발에 날개를 달아줄 Supabase! 3가지의 클론 프로젝트를 통해 Next.js 14와 Supabase로 실무 수준의 풀스택 개발을 하는 법을 속성으로 배우게 됩니다.

(4.8) 수강평 52개

수강생 847명

  • 로펀

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • Supabase로 서버없이 풀스택 개발을 하는 법 (회원인증, 파일 업로드, 실시간 채팅)

  • Next.js 14버전 (feat. App Router, Server Action)

  • 카카오 OAuth 로그인 구현

  • Tailwind CSS, React Query, Recoil 라이브러리

  • Vercel과 AWS를 통한 프로젝트 배포방법

  • 무한 스크롤, 드래그 앤 드롭 기능 구현

  • 도메인 구매 및 연동

이 강의를 통해 여러분은


NextJS 14 버전과

강력한 백엔드 서비스인 Supabase의 조합으로


3가지 클론 프로젝트를 진행하며

실무 수준의 풀스택 개발자로 빠르게 성장합니다!

풀스택 개발에 날개를 달아줄
파이어베이스 강력한 대항마,

🚀 슈파베이스 🚀

PostgreSQL 기반으로 복잡한 요구사항도 쉽게 구현해요

실시간 데이터베이스 기능으로 실시간 채팅 개발도 더이상 무섭지 않아요

소셜 로그인 기능도 쉽게 구현해요 (카카오, 구글, etc)

SDK, GraphQL, API 등 나에게 편한 방식으로 손쉽게 연동해요

어드민 페이지와 자동으로 SQL을 만들어주는 AI 기능도 다 무료에요

이 강의를 수강하시는 모든 분들은

4개의 웹사이트혼자서 배포까지

모두 완료하게 됩니다 🚀

🔗 각 프로젝트에 있는 링크(파란 텍스트)를 클릭해보세요.

[프로젝트 1] 투두 리스트 (연습 프로젝트)

  • Supabase Database로 CRUD 구현

  • 할일 만들기, 삭제하기, 검색하기, 완료하기 구현

  • 첫 NextJS 풀스택 프로젝트

[프로젝트 2] 드롭박스 클론 (파일 업로드)

  • Supabase Storage로 파일 기능 다루기

  • 파일 업로드 및 삭제, 검색 구현

  • 드래그 앤 드롭 기능 구현

[프로젝트 3] 넷플릭스 클론

  • Supabase SDK로 복잡한 SQL 다루기

  • 영화 리스트 화면, 검색 기능, 상세페이지 구현

  • 무한 스크롤 구현 (intersection-observer)

[프로젝트 4] 인스타그램 클론 (회원가입, 채팅)

  • Supabase Auth로 회원기능 쉽게 구축

  • Supabase Realtime로 실시간 기능 다루기

  • 2가지 방식의 회원가입, 로그인 구현

  • 실시간 채팅, 실시간 접속여부 구현

  • + 카카오 로그인 기능 구현 강좌가 추가됐어요!

이런 분들께 강력히 추천해요

Supabase를 통해
서버구축 없이 풀스택 개발
하고싶은 개발자

다양한 클론 프로젝트를 통해
개발 실력을 탄탄하게
다지고 싶은 개발자

최신 기술을 활용해서
모던한 풀스택 개발
하고싶은 개발자

Next.js 14와 Supabase의 강력한 조합으로 🚀

가장 빠르게 풀스택 개발자로 만들어드립니다!

3가지의 클론 프로젝트를 통해 빠르게 실력을 향상시켜 드립니다 👩🏻‍🎓

이 강의를 수강하신 분들만

얻어가실 수 있는 혜택 4가지!

첫째,

Supabase의 핵심 기능 4가지를 모두 배워요!

( DB 조회, 회원 인증, 파일 업로드, 실시간 기능 구현까지 모두 배워요)

Supabase의 강력한 기능들

다양한 프로젝트에 하나하나 적용해보면서

핵심 기능 4가지를 제대로 배우실 수 있습니다 😉

둘째,

3가지의 클론 프로젝트를 같이 만들어나가요!

( 실무 능력을 빨리 키우실 수 있어요)

총 3가지의 클론 프로젝트를 통해

파일 업로드, 회원 인증, 실시간 채팅, 검색 기능, 무한 스크롤 등을 구현해보고

"실무에 바로 적용 가능한 기술스택"을 갖춘

풀스택 개발자로 거듭나게 됩니다!

(+ 카카오 OAuth 로그인 강의가 추가되었어요 😉)

셋째,

실무에서 많이 사용되는 최신 기술스택을 배울 수 있어요!

( 각 기술별로 이론과 실무 강의가 제공돼요)

단순히 "최신기술"에만 포커스를 두지 않고,

효율적인 풀스택 개발을 할 수 있는 기술들로 선정했답니다 🙂


최신 기술들을 별도로 배우실 필요 없이

실무에서 사용하는 방식 그대로

이번 강좌에서 모두 배우실 수 있습니다!

넷째,

두 가지의 배포 방식을 배우고 도메인까지 연동해요!

( 훌륭한 포트폴리오를 나만의 도메인으로 만들 수 있어요)

AWS EC2Vercel로 배포하는 방법부터

나만의 도메인을 구매하고 연동하는 방법까지

모두 배우게 됩니다


(+ 더 전문성있는 포트폴리오를 완성하실 수 있어요!)

잠깐! 아직 학교에 재학 중인 학생이신가요?

🔗 학생할인(-50%) 구글폼 링크 🔗

수강 전 참고 사항

학습 자료

선수 지식 및 유의사항

  • Next.js 혹은 React.js를 사용해보신 분이라면, 강의를 충분히 따라오실 수 있습니다!

  • 기본적인 CSS 지식은 필요합니다. (ex. flex가 무엇인지)

구매 후에도 지속적으로 업데이트되는 강좌

  • 이해하기 어려우신 부분이 있다면 Q&A 외에도 보충설명 강의가 추가될 예정입니다.

  • Supabase에 새로운 기능이 추가된다면 강의가 업데이트 될 예정입니다.

#Next.js, #supabase, #tailwind-css, #react-query슈파베이스, #recoiljs, #firebase, #Supabase RLS, #Row level Security

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 풀스택 개발을 끝까지 해내고 싶은 프론트 개발자

  • 개발과 운영 난이도를 확 낮추고 싶은 1인 / 소규모 개발팀

  • 사이드 프로젝트에 최적화된 백엔드 서비스를 찾으시는 분

선수 지식,
필요할까요?

  • Next.js 또는 React.js에 대한 기본적인 이해

  • 기본적인 CSS 지식

안녕하세요
입니다.

3,576

수강생

200

수강평

64

답변

4.9

강의 평점

7

강의

🚀 “핫한 스택으로 실전 서비스를 만드는 과정을 숨김없이 보여드립니다.”

이론보다는 프로젝트 위주의 실무 강의로 현업에 바로 도움이 될 수 있는 내용을 제공합니다.

  • (현) 네카라쿠배 재직

  • (현) 7년차 풀스택 개발

  • (강의) 스파르타 코딩클럽 강사

  • (교육) 한국과학기술원(KAIST) 전산학과 졸업

커리큘럼

전체

40개 ∙ (10시간 55분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

52개

4.8

52개의 수강평

  • official님의 프로필 이미지
    official

    수강평 1

    평균 평점 5.0

    5

    63% 수강 후 작성

    For those of you who are wondering whether or not to take this course, I would like to explain the advantages I felt while taking the course. I have also compiled a list of people who will benefit from listening. Advantages 1. You can quickly get used to using the latest technologies and Supabase with 3 clone codings. 2. You can directly experience and implement the latest technologies of NextJS, such as Server Actions. 3. You can focus on learning the core functions required for actual projects, such as infinite scroll. 4. You can improve your development experience by learning the deployment methods of both Vercel and AWS. I think I can explain the advantages in four ways. I have compiled a list of people who will benefit from listening to this lecture. 1. Those who have basic background knowledge of global state management and server API and want to become proficient through repeated learning. 2. Those who want to integrate the backend and frontend to complete a single project. 3. Those who want to experience the entire process from project creation to deployment. 4. Those who want to become familiar with code and function implementation through repeated learning. Although the lecture initially provides a comprehensive explanation of the technology stack covered in the lecture, such as React Query, Recoil, and NextJS, If you don't have basic knowledge, it may be difficult to understand. Since the lecture focuses on utilization rather than basic explanations of technology or libraries, if you don't have background knowledge, I recommend that you learn the basics first and then take this lecture. Compared to other lectures, the progress is fast and the number of projects to be completed is large, so you will be able to feel your skills improving by repeatedly implementing functions in a short period of time. I recommend this lecture to anyone who is considering taking it for proficiency.

    • lopun
      지식공유자

      Wow, thank you so much for writing such a detailed course review!! I was worried about how the students would perceive the many projects, but I'm so touched that they said it actually helped them. ㅎㅎ By the way, you're almost done with the course already 🫢 Good luck with the remaining courses, beginners! If there's any difficult content in the latter half, I'll actively help you out :)

  • hamjw01224657님의 프로필 이미지
    hamjw01224657

    수강평 1

    평균 평점 5.0

    5

    66% 수강 후 작성

    I wanted to try Supabase, but I was having trouble because there was not enough material to use it in Next.js, and then I came across this course. I liked that I could learn the basics of Supabase with a simple project like a to-do list and then implement major functions like Storage and Auth myself. The lecture content is well organized in Notion, so it was easy to follow the lecture, and the explanations were step-by-step, so I was able to listen to the lecture quite a bit while working at the company☺️ Thank you for making such a great course. It was very helpful.

    • lopun
      지식공유자

      Hello Jane! It's so cool that you're able to take the course so quickly while working. 🫢 I'm explaining it slowly so that students can understand it well. If it seems a little slow, you can use the speed function. Thank you so much for leaving a valuable review!

  • joy40176271님의 프로필 이미지
    joy40176271

    수강평 2

    평균 평점 5.0

    5

    100% 수강 후 작성

    I started taking this course because I wanted to create my own web app while doing frontend development. When I tried integrating Next.js and Supabase on my own, it was quite difficult, but through this course, I was able to learn a lot. Thank you for creating such a great course! Thanks to it, I'm getting 3 portfolios as a bonus 😊😊 Additionally, Next.js is currently at version 15 while the course uses version 14, so there were more syntax differences than I expected. It would be more convenient for learning if you could add supplementary materials about version differences to the course, or guide students to use the npx create-next-app@14 ... command.

    • swerty142487님의 프로필 이미지
      swerty142487

      수강평 1

      평균 평점 4.0

      4

      30% 수강 후 작성

      Adding theoretical parts about technology is recommended.

      • fined0006806님의 프로필 이미지
        fined0006806

        수강평 27

        평균 평점 4.7

        5

        100% 수강 후 작성

        Thank you for creating such great examples with the latest version, I learned a lot.

        ₩99,000

        로펀님의 다른 강의

        지식공유자님의 다른 강의를 만나보세요!

        비슷한 강의

        같은 분야의 다른 강의를 만나보세요!