강의

N
챌린지

멘토링

N
클립

로드맵

개발 · 프로그래밍

/

웹 개발

프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)

체계적인 단계의 프로젝트 실습과 배포, 빌트인 store 활용, SvelteKit와 Supabase로 풀스택 애플리케이션까지 한방에!

(5.0) 수강평 9개

수강생 81명

  • Michael Kwon
실습 중심
Sveltesveltekitsupabase

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

이런 걸 배울 수 있어요

  • 홈페이지에서 캐주얼 게임, 풀스택 애플리케이션 까지 다양한 주제의 프로젝트를 통해 프론트엔드의 핵심 기능들을 습득하고 문제해결 능력을 키웁니다.

  • Svelte의 간결하고 직관적인 문법을 사용하여 컴포넌트 기반 아키텍처를 구축하고 상태 관리, 이벤트 처리, 라우팅 등의 주요 주제를 다룹니다.

  • Vite를 통해 프로젝트 생성 및 빌드를 하고 깃허브와 Vercel을 통해 쉽게 웹에 배포합니다.

  • 빌트인 스토어를 통해 전역 상태관리를 쉽게 다루는 방법을 습득할 수 있습니다.

  • SvelteKit과 Supabase로 풀스택 애플리케이션을 쉽게 개발합니다.

  • 최소한의 시간 대비 많은 것들을 습득 가능합니다.

체계적인 단계의 프로젝트 실습과 배포, 빌트인 store 활용, SvelteKit와 Supabase로 풀스택 애플리케이션까지 한방에!

이 강의는 최신 웹 개발 트렌드에 부합하는 Svelte의 기본기를 실전적으로 습득하기 위한 목표로 구성되었습니다. Svelte는 직관적이며 가볍고 뛰어난 성능, 효율적인 컴파일 타임 최적화를 통한 코드 크기 감소와 뛰어난 성능을 자랑합니다.

HTML, CSS와 JavaScript 기초를 배우고 이제 프레임워크(라이브러리)를 배워보고자 하는 입문자에게는 개발에 흥미를 붙일 수 있으며 이미 타 프레임워크를 사용했던  개발자들은 기존 UI 프레임워크에 비해 스벨트의 간결하고 유연함을 경험할 수 있는 최고의 세컨드 쵸이스입니다!

현재 점점 더 많은 개발자와 기업들이 Svelte(sveltekit)를 사용하여 웹 애플리케이션을 개발하고 있으며, Svelte로 구축된 프로젝트들이 성공적으로 운영되고 있습니다. 문법만 배우다 지루해서 포기하지 마시고 프로젝트를 만들면서 배워보세요!

💡 프로젝트를 통한 실습 중심의 구성

  • 문법 위주가 아닌 프로젝트를 통해 점진적으로 습득하는 흥미로운 수업을 경험할 수 있습니다.

  • 시각적인 자료와 군더더기 없는 간결한 설명을 통해 초보자도 무리없이 학습이 가능합니다.

이런 내용을 배워요

1⃣ 영화정보 홈페이지

component, 데이터 바인딩, 상태변수 다루는 법, 동적 콘텐츠, 라이프사이클 등 프론트엔드 애플리리케이션 개발의 기본기를 습득하게 됩니다.

1

영화정보 홈페이지

2⃣ 브랜딩 홈페이지

페이지를 연결하는 라우팅 기능과 URL Parameter로 페이지에 데이터를 전달하여 동적인 페이지를 구현할 수 있습니다. 최종적으로 결과물을 웹에 배포합니다.

2.branding-home

브랜딩 홈페이지

3⃣ 캐주얼 게임 만들기

컴포넌트 단위의 기능적 개발, 상태관리, 이벤트, 라이프사이클 등 지금까지 배운 핵심적인 개발능력을 총제적으로 다루고 게임 점수관리를 위해 전역상태관리를 본격적으로 활용합니다.

3.card-game

캐주얼 게임(짝찾기)

4⃣ 일기장 앱(SvelteKit + Supabase)

Svelte에서 기능을 확장한 SvelteKit 프로젝트를 통해 파일 기반 라우팅, 서버 사이드 로직을 처리하고 실제 database와 연동되는 풀스택 애플리케이션까지 학습합니다. supabase를 통해 클라우드 기반으로 데이터베이스를 쉽게 다룰 수 있습니다.

4.diary app

일기장 앱

수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): Windows, macOS, Linux 등 모든 OS가 가능합니다.

  • 사용 도구: Visual Studio Code, 깃허브 계정

  • PC 사양: 인터넷 접속이 가능한 기본 사양의 PC

학습 자료

  • 제공하는 학습 자료 형식: 깃허브 링크 공유, 텍스트, 소스 코드 등

  • 분량 및 용량: 각 섹션별로 학습 자료 제공

