📘
만들면서 배우는 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

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

Last updated 4 years ago

Was this helpful?

1) 크롬 브라우저

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

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

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

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

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 실습 전까지는 이 환경에서 수업을 진행해도 별다른 무리는 없으니 이부분 참고 부탁드립니다.

https://code.visualstudio.com/
[만들면서 배우는 Svelte]
만들면서 배우는 svelte