인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

웹 개발

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

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

(5.0) 수강평 7개

수강생 66명

Sveltesveltekitsupabase

초급자를 위해 준비한
[Svelte, supabase] 강의입니다.

이런 걸 배울 수 있어요

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

  • 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입니다.

130

명

수강생

9

개

수강평

10

개

답변

5.0

점

강의 평점

4

개

강의

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

- 저서 -

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

더보기

커리큘럼

전체

104개 ∙ (8시간 23분)

해당 강의에서 제공:

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!