📘
만들면서 배우는 svelte
  • 1. svelte 소개
  • 2. 개발환경 설정
    • 수업 코드 및 문서 가이드 안내
    • 비주얼스튜디오 & REPL
    • 설치
  • 3. 컴포넌트 - 기본
    • 앱 구조 설명 : main.js, App.js, 폴더구조
    • 컴포넌트 기본 : 레이아웃 샘플 구성(여러 component 연동)
    • state
    • reactivity
    • 컴포넌트 통신방법용 기본 앱 코드
    • 컴포넌트 통신방법 1 : props
    • 컴포넌트 통신방법 2 : dispatch
    • 컴포넌트 통신방법 3 : context API
    • 컴포넌트 통신방법 4 : store
  • 4. 컴포넌트 - 템플릿 제어
    • {#if ...}
    • {#each ...}
    • bind
    • event
    • slot
    • lifecycle (생명주기)
  • 5. 스타일 및 효과
    • 동적 css 적용방법
    • transition : 화면전환
    • todo store 적용 3 : 컴포넌트에 store 연동
  • 6. 실습 1 - TODO 만들기
  • 7. 실습 2 - store를 통한 todo 리팩토링
  • 8. 라우터 - routify
    • 소개 & 설치
    • 라우팅 생성
    • 링크 생성
    • parameter 전달 및 받기
    • todo 서비스에 적용
  • 9. ajax 처리
    • fetch와 {#await ..} 적용
    • axios 적용
  • 10 . 기타
    • 경로 쉽게 적용하기
    • javascript 배열 조작 메서드
    • 화살표 함수
Powered by GitBook
On this page
  • 1) 크롬 브라우저
  • 2) 비주얼스튜디오 코드 설치
  • 3) package 설치
  • 4) REPL

Was this helpful?

  1. 2. 개발환경 설정

비주얼스튜디오 & REPL

1) 크롬 브라우저

강좌에서 사용되는 기본 브라우저는 크롬입니다.웹표준을 준수하는 브라우저면 사용이 가능합니다.

2) 비주얼스튜디오 코드 설치

개발 환경은 기본적으로 비주얼스튜디오 코드를 통해서 진행하도록 하겠습니다.

무료로 사용할 수 있는 툴이므로 다음 주소에서 다운받으실 수 있습니다

https://code.visualstudio.com/

3) package 설치

package에서 svelte를 검색하시면 다양한 패키지를 찾아볼 수 있습니다. 이중에서 제가 기본적으로 사용하는 패키지는 다음과 같습니다.

  • svlte for vs code: svelte intellisense, svelte코드에서 기본 에러 표시 및 emmet 등을 사용할 수 있게 도와줌

  • svlete3 snippets: 각종 단축어 사용 가능

4) REPL

REPL은 read-eval-print-loop 의 약자로 쉽게 말해 별다른 툴설치 없이 바로 svelte코드를 타이핑하고, 결과를 바로 볼 수 있는 서비스를 말합니다. svelte사이트에 가시면 svelte 에 대한 REPL 환경을 제공하고 있습니다.

todo 실습 전까지는 이 환경에서 수업을 진행해도 별다른 무리는 없으니 이부분 참고 부탁드립니다.

[만들면서 배우는 Svelte]

Previous수업 코드 및 문서 가이드 안내Next설치

Last updated 4 years ago

Was this helpful?

만들면서 배우는 svelte