선수 지식 및 유의사항

  • HTML, CSS, JavaScript 기초


  • 본 강의의 저작권은 저작자에게 있으며, 무단 배포 및 복제를 금지합니다. 학습 자료 역시 저작권이 있으며, 개인적인 학습 목적 외 사용을 금합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • HTML, CSS, JavaScript에 대한 기초적인 이해가 있지만 프레임워크나 라이브러리를 사용한 경험이 적은 분

  • 프론트엔드에 대한 기본기 습득을 원하는 분

  • 실습 위주로 빠르게 공부하고 싶은 분

  • 투입 대비 빠른 결과물을 원하는 개발자

선수 지식,
필요할까요?

  • HTML, CSS, JavaScript에 대한 기초

안녕하세요
입니다.

223

명

수강생

24

개

수강평

17

개

답변

5.0

점

강의 평점

5

개

강의

스타트업에서 멀티미디어 콘텐츠 크리에이터로 입문하여 한 분야에만 머물지 않고 게임과 웹, 멀티미디어 분야에서 기획과 개발을 주도하며 현업에서 다양한 상용 작품을 런칭했습니다. 대학에서 디지털 미디어와 영상학을 전공했으며 주요 교육기관에서 웹 디자인과 프론트엔드 개발 및 미디어 교육(10년 이상) 등을 진행하면서 튜토리얼도 제작하고 있습니다.

- 저서 -

자바스크립트 프로젝트북(한빛미디어,2017)

커리큘럼

전체

104개 ∙ (8시간 23분)

해당 강의에서 제공:

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

수강평

전체

9개

5.0

9개의 수강평

  • leaguematter7718님의 프로필 이미지
    leaguematter7718

    수강평 5

    ∙

    평균 평점 4.6

    5

    100% 수강 후 작성

    The lectures are structured in short, functional units, making it easy to learn.

    • csslick
      지식공유자

      Mr. Lee Jong-su, thank you for your valuable feedback~

  • startop10님의 프로필 이미지
    startop10

    수강평 4

    ∙

    평균 평점 4.0

    5

    100% 수강 후 작성

    You explain the charm of svelte in a clear and easy-to-understand way. Thank you.

    • csslick
      지식공유자

      Thank you for your valuable evaluation and comments~

  • grooveturtle290048님의 프로필 이미지
    grooveturtle290048

    수강평 10

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    I think this will be a good warm-up lecture for those who are new to Svelte. Since you learn by progressing through projects, it is not boring and you can quickly finish the course in a short period of time, which is good.

    • csslick
      지식공유자

      Mr. Rocking Turtle, thank you for your valuable feedback!

  • antk7894님의 프로필 이미지
    antk7894

    수강평 1

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    I took the course because I wanted to try out Svelte and SvelteKit, and I think I was able to learn both the basics and applications well. I liked the parts that were explained with actual references, and I was also very satisfied with the parts where I could refer to GitHub as a branch for each lecture. Thank you for the valuable lecture!!

    • csslick
      지식공유자

      Thank you for your active participation in class and valuable opinions ^^;

  • kimks018540님의 프로필 이미지
    kimks018540

    수강평 1

    ∙

    평균 평점 5.0

    5

    92% 수강 후 작성

    Through this lecture, I was able to truly feel the charm of Svelte, SvelteKit, and Supabase! The curriculum is concise and systematic, from the basics to the application, and especially thanks to the project, I was able to apply what I learned right away, which made it much easier to understand. I have experience using other frameworks, so I can compare, but I am completely immersed in the simplicity and efficiency of Svelte. The backend integration using Supabase was explained in an easy-to-understand manner, so I was able to naturally learn the parts that were unfamiliar at first. The instructor's explanations were clear and kind, so it was easy to understand, and the parts that corrected actual errors and tips in the middle of the class were also useful~

    • csslick
      지식공유자

      The simplicity of Svelte is a big attraction. Our lectures are the same. Thank you for your valuable opinion~

지식공유자의 깜짝할인 중 (4일 남음)

₩30

22%

₩49,500

Michael Kwon님의 다른 강의

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

From Figma design to publishing강의 썸네일

From Figma design to publishing

Michael Kwon

All-in-one course for designers and developers! New UI3 included

초급

초급

Figma, HTML/CSS

From Figma design to publishing강의 썸네일

From Figma design to publishing

Michael Kwon

Learning TypeScript Basics Easily Through Projects강의 썸네일

Learning TypeScript Basics Easily Through Projects

Michael Kwon

TypeScript: Core concepts, from basic to practical, all at once! Practical application through a project.

초급

초급

JavaScript, TypeScript, TailwindCSS

Learning TypeScript Basics Easily Through Projects강의 썸네일

Learning TypeScript Basics Easily Through Projects

Michael Kwon

Vanilla JavaScript & Tailwind CSS강의 썸네일

Vanilla JavaScript & Tailwind CSS

Michael Kwon

Practical web UI development using AI and component-centric UI creation, An essential course for Designers + Developers!

초급

초급

JavaScript, vanilla-javascript, frontend

