Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
프로젝트로 쉽게 배우는 Svelte 기본편(SvelteKit + Supabase)
Highest Rated
Rating: 4.9 out of 5(40 ratings)
244 students

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

체계적인 단계의 프로젝트 실습과 배포, 빌트인 store 활용, SvelteKit와 Supabase로 풀스택 애플리케이션까지 한방에!
Highest Rated
Created byMichael Kwon
Last updated 11/2024
Korean

What you'll learn

  • 홈페이지에서 캐주얼 게임, 풀스택 애플리케이션 까지 다양한 주제의 프로젝트를 통해 프론트엔드의 핵심 기능들을 습득하고 문제해결 능력을 키웁니다.
  • Svelte의 간결하고 직관적인 문법을 사용하여 컴포넌트 기반 아키텍처를 구축하고 상태 관리, 이벤트 처리, 라우팅 등의 주요 주제를 다룹니다.
  • Vite를 통해 프로젝트 생성 및 빌드를 하고 깃허브와 Vercel을 통해 쉽게 웹에 배포합니다.
  • 빌트인 스토어를 통해 전역 상태관리를 쉽게 다루는 방법을 습득할 수 있습니다.
  • SvelteKit과 Supabase로 풀스택 애플리케이션을 쉽게 개발합니다.
  • 최소한의 시간 대비 많은 것들을 습득 가능합니다.

Course content

4 sections • 104 lectures • 8h 27m total length

  • 소개3:15

    Svelte 소개 및 기본 개념과 타 프레임워크들과의 차이점을 설명합니다. 이를 통해 현대적인 웹 애플리케이션의 개발 흐름과 방향을 이해할 수 있습니다.

  • 개발환경 설정1:29

    개발환경과 추가적인 패키지 설치에 필요한 Node.js와 npm(node package manager)을 설치합니다.

  • 프로젝트 생성(Vite)4:50

    프론트엔드 개발 도구인 Vite를 통해 Svelte 프로젝트를 생성합니다.

  • 데이터를 문서에 표시하기7:41

    • 데이터 변수들을 화면에 출력하는 방법

    • 스타일 및 이미지 속성등을 데이터로 다루는 방법

  • 반복문으로 영화정보 표시하기4:14

    반복문 #each를 이용하여 영화정보 데이터를 문서에 표시합니다.

  • 이벤트 기능으로 좋아요 버튼 만들기 1/24:23

    on: 지시어(directive)로 사용자의 입력에 반응하는 이벤트 기능을 연결할 수 있습니다. 이를 이용하여 좋아요 버튼을 구현합니다.

  • 이벤트 기능으로 좋아요 버튼 만들기 2/23:05

    좋아요 버튼의 카운트를 각각의 영화정보에 개별적으로 반영합니다.

  • 스타일 변경하기4:40

    이미지 콘텐츠를 추가하고 전역 스타일과 지역 스타일로 컴포넌트들을 디자인 하는 방법에 대해 학습합니다.

  • 조건문으로 동적 콘텐츠 추가하기3:31

    영화 상세정보를 보여주는 모달창을 열고 닫는 기능을 학습합니다.

  • 영화 데이터를 외부에서 가져오기5:43

    • 외부에 작성한 영화데이터를 export로 내보내고 import로 가져옵니다.

    • 데이터 및 라이브러리 관리를 위한 export & import 활용 방법에 대해 다룹니다.

  • 모달창 정보 동적으로 보여주기3:42

    모달 창에 클릭한 영화정보를 동적으로 표시합니다.

  • component로 기능별 UI 분리하기4:00

    영화정보 홈페이지의 주요 UI 요소들을 component로 분리하여 작성합니다.

    • 네비게이션 UI를 component로 추가합니다.

    • 모달창을 component로 분리합니다.

  • 하위 component에 데이터 전달하기(Props)4:17

    • 컴포넌트로 분리된 상세정보(모달)창에 데이터를 전달합니다.

    • props 문법으로 부모 컴포넌트에서 하위 컴포넌트에게 데이터를 전달합니다.

  • 부모 component의 데이터 변경하기4:50

    bind 지시어를 사용하여 props를 전달하면 부모 컴포넌트에게 데이터 변경을 요청할 수 있습니다. 해당 기능을 이용하여 모달 컴포넌트에서 창을 닫는 기능까지 완성합니다.

  • 영화목록 component 만들기5:25

    component간 데이터 통신의 종합적인 응용입니다.

    • 영화목록을 component로 만들어 props를 통해 영화 데이터를 전달합니다.

    • 좋아요 버튼과 상세보기(모달창) 관련 props를 전달하고 해당 기능이 동작할 수 있도록 합니다.

  • 동적 class 및 효과 다루기 1/26:02

    • 상태변수로 class를 동적으로 추가하는 방법을 다룹니다.

  • 동적 class 및 효과 다루기 2/25:55

    • class를 동적으로 추가하는 방법에 대해 알아보고 이를 이벤트 창에 적용하여 닫기 기능을 구현합니다.

    • 스벨트의 효과 기능을 통해 다이네믹한 이벤트 창을 구현합니다.

  • 검색창 입력 기능5:52

    • 검색창에 사용자의 입력을 받는 기능을 구현합니다.

    • bind 지시어로 사용자의 입력을 간편하게 처리할 수 있습니다.

  • 입력값 검사하기5:45

    리액티브 선언문($)으로 검색창에 텍스트가 입력될 때 어떤 텍스트가 입력되었는지 검사하는 기능을 추가합니다.

  • 영화제목 검색기능 1/27:34

    • 영화 데이터를 가져와서 검색어에 입력된 값과 영화제목을 비교하여 찾는 로직을 구현하고 검색 실패 시 경고 메시지를 출력하게 합니다.

    • 검색 버튼을 키보드 입력에 반응하도록 합니다.

  • 영화제목 검색기능 2/21:41

    • 입력한 문자가 포함되어 있는 영화자료를 찾을 수 있도록 검색 로직을 수정합니다.

  • 검색 결과 표시하기5:22

    • 배열 데이터 복사를 다루는 방법에 대해 학습합니다.

    • 사용자가 검색창에 입력한 결과를 화면에 업데이트 합니다.

    • 검색 결과 표시 이후, 원본 데이터를 다시 가져와 전체 데이터를 보여주도록 합니다.

  • 전체보기 버튼 추가하기2:10

    • 전체보기 기능을 추가합니다.

    • 검색결과가 없는 상태에서 전체보기를 클릭 했을 때 경고창이 사라지지 않는 문제를 수정합니다.

  • 좋아요가 클릭이 안되는 문제(자료에 고유 id 부여하기)6:42

    영화 데이터를 검색하여 좋아요 버튼이나 상세보기 창으로 연결시 정보가 올바르게 업데이트가 되지 않는 이유와 그 해결책으로 영화 데이터에 고유 id 속성을 부여하여 조회하는 방법에 대해 학습합니다

  • 라이프사이클(Lifecycle)5:55

    컴포넌트가 실행되고 업데이트 되고 종료되는 상태에 따라 작업을 처리하는 개념이 있습니다.

    이를 라이프사이클(Lifecycle), 즉 생명주기라고 하는데 간단한 개념과 실습으로 다루어 봅니다.

  • 시간 경과시 이벤트 창 텍스트 전환하기 1/25:16

    라이프사이클 훅(Lifecycle hook)을 이용하여 이벤트 창의 광고 텍스트가 일정 시간이 지나면 다른 내용으로 업데이트 되도록 합니다.

  • 시간 경과시 이벤트 창 텍스트 전환하기 2/24:41

    setInterval을 이용하여 이벤트 창의 광고 텍스트가 계속 순환되도록 하고 onDestroy 훅으로 컴포넌트 종료시 정리하는 작업에 대한 사례를 학습합니다.

    $(리액티브선언문)으로 setInterval 함수를 쉽게 다루는 방법도 소개합니다.

