Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
개발 · 프로그래밍

/

프론트엔드

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

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

(4.8) 수강평 23개

수강생 996명

  • Indie Coder
3시간 만에 완강할 수 있는 강의 ⏰
스벨트
프론트엔드
웹개발
svelte
저자 직강
Svelte
Thumbnail

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

이런 걸 배울 수 있어요

  • Svelte (스벨트)

  • 웹 프런트엔드 기초

떠오르는 FE 대세 스벨트(Svelte) 
기초부터 쉽고 빠르게! 

Svelte라고 들어보셨나요?

Svelte는 현재 전세계 프런트엔드 시장에서 가장 주목받고 있는 프레임워크입니다. React(리액트)나 Vue(Vue.js)보다 다소 늦게 세상에 나왔지만 후발 주자임에도 불구하고 이들 이상의 큰 기대를 받고 있습니다.

StactOverflow 및 Stateofjs 등을 보면 얼마나 많은 개발자들이 Svelte에 관심을 갖고 있는지를 한눈에 알 수 있습니다.

StackOverflow 연말 서베이
State of JS 2022 자바스크립트 프레임워크/라이브러리 순위

이런 것들을 배워요 ✒️

스벨트 도서 저자 직강!

이 강의는 ‘스벨트로 시작하는 웹 프런트엔드’ 도서의 일부 챕터를 영상으로 만든 강의입니다. 
(선수 지식: HTML/CSS 및 JavaScript 기초)

컴포넌트 단위로 개발되는 프런트엔드의 기본을 Svelte를 이용해서 배우게 됩니다. 컴포넌트의 핵심 기능인 통신 방법, 이벤트 조작, 화면 효과 등을 통해서 화면에 보여지는 결과물들이 어떻게 Reactive하게 만들어지고 조작되는지를 익힐 수 있습니다. (HTML, JavaScript & Svelte)

  • ✅ Svelte 기초 문법
  • ✅ 컴포넌트간 통신방법
  • ✅ 화면 전환 애니메이션
  • ✅ 이벤트 조작 방법
  • ✅ 반응형 코드를 통한 Reactive한 프로그램 기법

스벨트로 쉽게 만드는 FE 결과물 👀

Svelte가 가진 특징은 많지만 가장 큰 특징은 쉽다는 점입니다. 자바스크립트 기초 지식만 있다면 정말 쉽게 배우고 곧바로 어떤 결과물을 만들어 볼 수 있습니다.

프런트엔드 개발이 처음인 개발자 분들도 강의를 통해 대략적으로 프런트엔드 개발이 어떤 식으로 진행되는지 알 수 있도록 강의에서는 이 Svelte 프레임워크를 사용하는데 필요한 필수적인 내용만을 선별해서 진행됩니다.

이런 분들께 추천합니다 🙆‍♀️

프론트엔드 개발에 관심이 있는 누구나

좀 더 빠르게 무언가를 만들고 싶은 분

Svelte에 대해 한번쯤 들어보신 분

프론트엔드에 도전하고 싶은 디자이너, 퍼블리셔

Q&A 💬

Q. 강의 난이도가 어떻게 되나요?

HTML, Javascript에 대한 기초적인 지식이 있는 분이라면 누구나 학습 가능합니다. Svelte에 관한 내용중에서 복잡하고 덜 중요한 부분들은 제외하고 필수로 알아야 하는 부분들만 간추려서 만든 Svelte 기초 강의입니다.

Q. 개발 환경은 어떻게 되나요?

macOS, Windows, Linux 등 Node.js를 설치할 수 있는 어떤 PC에서라도 개발환경에 필요한 프로그램을 설치하고 진행할 수 있습니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 프런트엔드 개발에 관심이 있는 누구나

  • 좀 더 빠르게 무언가를 만들고 싶은 분

  • Svelte에 대해 한 번쯤 들어보신 분

  • 디자이너 또는 퍼블리셔에서 프런트엔드에 도전하고 싶은 분

선수 지식,
필요할까요?

  • HTML 및 CSS 기초

  • JavaScript 기초

안녕하세요
입니다.

2,409

명

수강생

55

개

수강평

84

개

답변

4.8

점

강의 평점

5

개

강의

2000년도 중반부터 본격적으로 웹개발을 시작하여 현재까지 프리랜서 개발자로 활동하고 있습니다. 약5년간 Amplix BI 솔루션 실무자 교육을 진행하고 개발을 지원하며 새로운 기술을 효율적으로 전달하는 것에 대한 많은 경험과 고민을 했습니다. 

