강의

N
챌린지

멘토링

N
클립

로드맵

개발 · 프로그래밍

/

웹 개발

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

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

(5.0) 수강평 11개

수강생 96명

난이도 초급

수강기한 무제한

실습 중심
실습 중심
Svelte
Svelte
sveltekit
sveltekit
supabase
supabase
실습 중심
실습 중심
Svelte
Svelte
sveltekit
sveltekit
supabase
supabase
야놀자
라인
LGCNS
마드라스체크
NHN KCP

NHN KCP

임직원들도 이 강의를 듣고 있어요!

야놀자
라인
LGCNS
마드라스체크
NHN KCP

NHN KCP

임직원들도 이 강의를 듣고 있어요!

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

5.0

5.0

이종수

100% 수강 후 작성

기능 단위 구현으로 짧게 강의를 구성해서 술술 배울 수 있었습니다.

5.0

슈퍼아스라다

100% 수강 후 작성

svelte의 매력을 느낄수 있게 차근차근 잘 설명해주시네요. 감사합니다.

5.0

흔들거북이

100% 수강 후 작성

svelte를 처음 입문하시는 분들에게 워밍업으로 좋은 강의가 될 것이라 생각합니다. 프로젝트 단위로 진행하면서 배우는것이다보니 지루하지 않고 단기간에 빠르게 완강 할 수 있어서 좋았네요.

수강 후 이런걸 얻을 수 있어요

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

  • 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에 대한 기초

안녕하세요
Michael Kwon입니다.

261

명

수강생

36

개

수강평

17

개

답변

4.9

점

강의 평점

5

개

강의

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

- 저서 -

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

커리큘럼

전체

104개 ∙ (8시간 23분)

해당 강의에서 제공:

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

수강평

전체

11개

5.0

11개의 수강평

  • 흔들거북이님의 프로필 이미지
    흔들거북이

    수강평 10

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    svelte를 처음 입문하시는 분들에게 워밍업으로 좋은 강의가 될 것이라 생각합니다. 프로젝트 단위로 진행하면서 배우는것이다보니 지루하지 않고 단기간에 빠르게 완강 할 수 있어서 좋았네요.

    • Michael Kwon
      지식공유자

      흔들거북이님, 소중한 평가 감사드립니다!

  • kimks01님의 프로필 이미지
    kimks01

    수강평 1

    ∙

    평균 평점 5.0

    5

    92% 수강 후 작성

    이 강의를 통해 Svelte와 SvelteKit, 그리고 Supabase의 매력을 제대로 느꼈습니다! 기초부터 응용까지 커리큘럼이 간결하면서도 체계적으로 짜여 있고, 특히 프로젝트 덕분에 학습한 내용을 바로 적용해 볼 수 있어 이해가 훨씬 수월했습니다. 다른 프레임워크를 사용한 경험이 있어 비교가 되는데 Svelte의 간결함과 효율성에 푹 빠지게 되네요. Supabase를 이용한 백엔드 통합도 전혀 어렵지 않게 설명해주셔서, 처음에는 생소했던 부분도 자연스럽게 익힐 수 있었습니다. 강사님의 설명이 명확하고 친절해 쉽게 이해할 수 있었고, 수업 중간중간 실제 오류를 수정하는 부분이나 팁도 유용했습니다~

    • Michael Kwon
      지식공유자

      스벨트의 간결함은 큰 매력이죠. 저희 강의도 그렇답니다. 소중한 의견 감사드립니다~

  • antk7894님의 프로필 이미지
    antk7894

    수강평 1

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    스벨트와 스벨트키트를 사용해보고 싶어서 수강했는데 기본기와 응용 모두 잘 학습할 수 있었던 것 같습니다. 실제 레퍼런스와 함께 설명해주시는 부분들이 좋았고 강의 별 브랜치로 깃헙을 참고할 수 있는 부분들도 매우 만족스러웠습니다. 벨류 높은 강의 감사합니다!!

    • Michael Kwon
      지식공유자

      적극적인 수업 참여와 소중한 의견 감사드립니다 ^^;

  • 이종수님의 프로필 이미지
    이종수

    수강평 5

    ∙

    평균 평점 4.6

    5

    100% 수강 후 작성

    기능 단위 구현으로 짧게 강의를 구성해서 술술 배울 수 있었습니다.

    • Michael Kwon
      지식공유자

      이종수님, 소중한 의견 감사드립니다~

  • 슈퍼아스라다님의 프로필 이미지
    슈퍼아스라다

    수강평 4

    ∙

    평균 평점 4.0

    5

    100% 수강 후 작성

    svelte의 매력을 느낄수 있게 차근차근 잘 설명해주시네요. 감사합니다.

    • Michael Kwon
      지식공유자

      소중한 평가와 의견 감사드립니다~

인프런 썸머 블랙프라이데이 할인 중 (4일 남음)

₩34,650

30%

₩49,500

Michael Kwon님의 다른 강의

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

프로젝트로 쉽게 배우는 TypeScript 기초강의 썸네일

