svelte

svelte start

kit npm 설치 npm create svelte@latest .prettierrc 추가 필요 한 사항 scss, postcss, alias 기본 설정 tailwindcss 선택 사항 기타 라이브러리 적용여부

script 부분 내 {}로 연결부모 페이지자식 페이지결과 : type2

변수 선언 후 $: 표시로 상태 변환 체크 가능상태 종속성이 잘못된 경우 컴파일되지 않으므로 사용시 주의

if와, each 문은 html 영역에서 제어each 문은 쓸때는 spread 문법과 고유 아이디 값을 귀찮더라도 작성하자객체의 키, 값을 제어 할때는 Object.entris()- key,value 제어함

parent.sveltechild.svltechildBind.svelte

bind:this 사용

스벨트는 기본 적으로 전환에 대한 요소를 가지고 있다.linear 형태 보다 스무스 한 전환기본적인 요소가 있고 해당 전환 마다 option 값이 추가 적으로 있다.추가 적으로 spring, in,out 등 option값이 더 있다.ex

리액트의 useRef()와 비슷한 기능

하위 요소에 지정 위치로 출력name 요소와 매칭 필요

app.sveltechile컴퍼넌트 생성시 같은 구조로 작성될때 데이터값으로 매칭하여 작성svelte:head, svelte:body , svelte:window 등 스벨트 자체 내에서 접근 가능

appstore.jsstore 작성 시 writable, readable , subscribe 필요기본 fetch api 활용svelte 기본 내 {#await} {:then} {:catch} 태그 활용 가능

6월 22일 svelte 4 릴리즈노드 16 버전 이상 필요, 이전 버전 지원 X스벨트킷 1.20.4 이상 vite 2.4.1 이상웹팩 사용시 버전 5 이상 롤업 7.1.6 이상타입스크립트 사용 시 5 버전 이상jsdoc 기본링크텍스트링크텍스트마이그레이션 - npx s

유튜브 국내 코딩셀러 url https://www.youtube.com/@SvelteSociety

9월 20일 svlete 5 중요한 변경사항 공지 기존 코드 작성 시 let 변수 , $: , onMount(), $$restProps rune - $state, $derived, $effect, $props $state 스벨트에서는 의 코드와 같이 간단하게

스벨트 5 alpha 1이 나오게 되면서 사용을 할수 있게 되었습니다. 스벨트5에서는 지난 몇달 전에 나온 부분대로 rune 이란 체계로 전환 될 예정입니다. 기존 스벨트 let 코드 사용시 $state - 변수 선언, $derived - 함수 선언, $effect