현재는 개발 업무와 함께 개발자들에게 도움이 될만한 웹관련 분야의 새로운 기술을 찾고 강좌와 책을 통해 공유하고 있습니다. 

 

현) 프리랜서

전) (주) 비즈플러그 전략솔루션 사업부 팀장

전) (주) 퍼니몽키스 위니스토리 서비스 개발 팀장

youtube: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw 

email: freeseamew@gmail.com

blog1: https://medium.com/freeseamew

blog2: https://dev.to/freeseamew

 

강좌 목록

출간도서

yes24, 교보문고, 알라딘

 

 

 

커리큘럼

전체

5개 ∙ (1시간 6분)

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

수강평

전체

23개

4.8

23개의 수강평

  • j25sun3810님의 프로필 이미지
    j25sun3810

    수강평 2

    ∙

    평균 평점 4.0

    4

    100% 수강 후 작성

    This is a simple and straightforward lecture.

    • gto1997님의 프로필 이미지
      gto1997

      수강평 6

      ∙

      평균 평점 4.8

      4

      60% 수강 후 작성

      • jackyu0721님의 프로필 이미지
        jackyu0721

        수강평 4

        ∙

        평균 평점 5.0

        수정됨

        5

        100% 수강 후 작성

        A good lecture where you can get a light introduction to what Svelte is! The downside is that some chapter materials require going to YouTube to check? This part can actually be resolved by typing it out yourself : ) Thank you for the good lecture ~

        • qkralswgud13246879님의 프로필 이미지
          qkralswgud13246879

          수강평 2

          ∙

          평균 평점 5.0

          5

          100% 수강 후 작성

          • ppipa20102977님의 프로필 이미지
            ppipa20102977

            수강평 4

            ∙

            평균 평점 5.0

            5

            100% 수강 후 작성

            무료

            Indie Coder님의 다른 강의

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

            Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)강의 썸네일

            Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)

            holocoding

            A course to learn the latest Node.js backend REST API using fastify, a Node.js framework boasting high speed, ORM Prisma, and Typescript.

            초급

            초급

            Node.js, TypeScript, Prisma

            Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)강의 썸네일

            Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)

            holocoding

            Svelte REST-API project강의 썸네일

            Svelte REST-API project

            holocoding

            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

            holocoding

            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]

            holocoding

            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]

            holocoding

            Learn Svelte by Building강의 썸네일

            Learn Svelte by Building

            holocoding

            This course will teach you the latest front-end framework, Svelte. After learning the basics of Svelte, you will learn how to use Svelte in real projects by creating a Todo app.

            초급

            초급

            Svelte

            Learn Svelte by Building강의 썸네일

            Learn Svelte by Building

            holocoding

            비슷한 강의

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

            Svelte.js [Core API] Complete Guide강의 썸네일

            Svelte.js [Core API] Complete Guide

            heropy

            The best Svelte.js course ever, over 21 hours long!

            초급

            초급

            Svelte, Rollup, Sortable

            Svelte.js [Core API] Complete Guide강의 썸네일

            Svelte.js [Core API] Complete Guide

            heropy

            Svelte.js SPA movie search project강의 썸네일

            Svelte.js SPA movie search project

            heropy

            We're building and deploying a Svelte-based SPA movie search site!

            중급이상

            중급이상

            Svelte, SPA

            Svelte.js SPA movie search project강의 썸네일

            Svelte.js SPA movie search project

            heropy

            Learn Svelte (SvelteKit + Supabase) easily with projects강의 썸네일

            Learn Svelte (SvelteKit + Supabase) easily with projects

            csslick

            Systematic step-by-step project practice and deployment, built-in store utilization, full-stack application with SvelteKit and Supabase, all in one go!

            초급

            초급

            Svelte, sveltekit, supabase

            Learn Svelte (SvelteKit + Supabase) easily with projects강의 썸네일

            Learn Svelte (SvelteKit + Supabase) easily with projects

            csslick

            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]

            holocoding

            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]

            holocoding

            Svelte Practical Tutorial - Creating Sudoku강의 썸네일

            Svelte Practical Tutorial - Creating Sudoku

            beomy

            You can create a web game using Svelte, Express, JWT, and MongoDB. Those who want to cover both the FrontEnd and BackEnd are welcome!

            중급이상

            중급이상

            Svelte, Express, MongoDB

            Svelte Practical Tutorial - Creating Sudoku강의 썸네일

            Svelte Practical Tutorial - Creating Sudoku

            beomy

            연관 로드맵

            강의가 포함된 로드맵으로 학습해 보세요!

            자바스크립트 웹개발의 모든 것 로드맵 썸네일

            자바스크립트 웹개발의 모든 것

            Indie Coder