프로젝트로 쉽게 배우는 TypeScript 기초

Michael Kwon

타입스크립트의 핵심 개념을 기초부터 실습까지 한 번에! 프로젝트를 통해 실무 활용까지

초급

초급

JavaScript, TypeScript, TailwindCSS

프로젝트로 쉽게 배우는 TypeScript 기초강의 썸네일

프로젝트로 쉽게 배우는 TypeScript 기초

Michael Kwon

바닐라 자바스크립트 & Tailwind CSS강의 썸네일

바닐라 자바스크립트 & Tailwind CSS

Michael Kwon

AI 활용과 컴포넌트 중심 UI 제작으로 배우는 실무형 웹 UI 개발, 디자이너+개발자 필수 코스!

초급

초급

JavaScript, vanilla-javascript, frontend

바닐라 자바스크립트 & Tailwind CSS강의 썸네일

바닐라 자바스크립트 & Tailwind CSS

Michael Kwon

Figma 디자인부터 퍼블리싱까지강의 썸네일

Figma 디자인부터 퍼블리싱까지

Michael Kwon

디자이너와 개발자를 위한 올인원 강좌! 새로운 UI3 반영

초급

초급

HTML/CSS, Figma

Figma 디자인부터 퍼블리싱까지강의 썸네일

Figma 디자인부터 퍼블리싱까지

Michael Kwon

Vue3와 Supabase로 구인구직 사이트 만들기강의 썸네일

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

나만의 풀스택 애플리케이션 개발에서 프로그래시브 웹앱(PWA)까지!

초급

초급

Vue.js, PWA, supabase

Vue3와 Supabase로 구인구직 사이트 만들기강의 썸네일

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

비슷한 강의

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

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편강의 썸네일

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

이정환 Winterlood

이제는 실전에 도전할 차례입니다 🔥 React.js + TypeScript + Supabase로 실무급 SNS를 함께 개발해보며 인증&인가, 무한스크롤, 이미지 업로드, 좋아요, 무한 중첩 댓글, 다크모드 등의 기능을 만들어 봅니다. 이 과정에서 Zustand와 Tanstack Query를 이용한 서버 및 전역 상태 관리 기법도 살펴볼 예정입니다.

중급이상

중급이상

React, TypeScript, react-query

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편강의 썸네일

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

이정환 Winterlood

Vue3와 Supabase로 구인구직 사이트 만들기강의 썸네일

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

나만의 풀스택 애플리케이션 개발에서 프로그래시브 웹앱(PWA)까지!

초급

초급

Vue.js, PWA, supabase

Vue3와 Supabase로 구인구직 사이트 만들기강의 썸네일

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]강의 썸네일

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

차세대 API 제어 기술인 GraphQL의 기본과 고급 사용법 그리고 GraphQL로 만들어 가는 가상의 키오스크 서비스를 통해서 실제 프로젝트 경험을 학습하게 됩니다. 강좌는 2024년 2월 기준 가장 최신 버전인 apollo-server v4로 강좌를 부분 업데이트 했습니다.

초급

초급

GraphQL, Svelte, MongoDB

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]강의 썸네일

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

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

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

로펀

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

초급

초급

Next.js, supabase, TailwindCSS

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

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

로펀

Svelte 실전 강의 - 스도쿠 만들기강의 썸네일

Svelte 실전 강의 - 스도쿠 만들기

이효범(Beomy)

Svelte, Express, JWT, MongoDB를 사용해서 웹 게임을 만들어 볼 수 있습니다. FrontEnd와 BackEnd 모두 다루어 보고 싶으신 분들 환영합니다!

중급이상

중급이상

Svelte, Express, MongoDB

Svelte 실전 강의 - 스도쿠 만들기강의 썸네일

Svelte 실전 강의 - 스도쿠 만들기

이효범(Beomy)

Svelte 입문 강의 - A부터 Z까지강의 썸네일

Svelte 입문 강의 - A부터 Z까지

이효범(Beomy)

React와 Vue, Angular 프론트엔드 3대장의 자리를 위협하는 Svelte 입문 강의입니다. Svelte 공식 문서를 토대로 Svelte 문법을 A부터 Z까지 모두 다룹니다.

초급

초급

Svelte

Svelte 입문 강의 - A부터 Z까지강의 썸네일

Svelte 입문 강의 - A부터 Z까지

이효범(Beomy)

인프런 클론코딩으로 배우는 올인원 LMS 솔루션: Next.js·Flutter·AWS·Supabase·prisma로 구현하는 다국어 HLS 스트리밍 기반 MVP 프로젝트강의 썸네일

인프런 클론코딩으로 배우는 올인원 LMS 솔루션: Next.js·Flutter·AWS·Supabase·prisma로 구현하는 다국어 HLS 스트리밍 기반 MVP 프로젝트

ludgi

