# svelte
Svelte 구축할 때 경험에 의한 장단점
내가 임시 글에 장황하게 쓰다 말았는데, 원래는 내 경험에 입각하여 소개하려고 했으나, 너무 거품 쩔어서 그냥 간략하게 작성하도록 하겠다. 내 경험에 입각한 의견이 많으니, 크로스체크는 본인에 맡긴다.
svelte has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
svelte로 api 요청하다가 이런 에러를 발견했을때쉽게 해결할 수 있는 방법을 찾았다export const loadMembers = () => { return fetch(baseurl, { method: 'GET', headers: { 'Con
Svelte/SvelteKit 리액트와의 차이는?
Svelte가 그렇게 간단한 사이트 만드는데 좋다던데... SvelteKit으로 풀스택도 지원한다던데 이참에 한번 해보기로 했다. 괜찮으면 포트폴리오를 다시 쓰는것도 좋은 생각인것 같음.먼저 가장 친숙한 react와의 비교를 해보아야 하겠다.템플릿 언어: React에서
store
appstore.jsstore 작성 시 writable, readable , subscribe 필요기본 fetch api 활용svelte 기본 내 {#await} {:then} {:catch} 태그 활용 가능
svelte:component, svelte:head, svelte:head
app.sveltechile컴퍼넌트 생성시 같은 구조로 작성될때 데이터값으로 매칭하여 작성svelte:head, svelte:body , svelte:window 등 스벨트 자체 내에서 접근 가능
[Svelte] 스벨트란 무엇일까?
Svelte란? 스벨트의 코드구조 스벨트 파일(.svelte)은 주로 다음과 같은 구조로 구성되어 있습니다. 그리고 스크립트 영역에서 외부 스벨트 파일로부터 캡슐화된 html, css, JS 코드를 import 받아서 사용할 수 있습니다. 이때 구성요소의 이름은 대문
svelte 스터디 #5 Events
on 지시어를 이용하여 어떤 이벤트라도 수신할수 있다고 설명한다.이벤트 핸들러를 아래 예제와 같이 인라인으로 선언도 가능하다.따옴표는 선택사항이고, 강조의 의미로 유용하다고 한다.일부 프레임워크는 성능상의 이슈로 인라인 핸들러를 지양하지만,svelte에서는 컴파일러에서
svelte 스터디#4 Logic
{{/if}로 닫는다. 닫을때는 "{:else} 를 사용하여 else 블럭을 표현한다.{:else if 컨디션} 블럭을 사용하여 else-if 표현을 할수 있다.{{/each}로 닫는다.if 문과 규칙이 동일하다.추가로 as 뒤에 변수를 하나 추가하여 index까지 f
svelte 스터디#3 Props
Declaring Props 지금까지는 내부상태만 다루었다. 즉, 동일 콤포넌트 내에서만 적용된다. 타 컴포넌트로 상태를 전달하기 위해서는 props라고 불리는 properties를 선언해야 한다.
svelte 스터디#3 Reactivity
버튼에 이벤트 핸들러를 연결하고, 변경된 값을 html에 다시 표현하는 예제이다.역시 간다하다.첫번째 예제와 비슷하다.doubled 라는 변수가 count 값이 변경되면서 같이 변경된다.이때, 간접적으로 변경된 변수도 반응성을 보이려면 $: 문법을 사용해서 변수를 선언
svelte 스터디#2 Introduction
svelte는 무엇인가에 대해 소개한다.But there's a crucial difference: Svelte converts your app into ideal JavaScript at build time, rather than interpreting your ap
svelte 스터디#1
스터디 배경 일단 백엔드 개발을 주로 하며, 프론트 알못이다. 백엔드 개발자 이지만 어드민 페이지등 프론트를 어느정도 담당하게 된다. 프론트 개발와 달리 "업무 데이터 처리" 관점에서 조회,입력,수정이 목적이다. 당연히 쉽고, 빠르고면 최고다. 그럼점에서 난 rea
React는 Virtual Dom! Svelte는!?
브라우저 렌더링 과정과 Virtual DOM 브라우저 렌더링 과정 크롬이나 사파리, 파이어폭스 같은 것들을 브라우저라고 한다. HTML 문서는 내가 원하는 웹페이지의 요소들과 그 구조를 마크업으로 작성하여 보낸다. body 태그 안에 header, main, foo
motion, transition, easing, animate
스벨트는 기본 적으로 전환에 대한 요소를 가지고 있다.linear 형태 보다 스무스 한 전환기본적인 요소가 있고 해당 전환 마다 option 값이 추가 적으로 있다.추가 적으로 spring, in,out 등 option값이 더 있다.ex