Requirements

  • HTML, CSS, JavaScript에 대한 기초적인 이해가 필요합니다.
  • 가능한 짧고 간결한 구성을 추구하였으니 짬짬이 시간을 내어 들어주시면 완강할 수 있어요!
  • 프레임워크 별 시리즈물로 한번 들으면 다른 주제의 강의도 익숙한 경험을 제공합니다.

Description

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


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


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


- 2024년 6월 SvelteKit 활용 콘텐츠 업데이트

- 2024년 5월 캐주얼 게임 만들기(빌트인 store 활용) 업데이트


주요 내용:

  1. 영화정보:

    • 실습을 통해 Svelte의 필수 핵심 기능들을 빠르게 학습

    • 데이터 바인딩, 컴포넌트, 상태 관리, props

    • 이벤트 핸들링, 라이프사이클, 리액티브 선언문 활용하기

    • 스벨트 효과(transition & animation) 기능 활용


  2. 브랜딩 홈페이지:

    • 페이지 라우팅

    • 양방향 데이터 바인딩

    • SASS로 스타일링 하기

    • 멀티미디어 다루기

    • 빌드 및 배포하기


  3. 캐주얼 게임 만들기

    • 게임 디자인 구성안을 토대로 한 체계적인 실습

    • 라우터 없이 동적 페이지 연결하기

    • 게임 로직 구현을 통한 게임 이벤트 처리 및 화면 제어를 다루는 법

    • 빌트인 store로 게임 정보들을 쉽게 전역 상태로 관리하기

    • Audio API를 활용하여 BGM과 효과음 구현하기


  4. 일기장 앱(SvelteKit + Supabase)

    Svelte에서 기능을 확장한 SvelteKit 프로젝트를 통해 파일 기반 라우팅, 서버 사이드 로직을 처리하고 실제 database와 연동되는 풀스택 애플리케이션을 손쉽게 개발하는 과정을 학습합니다.

Who this course is for:

  • HTML, CSS, JavaScript에 대한 기초적인 이해가 있지만 프레임워크나 라이브러리를 사용한 경험이 적은 분
  • 프론트엔드에 대한 기본기 습득을 원하는 분
  • 실습 위주로 빠르게 공부하고 싶은 분
  • 투입 대비 빠른 결과물을 원하는 개발자

Report abuse