이 강의는 단순한 클론코딩이나 기초 강의가 아닙니다. 인프런(Inflearn) 같은 LMS(Learning Management System) 플랫폼을 MVP(엠 브이 피) 수준으로 처음부터 끝까지 구현하면서, 프리랜서·1인 개발자·스타트업 초기 멤버가 실무에서 바로 활용할 수 있는 올인원 솔루션을 제공합니다. Next.js, Flutter, Supabase, Firebase(FCM), AWS, Vercel, Xcode, Android Studio, ElevenLabs, 토스페이먼츠까지 실제 실무에서 사용하는 스택을 한 번에 다룹니다. 웹과 앱을 동시에 개발하고, 소셜 로그인, 다국어 자동 더빙, HLS 스트리밍 기반 강의 재생, 결제 연동, 앱스토어·플레이스토어 배포까지 전 과정을 직접 경험할 수 있습니다. 이 강의는 세세한 코드 한 줄보다는, 실무에서 중요한 흐름, 설정, 배포 과정에 중점을 두었습니다. 따라서 프리랜서로 독립하려는 개발자, 스타트업에서 빠르게 MVP를 검증해야 하는 팀, 그리고 실무 전반을 경험하고 싶은 주니어 개발자에게 적합합니다.

중급이상

중급이상

Flutter, AWS, supabase

인프런 클론코딩으로 배우는 올인원 LMS 솔루션: Next.js·Flutter·AWS·Supabase·prisma로 구현하는 다국어 HLS 스트리밍 기반 MVP 프로젝트강의 썸네일

인프런 클론코딩으로 배우는 올인원 LMS 솔루션: Next.js·Flutter·AWS·Supabase·prisma로 구현하는 다국어 HLS 스트리밍 기반 MVP 프로젝트

ludgi

AI 시대에 살아남기: Supabase로 백엔드 뚝딱!강의 썸네일

AI 시대에 살아남기: Supabase로 백엔드 뚝딱!

제로초(조현영)

AI 시대가 도래하며 개발자에게 요구되는 능력은 점점 더 복잡해지고 있습니다. "프론트엔드만 잘하면 되겠지"라고 생각했지만, 나만의 서비스를 만들거나 AI 기능을 붙이려다 보면 결국 백엔드라는 거대한 벽에 부딪히게 됩니다. 하지만 막상 백엔드를 시작하려니 데이터베이스 설계, 사용자 인증(Auth), 스토리지 관리, 그리고 복잡한 인프라 구축까지 배워야 할 것이 너무 많아 압도되셨나요? 이제 그 무거운 짐을 내려놓으세요. 본 강의에서는 이 모든 백엔드 기능을 단숨에 해결해 주는 Supabase를 활용합니다. 복잡한 서버 지식 없이도 백엔드를 '뚝딱' 완성하고, 아이디어를 즉시 구현하는 풀스택 개발자로 거듭나는 가장 빠른 지름길을 안내합니다.

초급

초급

Node.js, DBMS/RDBMS, OAuth

AI 시대에 살아남기: Supabase로 백엔드 뚝딱!강의 썸네일

AI 시대에 살아남기: Supabase로 백엔드 뚝딱!

제로초(조현영)

Svelte로 시작하는 웹 프런트엔드강의 썸네일

Svelte로 시작하는 웹 프런트엔드

Indie Coder

세계적으로 관심이 높아지고 있는 프런트엔드 프레임워크, Svelte(스벨트)의 핵심 사용방법을 정리한 기초 강의입니다. 한국의 좀 더 많은 분들이 Svelte를 쉽고 편리하게 이용하기를 바라는 마음에서 강의를 만들었습니다.

초급

초급

Svelte

Svelte로 시작하는 웹 프런트엔드강의 썸네일

Svelte로 시작하는 웹 프런트엔드

Indie Coder

Svelte.js 입문 가이드강의 썸네일

Svelte.js 입문 가이드

HEROPY

2시간이 넘는 입문자를 위한 Svelte.js 무료 강의!!

초급

초급

Svelte

Svelte.js 입문 가이드강의 썸네일

Svelte.js 입문 가이드

HEROPY

2시간 만에 AI로 애드센스 수익형 웹사이트 만들기강의 썸네일

2시간 만에 AI로 애드센스 수익형 웹사이트 만들기

JSCODE 모던크루소

애드센스 수익형 웹사이트를 만드는 방법을 정리했습니다. 개발 경험이 없어도 따라올 수 있도록, 성공한 방식만 남겨 그대로 재현할 수 있게 구성했습니다.

입문

입문

웹앱, cloudflare, adsense

2시간 만에 AI로 애드센스 수익형 웹사이트 만들기강의 썸네일

2시간 만에 AI로 애드센스 수익형 웹사이트 만들기

JSCODE 모던크루소

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

딩코딩코

코딩 몰라도 OK! 당신의 아이디어를 단 4주 만에 실제 수익으로 바꿔보세요. AI와 최신 도구를 활용해, 웹사이트와 앱을 동시에 만들고 바로 서비스까지 연결합니다.

입문

입문

Flutter, Next.js, cursor

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

딩코딩코