Vanilla JavaScript & Tailwind CSS강의 썸네일

Vanilla JavaScript & Tailwind CSS

Michael Kwon

Creating a job search site with Vue3 and Supabase강의 썸네일

Creating a job search site with Vue3 and Supabase

Michael Kwon

From developing your own full-stack application to a Progressive Web App (PWA)!

초급

초급

Vue.js, supabase, Vue 3

Creating a job search site with Vue3 and Supabase강의 썸네일

Creating a job search site with Vue3 and Supabase

Michael Kwon

비슷한 강의

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

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)강의 썸네일

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)

lopun

Supabase: Giving Wings to Full-stack Development! Through 3 clone projects, you will quickly learn how to build practical-level full-stack applications using Next.js 14 and Supabase.

초급

초급

Next.js, supabase, TailwindCSS

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)강의 썸네일

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)

lopun

[Fullstack Introduction] Supabase, 10x Better Than Firebase강의 썸네일

[Fullstack Introduction] Supabase, 10x Better Than Firebase

lopun

Supabase to give wings to full-stack development! Complete full-stack development in 2 hours with Supabase, a superset of Firebase.

초급

초급

PostgreSQL, Next.js, TailwindCSS

[Fullstack Introduction] Supabase, 10x Better Than Firebase강의 썸네일

[Fullstack Introduction] Supabase, 10x Better Than Firebase

lopun

Creating a job search site with Vue3 and Supabase강의 썸네일

Creating a job search site with Vue3 and Supabase

Michael Kwon

From developing your own full-stack application to a Progressive Web App (PWA)!

초급

초급

Vue.js, supabase, Vue 3

Creating a job search site with Vue3 and Supabase강의 썸네일

Creating a job search site with Vue3 and Supabase

Michael Kwon

Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]강의 썸네일

Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]

Indie Coder

You will learn the basics and advanced usage of GraphQL, the next-generation API control technology, and gain real-world project experience through a virtual kiosk service created with GraphQL. The course has been partially updated to the latest version, apollo-server v4, as of February 2024.

초급

초급

GraphQL, Svelte, MongoDB

Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]강의 썸네일

Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]

Indie Coder

Svelte Introductory Course - A to Z강의 썸네일

Svelte Introductory Course - A to Z

beomy

This is an introductory lecture on Svelte, which threatens the position of the three front-end giants React, Vue, and Angular. Based on the official Svelte documentation, it covers all of Svelte grammar from A to Z.

초급

초급

Svelte

Svelte Introductory Course - A to Z강의 썸네일

Svelte Introductory Course - A to Z

beomy

Svelte REST-API project강의 썸네일

Svelte REST-API project

Indie Coder

This lecture is a video lecture on the latter part of the book, ‘Web Frontend with Svelte’, which I wrote, about creating a SLOG project. I prepared this lecture in the hope that it would supplement the parts that were a bit lacking in the book and make more people interested in the frontend framework called Svelte.

초급

초급

Svelte, REST API

Svelte REST-API project강의 썸네일

Svelte REST-API project

Indie Coder

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·Supabase강의 썸네일

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·Supabase

ludgi

This course is not just simple clone coding or a basic tutorial. By implementing an LMS (Learning Management System) platform like Inflearn from start to finish at an MVP level, it provides an all-in-one solution that freelancers, solo developers, and early-stage startup members can immediately apply in real-world projects. We cover the entire tech stack used in actual production environments at once: Next.js, Flutter, Supabase, Firebase (FCM), AWS, Vercel, Xcode, Android Studio, ElevenLabs, and Toss Payments. You'll experience the complete process of simultaneously developing web and mobile apps, including social login, automatic multilingual dubbing, HLS streaming-based lecture playback, payment integration, and deployment to the App Store and Play Store. This course focuses on the important workflows, configurations, and deployment processes that matter in real-world development, rather than detailed line-by-line coding. Therefore, it's suitable for developers looking to become independent freelancers, teams that need to quickly validate MVPs at startups, and junior developers who want to experience the full scope of real-world development.

중급이상

중급이상

Flutter, AWS, supabase

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·Supabase강의 썸네일

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·Supabase

ludgi

Svelte.js Beginner's Guide강의 썸네일

Svelte.js Beginner's Guide

HEROPY

Free Svelte.js course for beginners over 2 hours long!!

초급

초급

Svelte

Svelte.js Beginner's Guide강의 썸네일

Svelte.js Beginner's Guide

HEROPY

Non-Developer Creates Profitable Service in Just 4 Weeks: AI Vibe Coding Web + App ALL IN ONE

dingcodingco

Don't know coding? OK! Turn your ideas into real revenue in just 4 weeks. Using AI and the latest tools, create websites and apps simultaneously and connect them directly to services.

입문

입문

Flutter, Next.js, cursor

Non-Developer Creates Profitable Service in Just 4 Weeks: AI Vibe Coding Web + App ALL IN ONE

dingcodingco